When using the DatePicker with the exclusiveEndDates
set to true
, if you switch the current values from DateTime to Date only, the end date is set to a day back as you can see on the picture.
Here is a small repro with version 5.16.2 (the bug was present in 5.16.0)
<html>
<head>
<link rel="stylesheet" href="mobiscroll.min.css" />
<script src="mobiscroll.javascript.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<div id="event-popup" class="mbsc-cloak">
<div class="mbsc-form-group">
<label>
<input mbsc-switch data-label="All day" id="event-all-day" type="checkbox"/>
</label>
<label>
Start
<input mbsc-input id="start-input"/>
</label>
<label>
End
<input mbsc-input id="end-input"/>
</label>
<div id="event-date"></div>
</div>
</div>
<script>
var actualEvent;
const allDaySwitch = document.getElementById('event-all-day');
allDaySwitch.addEventListener('change', function () {
const checked = allDaySwitch.checked
range.setOptions({
controls: checked ? ['calendar'] : ['calendar', 'time'],
});
});
const popup = mobiscroll.popup('#event-popup');
const range = mobiscroll.datepicker('#event-date', {
select: 'range',
controls: ['calendar', 'time'],
startInput: '#start-input',
endInput: '#end-input',
exclusiveEndDates: true,
stepMinute: 5,
touchUi: true,
onChange: function (args) {
const date = args.value;
actualEvent.start = date[0];
actualEvent.end = date[1];
}
});
const options = {
view: {
schedule: {
type: 'week',
allDay: true,
}
},
dragToCreate: true,
onEventCreated: function (args) {
actualEvent = args.event;
range.setVal([actualEvent.start, actualEvent.end]);
popup.open();
},
}
mobiscroll.eventcalendar('#calendar', options);
</script>
</body>
</html>