All Collections
Training and guides
Date & Time
Making sure the user selects the right value
Making sure the user selects the right value
Levi Kovacs avatar
Written by Levi Kovacs
Updated over a week ago

You can improve the user experience and reduce errors by making certain dates unavailable for selection.

Minimum and maximum

Use the minimum and maximum days and time to control the two ends and reduce the available options. Let’s say you are collecting a date of birth and people have to be 13 years or older. You can simply add a max date of today - 13 years.

The min and max work with date objects, no matter if you are applying it for dates, times or both.

JS

var now = new Date();
    maxDate = new Date(now.getFullYear() - 13, 11, 31);

mobiscroll.date("#date",{
    max: maxDate
});

Invalids

Setting invalids helps in reducing errors. Let’s take the example of opening hours. Limit it from 9 to 5 and Monday to Friday. You can invalidate exact dates and even recurring days. 

JS

mobiscroll.datetime("#datetime",{
    invalid: [
        'w6','w0',
        { start: '00:00', end: '09:00' },
        { start: '17:00', end: '23:59' },
    ],
    dateWheels: '|D M d|'
});

TIP: For all the ways on how you can pass invalids check out the API docs.

What's next?

Did this answer your question?