When I was using the DateBox1 I had this code to use the slidebox only for months and days:
<input name="calendarDaily" id="calendarDaily" type="date" data-role="datebox"
data-options='{"mode": "slidebox", "fieldsOrderOverride":["m","d"], "noButton": true, "centerWindow":true, "useInlineHideInput":true}' />
But with Datebox2 this options doesn't work and in this web http://dev.jtsage.com/jQM-DateBox2/demos/fullopt.html there is no reference to the options I want!
How can I with DateBox2 to do the same with the old Datebox1?
Thank you!
Check internationalization / localization section for more settings.
There's a slideFieldOrder setting, i.e. field order for slide mode, e.g. ['y', 'm', 'd']
Related
I have the following time input in my jQuery mobile app for android , I want to make a time picker for this input as the native Time picker in android devices . How can i do a time picker in jQuery mobile 1.4.0?
Please help me ...
<label for="notifTime" data-inline="true">
<input type="time" name="notifTime" id="notifTime" />
Have you tried the jQuery Mobile Datebox plugin: http://dev.jtsage.com/DateBox/?
It has a time picker mode that is good as long as you only need hours and minutes.
Here is a DEMO
<div class="ui-field-contain">
<label for="notifTime">Notification Time:</label>
<input name="notifTime" id="notifTime" type="text" data-role="datebox" data-options='{"mode":"timebox", "useNewStyle":true, "overrideTimeFormat": 12, "themeButton": "b", "themeInput": "a", "theme": "b", "themeHeader": "b"}' />
</div>
If you look at the datebox site, there are many options to play with...
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)
I am using JQuery Mobile DateBox with mode timebox as timepicker. It is working perfect. What I want is that I want the timepicket input to be readonly. It should only change the time on clicking the '+' or '-' buttons. I googled much and found solutions asking to add readonly attribute and lockinput. But nothing seems to be working. Any help would be greatly appreciated. Here is the code sample of my time picker.
<input id="service_time" class="create_formobj" value="<?php echo $date ? date('h:i A', strtotime($date)) : '' ?>" type="date" data-role="datebox"
data-options='{"mode": "timebox", "overrideTimeFormat": 12}' />
I had the same problem. What did was, I made the input field of pop up readonly. It will solve your problem
The readonly function can be add like this
$('.ui-datebox-dboxin input').attr('readonly', true);
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.
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}'>