Range Picker for Event Creation

html<label>
    <input mbsc-input data-label="Title" type="text" placeholder="Name of the event" />
</label>
<label>
    <input mbsc-input data-label="Location" type="text" placeholder="Where will it be?" />
</label>
<label>
    <input id="allday" data-label="All day" type="checkbox" mbsc-switch />
</label>
<div id="range"></div>
<label>
    <input id="start" mbsc-input data-label="Start" placeholder="Event start" />
</label>
<label>
    <input id="end" mbsc-input data-label="End" placeholder="Event end" />
</label>
<label>
    <input type="radio" mbsc-segmented data-label="Show as busy" name="static-adding-event" value="busy" checked>
</label>
<label>
    <input type="radio" mbsc-segmented data-label="Show as free" name="static-adding-event" value="free">
</label>
<label>
    <textarea mbsc-textarea data-label="Notes" placeholder="Enter notes, URL, comments"></textarea>
</label>

jsvar myRange = mobiscroll.datepicker('#range', { 
    controls: ['datetime'],
    select: 'range',
    startInput: '#start',
    endInput: '#end',
});

document.querySelector('#allday')
    .addEventListener('change', function () {
         var control = this.checked ? 'date' : 'datetime';
        myRange.setOptions({
            controls: [control]
        });
    });