Date Formats
The date & time picker works with different date types:
- JS date object - a common way of passing a date is through a Date object:
new Date(1995, 11, 17, 15, 24)(make sure to not simply pass a date string tonew Date()) - ISO date string - standardized way of passing dates:
'2008-09-15T15:53:00'(make sure to pass it as a string) - Moment.js object - a great solution that solves common date management difficulties:
moment([2018, 3, 27, 12, 15])(make sure to have moment.js loaded)
When passing dates to the component - eg. invalids, min/max - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.
Demo
JS date object
$('#cal').mobiscroll().datepicker({
returnFormat: 'jsdate'
});
$('#cal').mobiscroll('setVal', new Date(2020, 10, 15, 10, 45));
$('#cal').mobiscroll('getVal'); // returns the selected date
ISO date string
$('#cal').mobiscroll().datepicker({
returnFormat: 'iso8601'
});
$('#cal').mobiscroll('setVal', '2020-05-20T12:30:00'));
$('#cal').mobiscroll('getVal'); // returns the selected date
Moment.js object
$('#cal').mobiscroll().datepicker({
returnFormat: 'moment'
});
$('#cal').mobiscroll('setVal', moment([2020, 2, 6, 15, 30]));
$('#cal').mobiscroll('getVal'); // returns the selected date
JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
var dateInstance = $('#demo-date')
.mobiscroll()
.datepicker({
controls: ['calendar'],
onChange: function (event, inst) {
updateValue('returnVal', inst);
},
})
.mobiscroll('getInst');
var isoInstance = $('#demo-iso')
.mobiscroll()
.datepicker({
controls: ['calendar'],
returnFormat: 'iso8601',
onChange: function (event, inst) {
updateValue('returnISO', inst);
},
})
.mobiscroll('getInst');
var momentInstance = $('#demo-moment')
.mobiscroll()
.datepicker({
controls: ['calendar'],
returnFormat: 'moment',
onChange: function (event, inst) {
updateValue('returnMoment', inst);
},
})
.mobiscroll('getInst');
$('#setDate').click(function () {
$('#demo-date').mobiscroll('setVal', new Date(2020, 10, 15, 10, 45), true);
updateValue('returnVal', dateInstance);
});
$('#setISO').click(function () {
$('#demo-iso').mobiscroll('setVal', '2020-05-20T12:30:00', true);
updateValue('returnISO', isoInstance);
});
$('#setMoment').click(function () {
// Make sure that moment js is loaded
$('#demo-moment').mobiscroll('setVal', moment([2020, 2, 6, 15, 30]), true);
updateValue('returnMoment', momentInstance);
});
function updateValue(id, inst) {
setTimeout(function () {
if (id == 'returnMoment') {
document.getElementById(id).innerHTML = inst.getVal().format();
} else {
document.getElementById(id).innerHTML = inst.getVal();
}
});
}
});
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Working with Js Date Objects</div>
<div class="mbsc-button-group-block">
<button mbsc-button id="setDate">Set: Sun Nov 15 2020 10:45:00 GMT</button>
</div>
<label>
Date object
<input mbsc-input id="demo-date" />
</label>
</div>
<div class="mbsc-padding">
Return value: <text id="returnVal"></text>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Working with Date strings</div>
<div class="mbsc-button-group-block">
<button mbsc-button id="setISO">Set: 2020-05-20T12:30:00</button>
</div>
<label>
ISO string
<input mbsc-input id="demo-iso" />
</label>
</div>
<div class="mbsc-padding">
Return value: <text id="returnISO"></text>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Working with Moment JS Objects</div>
<div class="mbsc-button-group-block">
<button mbsc-button id="setMoment">Set: 2020-03-06T15:30:00+02:00</button>
</div>
<label>
Moment JS
<input mbsc-input id="demo-moment" />
</label>
</div>
<div class="mbsc-padding">
Return value: <text id="returnMoment"></text>
</div>