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.
Related
I am looking to implement a duration which can capture input in HH:MM format. The mat-datepicker can be option but limitation will be it will allow to capture time within 24 hours, But the input field should also be able to capture input like 32:45 which is 34hrs and 45mins.
I am not sure if we can achieve with datetime picker. Capturing with mat-input field alone will also be a great.
<mat-form-field>
<mat-label>Enter the Duration</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
I have designed a Directive for the DurationPicker which can be applied to the Mat-input field
Demo in the below link
https://stackblitz.com/edit/angular-lyajg3?file=src%2Fapp%2Fmy-duration-picker-directive.ts
My input control is rendered as:
<input class="form-control datepicker" id="elements_3__Value" name="elements[3].Value" type="date" value="" data-val="true" data-val-required="D.O.B is Required." data-val-range="D.O.B can only be between 1/01/2017 and 2/01/2017." data-val-range-min="1/01/2017" data-val-range-max="2/01/2017">.
The scripts that are loaded on the page are: jquery-1.10.2.js, bootstrap.js, bootstrap-datepicker.js,respond.js, jquery.validate.js, jquery.validate.unobtrusive.js
Date range & date selected in textbox are in MM/dd/yyyy fromats.
Now my selected date is "01/12/2017" i.e. 12 jan 2017 but still validation shows me error as:
Please help me to solve this problem.
Thanks in advance.
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")
Is there a way of changing the mode of a input type time in jquery mobile?
I use Jquery mobile 1.4.2
Here is the code:
<label for="time">Time:</label>
<input type="time" data-theme="a" data-clear-btn="true" name="time" id="time" value="">
But as default the input field is in am/pm mode so the behavior in a mobile device it is also in am/pm mode. In Germany we use 24h mode so I want to change the mode if possible. How can I change the mode?
I found the input type="time" here:
http://demos.jquerymobile.com/1.4.2/textinput/
Check this fiddle.It shows 24 hour date format.By default there is no date and time in jquery mobile. So you need to add external plugins.
FIDDLE OUTPUT
Your HTML input is like
<input name="mytime" id="mytime" type="time" data-role="datebox" data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": 24}'/>
download the date picker here.
Datepicker download link
Note: If you want to show the time in 24 hr format in input field you need to customize the JQM datepicker plugin. Like in JQM-datebox-core.js you need to set the timeFormat : 24,.
EDIT: In JQM 1.4.2 the document Document link says they are using third party plugin. They referred two plugins one is JQUERY UI and another one is arschmitz JQUERY MOBILE DATEPICKER . In the above example i use that is jquery mobile datepicker same as like second plugin.
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}'>