Controlling the default value

The calendar defaults to today if not overridden. You can however manually set a default value through the defaultSelection option.

Javascript jQuery Angular React 
html<label>
    Default
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
js$('#picker').mobiscroll().datepicker({
    controls: ['date']
});
html<label>
    Custom default
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
js$('#picker').mobiscroll().datepicker({
    controls: ['date'],
    defaultSelection: new Date(2020, 11, 24)
});
Setting values runtime

While the selected value can be changed by interacting with the calendar, you can use the setVal method to change it programmatically.

Javascript jQuery Angular React 
html<button mbsc-button id="jan">Set 02-01-2020</button>
<button mbsc-button id="today">Set today</button>
js$('#today').click(function () {
    $('#cal').mobiscroll('setVal', new Date());
    return false;
});

$('#jan').click(function () {
    $('#cal').mobiscroll('setVal', new Date(2020, 0, 2));
    return false;
});
Not all days have flights

The button API provides shortcuts to value selection and confirmation. Add 'Now' or custom button to the component or entirely remove the 'Set' button to activate auto-set, which automatically closes the dialog if a date is selected.

Javascript jQuery Angular React 
html<label>
    Now
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
jsvar nowCal = $('#picker').mobiscroll().datepicker({
    controls: ['date'],
    buttons: [{
        text: 'Now',
        handler: function () {
            nowCal.setVal(new Date());
            nowCal.close();
        }
    }, 'set', 'cancel']
}).mobiscroll('getInst');
html<label>
    Custom
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
jsvar customCal = $('#picker').mobiscroll().datepicker({
    controls: ['date'],
    buttons: [{
            text: '05 Jan 2020',
            handler: function () {
                customCal.setVal(new Date(2020, 0, 5));
                customCal.close();
            }
        },
        'set',
        'cancel'
    ]
}).mobiscroll('getInst');
html<label>
    Auto set
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
js$('#picker').mobiscroll().datepicker({
    controls: ['date'],
    buttons: [{
        text: 'Close',
        handler: 'cancel'
    }]
});
Preview in fullscreen