DatePicker set date to previous day when changing from date time to date only

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.

AllDayOff AllDayOn

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>

Hi @Julien,

Thanks for the code! I was able to reproduce the issue with it. :+1:

It looks like this is an issue on our end. I’ve passed this problem on to the dev team.

May I ask for some context around the exclusiveEndDates usage? Were you dealing with dates that have midnight values or are you using multiple timezones?

Hi,

My application is working on a single timezone but it has to deal with hourly rendez-vous and rendez-vous accross several days.

Hello @Szili,

One more thing on this sample, if you click the End date to change it, the datetime display will open on start date.

Is there an option to set it on end date ?

Thanks

Hi Julien,

You can use the setActiveDate method for that.

1 Like