Date Validation

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 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.

The passed date-times can also contain timezone data which requires a timezonePlugin to be interpreted correctly.

Using date-times across different timezones?  Learn more about timezone support →
Download and try example

Demo

Allow disabled dates inside ranges
Only start and end dates can't be invalids
Allow end date selection on disabled dates
Be able to select a disabled date for the range end
(useful for accommodation booking)
Do you want to
?
Disable exact dates
Disable recurring dates
Disable one or more date ranges
Preview in fullscreen
Javascript jQuery Angular React Vue 
jsmobiscroll.datepicker('#datepicker', {
    controls: ['calendar'],
    select: 'range',
    inRangeInvalid: true,
    rangeEndInvalid: false,
    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.