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 = $('#range').mobiscroll().datepicker({
    controls: ['datetime'],
    select: 'range',
    startInput: '#start',
    endInput: '#end',
}).mobiscroll('getInst');

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