I have used ngx-material-timepicker for implementing the time filter.in our case time picker is open properly but its not working in the following scenarios:
Case 1 :
1.initially i have set selected time in the input and it working properly now this time i am not using with [(ngModel)]
<input [ngxTimepicker]="defaultValue" [value]="'05:11 pm'" (change)="selectChanged($event)">
<ngx-material-timepicker #defaultValue></ngx-material-timepicker><br>
Case 2 :
2.Now we have add [(ngModel)] for get the selected value that is selected fro the picker but now this time out initially set value is not showing in the input but if i remove the [(ngModel)] its working:
<input [ngxTimepicker]="defaultValue" [(ngModel)]="date1" [value]="'05:11 pm'" (ngModelChange)="selectChanged($event)" >
<ngx-material-timepicker #defaultValue></ngx-material-timepicker><br>
I have also post above issue in the github but get any response,please tell me anyone how to fix above issue.
I've got the same problem but in my case my inputs are into form and i forget about the name propriety.
i just added the name="date" in the input tag
<mat-form-field class="toggle-example" style="width: 100%">
<input matInput [(ngModel)]="time" [ngxTimepicker]="toggleTimepicker" name="time" [format]="24" [disableClick]="true" readonly>
<ngx-material-timepicker-toggle matSuffix [for]="toggleTimepicker"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #toggleTimepicker></ngx-material-timepicker>
</mat-form-field>
I have fixed issue via below code:
<input [ngxTimepicker]="defaultValue" [(ngModel)]="date1 == undefined ? defaultValue : date1" [value]="'05:11 pm'" (ngModelChange)="selectChanged($event)" >
I think the onchange that you were asking is to set the time
You can use [timeset]="(setTime())" inside your ngx-time-picker tag
And in your ts file write the set time method.
I used this step and succeeded
<mat-form-field>
<input aria-label="default time" matInput [ngxTimepicker]="defaultValue" [value]="'9:00 am'" readonly>
<ngx-material-timepicker (timeSet)="setTime($event)" #defaultValue>
</ngx-material-timepicker>
Related
I am facing issue in rendering mat date picker. however it works fine when i reload the page. It only happens when i navigate from one tab to another.
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" id="date" required [(ngModel)]="d.date" name="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker ></mat-datepicker>
</mat-form-field><br />
Thanks in Advance!
I had this issue myself. In my case, I had a component with ViewEncapsulation.None loaded beforehand with css that broke the datepicker.
I've searched around the net but I have not found a solution.
Is there something like numeric up down, for numeric selection in Grails?
How can I create it?
You can achieve your requirement via simple html as:
<input type="number" name="quantity">
you can set range also as:
<input type="number" name="quantity" min="1" max="5">
and If you want you can add value attribute to be shown as:
<input type="number" name="quantity" min="1" max="5" value="${domainInstace.attribute}">
and Enjoy.......
Within a gsp ?
<g:select id="orderby" name="orderby" from="${1..10}" noSelection="['':'-Define Display Order 1 top 10 bottom-']" required="" value="${youdomainClassInstance?.orderby}" class="many-to-one"/>
I am working on JQuery Mobile Datebox and there is something i can't fix. If user type some weird input in year area something like 1988123, datebox gets crazy and changes value of date "undefined, undefined NaN, NaN".
I tried the get only year value from Datebox, but day, month or year area doesn't have id field. So I couldn't get any solution. Can anybody help me?
try HTML5 pattern:
<form
onsubmit="alert('Submitted.');return false;">
<input
type="text"
required=""
pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
value=""
name="dates_pattern2"
id="dates_pattern2"
list="dates_pattern2_datalist"
placeholder="Try it out.">
<input
type="submit"
value="ยป">
<datalist
id="dates_pattern2_datalist"></datalist>
</form>
Finally I did find a solution.
As you know, JQuery Mobile Datebox has some data-options. I find an option which is "maxYear".
<input name="tarih1" id="tarih1" type="date" data-role="datebox" data-options='{"mode": "datebox", "maxYear":"3000"}' placeholder="GG.AA.YYYY">
With this solution, user can't choose a year which has more than 4 digit. (You can change 3000 to another 4 digit year. Bu don't forget, if you choose for example 1999, user can't choose greater than 1999)
Hi I have this value that I passed to the gsp
${d.causalOrganism}
I have this three checkboxes and I want one of them to be checked based on the above value. How can I do so? I tried but doesn't work.
<label for="causalOrganism">Causal Organism:</label>
Fungi<input type="checkbox" value="Fungi" name="causalOrganism" id="causalOrganism1" onclick="checkOrganism(this.id)"/>
Bacteria<input type="checkbox" value="Bacteria" name="causalOrganism" id="causalOrganism2" onclick="checkOrganism(this.id)"/>
Virus<input type="checkbox" value="Virus" name="causalOrganism" id="causalOrganism3" onclick="checkOrganism(this.id)" />
Add the checked attribute to your checkbox based on your desired condition:
...
Fungi<input type="checkbox" value="Fungi" name="causalOrganism" id="causalOrganism1" onclick="checkOrganism(this.id)" ${(d.causalOrganism == 'causalOrganism1') ? "checked='checked'" : ''}/>
...
You should think about using the grails checkBox. With this you could use the checked attribute directly.
I installed calendar Version 1.2.0-SNAPSHOT in grails and working good .
But facing one Issue :
When click on cancel button i was doing form reset .but the calendar field is becoming clear and not reseting to default date .
<g:form url="${response}" id="program" name="program" method="post">
<calendar:datePicker name="startDate" id="startDate" defaultValue="${program.startDate}" dateFormat="%Y-%m-%d"/>
<input type="button" id="cancel" name="cancel" value="Cancel" onclick = 'reset_form(this)' />
</g:form>
function reset_form(this_)
{
document.getElementById('program').reset();
}
any one have idea please ?
thanks.
Two ways to solve this issue as far as I can see. Either correct the typo inside your JavaScript and refer to the correct id of your form (program not new_program) or use the standard reset button for forms <input type="reset" .../> instead of your javascript solution.