jquery mobile databox plugin how to set the time - jquery-mobile

I am using the following to set the date of the datebox plugin
<input data-id="ti_datebox" type="date" data-role="datebox" data-options='{"useInline":true, "noSetButton":true}'>
$ti_datebox.trigger('datebox', {'method':'set', 'value': theDateStr, 'date':theDate})
However, I can't set the time with the same code.
<input data-id="ti_datebox" type="date" data-role="datebox" data-options='{"useInline":true, "noSetButton":true, "mode": "timebox"}'>
$ti_datebox.trigger('datebox', {'method':'set', 'value': theDateStr, 'date':theDate});
Ideally, I'd like to set the time based on some string values and not an actual date object.
Is this possible? If not, how can I set the time?
Any help much appreciated.

It's actually easier than you are making it - DateBox has a 'set' method as well, that takes a string as a value (in the same format as it outputs as it happens). There is no need to send it a date object as well - it will handle creating that.
So, you would:
// For 12hr clock
$('datebox element').trigger('datebox', {'method':'set', 'value':'08:00 AM'});
// For 24hr clock
$('datebox element').trigger('datebox', {'method':'set', 'value':'08:00'});
A working example is here:
http://jsfiddle.net/jtsage/AbVqh/1/
fwiw, if you for some reason need more control, all the set method actually does is change the value in the input box, and call the "refresh" method - which re-reads the input.

I think you are looking for this:
$('input[data-id="ti_datebox"]').trigger('datebox', {'method':'set','value':"08:00"});
Let me know if that helps.

Here is the example for the demo site
http://dev.jtsage.com/jQM-DateBox/demos/time/
http://dev.jtsage.com/jQM-DateBox/demos/api/events.html
Time Default
<label for="mydate">Some Time</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "timebox"}'>
12 Hour Clock Mode
<label for="mydate">Some Time</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "timebox", "timeFormatOverride": 12}'>

Related

ngModel is not working with value attribute in ngx-material-timepicker with input in Angular7?

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>

grails: select like numeric up down

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"/>

How to prevent a user from entering more than 4 digit in year area

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)

jquery mobile - datebox appears too much on the left

I'm using jQuery 1.7.2 and jqm-datebox 'stable'.
Code:
<label class="ui-input-text ui-hidden-accessible" for="date">Date</label>
<input jql id="date" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" type="text" value="" name="date" data-role="datebox" data-options='{"mode": "calbox", "calStartDay": 1}'></input>
When I click on the little icon, though, the calendar box appears too much to the left, as in picture. This is particularly evident on a mobile device.
If I reduce the width of the window it goes even further left.
The element.style (especially the left attribute) appears to be calculated on the fly, depending on the width, but I can't manage to find where, neither in the css, nor in the js.
I saw this question, kinda similar to mine, but I don't find it applicable to my case.
How should I go to make the box show in its entirety?
From the docs:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode":"calbox", "centerHoriz": true}'>
The centerHoriz option will get you what you want.

grails calendar reset

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.

Resources