Disabled values

Enforcing validation is essential to a great UX. First make sure to have the min & max values right and then work your way through disabled values.

Depending on your situation, you have two options:

  • Set invalid - set the invalids through the invalid option.
  • Set valid - set the valids through the valid option.

Both the invalid and valid options support the following:

  • Exact dates - Passing exact values like: '2020-05-20' will disable/enable the specific day
  • Date ranges - Passing start and end value pairs will disable/enable specific days and/or times that fall into that range
  • Recurring dates - Passing recurrence rules as objects or in RRULE string format will be parsed. For more information on recurrence check out the rule generator

Exact dates and the start/end pairs can be passed as JS date objects, ISO date strings or Moment.js objects. Having invalids set up correctly not just enhances the UX, but improves performance.

Download and try example

Demo

Do you want to
?
Disable exact dates
Disable recurring dates
Disable one or more date ranges
Disable exact times
Disable time ranges
Disable exact times
Disable time ranges
Disable exact times
Disable time ranges
Preview in fullscreen
Javascript jQuery Angular React Vue 
jsmobiscroll.datepicker('#mydatepicker', {
    controls: ['date'],
    invalid: [],
    valid: []
});

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.