I wanted to implement a DateTimePicker using Angular Material.
I came to this example I went through all the steps.
In the site there were some live examples too. I was interested to implement the DateRange Example.
I found out that Angular Material doesn't use the md-input-container anymore, instead it uses mat-form-field.
I copied the code and a strange DateTimePicker is showing, not like in the site.
I think maybe angular doesn't understand this mdc-datetime-picker or it could be because I used mat-form-field.
Here is the code which I implemented just for testing:
<div layout="column">
<mat-form-field>
<label>Start Date/Time</label>
<input mdc-datetime-picker="" date="true" time="true" type="text"
placeholder="Date" max-date="dateTimeEnd" ng-model="dateTimeStart" class=" md-input"
readonly="readonly" id="input_0">
<div></div>
</mat-form-field>
</div>
Any Idea on where the problem could be?
Related
I am trying to use Mat-keyboard but the focus on input changes when I click the keyboard. Please see the image below -
displayed view of my keyboard
<form ngForm="myForm">
<mat-form-field>
<input matInput placeholder="Code" type="text" name="code">
</mat-form-field>
<mat-keyboard></mat-keyboard>
</form>
I want to achieve something this blog shows on angular 6:
Kindly visit to get more clarity
https://rawgit.com/GreenfieldVentures/angular-on-screen-keyboard/master/demo2.html
Thanks for your help!
You're not supposed to use <mat-keyboard> on it's own - it says so in the docs:
A component used to open as the default keyboard, matching material spec. This should only be used internally by the keyboard service.
Only use it as a directive:
<input matInput matKeyboard placeholder="Code" type="text" name="code">
You can read more on it on the docs site.
I am setting up an Angular project to use the Angular Material framework. I am also using materializecss. When I try to create a form, I get a double control shown below...
Here is how I am creating this field:
<mat-form-field hintLabel="Max 10 characters" appearance="standard">
<input matInput #input (keyup)="applyFilter($event.target.value)" placeholder="Filter catalogs">
</mat-form-field>
Use either Angular Material MatInput and MatFormField or MaterializeCSS, but not both. They both add their own style to input, causing the problem you see.
I'm using jQuery mobile and Knockout JS (latest versions of both).
I cannot seem to style a horizontal list after knockout updates the dom.
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
3G
SD
HD
HD+
/div>
The "Static" looks good, but the "dynamic" is not styled by jQuery mobile. I've tried several methods of trying to make this work, and I am missing something... after knockout runs, I do:
$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});
But here is what it looks like:
Thoughts?
After appending new items, use the below code.
$('[data-role="controlgroup"]').controlgroup().trigger('create');
Note: Creating completely new controlgroup doesn't get enhanced corners dynamically. However, appending new items into existing controlgroup corners get enhanced. This problem can be solved by adding ui-first-child and ui-last-child classes.
$('[data-role="controlgroup"] a').first().addClass('ui-first-child');
$('[data-role="controlgroup"] a').last().addClass('ui-last-child');
Demo
Turns out with Knockout you need to remove the controlgroup from the div so you dont get the "empty wrapper". So the dynamic code looks like:
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
and then on page load, you can call
$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');
and this works. Thanks to Omar for the help on the first/last rounded classes tip!
I'm new to all this so please bear with me.
I've been using some jQuery UI widgets and I'm wanting to create category (adults) radio buttons with their own set of subcategories (children) that only appear when the appropriate adult is selected.
Here's the code I have so far: http://jsfiddle.net/99azd/
The problem is only the formatting of the initial set of children work, the others show up as plain checkboxes. I think it has something to do with the div id="format" but I'm not sure.
<div style="display: none;" id="Adult1Children">
<div id="format">
<input type="checkbox" id="child1" value="child1"/><label for="child1">child1</label>
<input type="checkbox" id="child2" value="child2"/><label for="child2">child2</label>
</div>
</div>
Got some help from the IRC channel - here's the fixed code:
http://jsfiddle.net/w6qFC/
I had a duplicated id "format" so it only ran the first one. All I had to do was change the id to a class instead and then in the js change from #format to .format. Simple.
$( ".format" ).buttonset();
and
<div class="format">
I would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).
In a dream world, here is what would work:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>
Thanks a lot for your help
You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html
This is even more tricky because the icon's are entered as styled spans which is exactly how the jqm checkbox is rendered - they both use the ui-icon for some base styling and positioning.
If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ - but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.
Hope this gets you going in the right direction.
I am not sure if this is only available in the latest jQuery mobile (1.4.5) but you can just add ui-icon via the "class" attribute. So for this example it would look like this:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' class='ui-icon-star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>