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('#cal', {
returnFormat: 'jsdate'
});
cal.setVal(new Date(2020, 10, 15, 10, 45));
cal.getVal(); // returns the selected date
ISO date string
cal = mobiscroll.datepicker('#cal', {
returnFormat: 'iso8601'
});
cal.setVal('2020-05-20T12:30:00');
cal.getVal(); // returns the selected date
Moment.js object
cal = mobiscroll.datepicker('#cal', {
returnFormat: 'moment'
});
cal.setVal(moment([2020, 2, 6, 15, 30]));
cal.getVal(); // returns the selected date
JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var dateInstance = mobiscroll.datepicker('#demo-date', {
controls: ['calendar'],
onChange: function (event, inst) {
updateValue('returnVal', inst);
},
});
var isoInstance = mobiscroll.datepicker('#demo-iso', {
controls: ['calendar'],
returnFormat: 'iso8601',
onChange: function (event, inst) {
updateValue('returnISO', inst);
},
});
var momentInstance = mobiscroll.datepicker('#demo-moment', {
returnFormat: 'moment',
onChange: function (event, inst) {
updateValue('returnMoment', inst);
},
});
document.getElementById('setDate').addEventListener(
'click',
function () {
dateInstance.setVal(new Date(2020, 10, 15, 10, 45), true);
updateValue('returnVal', dateInstance);
},
false,
);
document.getElementById('setISO').addEventListener(
'click',
function () {
isoInstance.setVal('2020-05-20T12:30:00', true);
updateValue('returnISO', isoInstance);
},
false,
);
document.getElementById('setMoment').addEventListener(
'click',
function () {
// Make sure that moment js is loaded
momentInstance.setVal(moment([2020, 2, 6, 15, 30]), true);
updateValue('returnMoment', momentInstance);
},
false,
);
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>