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

Hello @Szili,

Just to let you know that the bug is still present in 5.17.1.

Hello @Julien :wave:

That’s right, because this issue was not fixed in 5.17.1.
It will be in the upcoming version.

Ok thanks for the follow up.

Hello @Julien :wave:

Good news: we have shipped Mobiscroll 5.17.2, where we fixed this issue.

Here you can find a guide of how you can update the Mobiscroll version to the latest: Update guide on the latest version of Mobiscroll for plain JS, jQuery, Angular, Ionic and React.