Touch & Desktop Layout

Use the calendar for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.

Use the date picker on an existing form field, custom input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

Handle different screen sizes by setting it up responsively  Check out the responsive demo →
Download and try example

Demo

Javascript jQuery Angular React Vue 
html<input id="input-picker" />
jsmobiscroll.datepicker('#input-picker', {
    controls: ['calendar'],
    touchUi: 
});
html<input id="button-picker" />
<button id="show-picker">Show picker</button>
jsmobiscroll.datepicker('#button-picker', {
    controls: ['calendar'],
    touchUi: ,
    showOnClick: false,
    showOnFocus: false
});

document
    .getElementById('show-picker')
    .addEventListener('click', function () {
        instance.open();
        return false;
    });
html<label>
    <input id="mobi-picker" mbsc-input />
</label>
jsmobiscroll.datepicker('#mobi-picker', {
    controls: ['calendar'],
    touchUi: 
});
html<div id="inline-picker"></div>
jsmobiscroll.datepicker('#inline-picker', {
    controls: ['calendar'],
    display: 'inline',
    touchUi: 
});
Use the picker with any inputs & show on focus/click
Disable onClick/onFocus and only show on button
Use the picker with a Mobiscroll input
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.