I want a jquery mobile Datepicker that will allw only date and month selection not year
I am using the below plugin given on link
Visit http://demos.jquerymobile.com/1.0a4.1/experiments/ui-datepicker/
can anybody help me out to format it accoring to my need
I would use DateBox ( http://dev.jtsage.com/jQM-DateBox/ ) which has many options for customization. To setup a month and day only picker, you can use either the 'datebox' or 'flipbox' modes:
<input name="Date1" id="Date1" type="date" data-role="datebox" data-options='{"mode":"datebox", "overrideHeaderFormat": "%B - %d", "overrideDateFormat": "%B - %d", "overrideDateFieldOrder": ["m", "d"]}'}'' />
<input name="Date2" id="Date2" type="date" data-role="datebox" data-options='{"mode":"flipbox", "overrideHeaderFormat": "%B - %d", "overrideDateFormat": "%B - %d", "overrideDateFieldOrder": ["m", "d"]}'}'' />
You use the override formats to present month and day. %b is the 3 letter abbreviation for month, %B is full month name. If you prefer a number, use %m.
Here is a DEMO
For more info on DateBox, see the many Demos at the site
Related
I am developing an application for Human resources, in my application I used mat-calendar for dates, some of my users want to type the date directly in mat-calendar without using the click event to choose the year and month and day. I wonder if there is a method to use the two approaches
click one (click on year and month and day)
type the date directly like 23/11/2020 by example
thanks a lot for your help
<!-- date birth -->
<mat-form-field>
<input
matInput
required
name="dateBirth"
ngModel
placeholder="Date Birth"
[matDatepicker]="dateBirthCal"
>
<mat-datepicker-toggle
matSuffix
[for]="dateBirthCal"
></mat-datepicker-toggle>
<mat-datepicker #dateBirthCal></mat-datepicker>
</mat-form-field>
<!-- ************* fin date Birth *************-->
My JVM is running in US/Pacific Timezone but the client accesses the application from India;
for the first time Struts jQuery datepicker tag is loaded into browser with the default value of time as per JVM timezone.
I want it to be in clients timezone.
Can it be done in datepicker anyhow ?
<sj:datepicker theme="simple"
name="taskDate"
value="today"
timepicker="true"
timepickerFormat="hh:mm:ss"
buttonImageOnly="true"
style="width: 70px;"
label="Task Date"
key="taskDate"
displayFormat="ddMyy" />
I've tried using Joda Time, but seems its not compatible with value in datepicker, when I use it loads blank value.
The date picker should not know about time zones, and simply use the time value you give it. Unless you of course include the time zone offset in the time specification you give it. toString() will by default include a timezone, so that will not work.
But this should:
<sj:datepicker theme="simple"
name="taskDate"
value="2015-05-26 11:00"
timepicker="true"
timepickerFormat="hh:mm:ss"
buttonImageOnly="true"
style="width: 70px;"
label="Task Date"
key="taskDate"
displayFormat="ddMyy" />
To get a format without timezone, use something like:
%{new DateTime().strftime("%Y-%m-%d %H:%M")
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)
In the HTML5 date input type, Chrome will not put in a default date. The field is rendered empty. Other browsers will have the date, but Chrome has a default date selector that may be causing some of the issues. Any ideas?
<input type="date" class="input-xlarge" id="date" name="date"
pattern="(0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" value="#Model.Date.ToString("MM/dd/yyyy")" required />
HTML5 date value format is yyyy-MM-dd, not MM/dd/yyyy.
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}'>