Use the scroller components for separate date and time selection or a combined view for picking both. Render a mobile friendly scroller on touchscreens and a dropdown optimized for interaction on desktop with a cursor.
See the date picker in actionUse the calendar view for picking one or more dates and even full weeks. Show the number of days selected, set min and max selectable values.
See the calendar in actionUse the range picker to select a start and end date for setting a period of date and time. Switch between the scroller, dropdown and calendar views depending on the platform and your needs.
See the range in actionShowing multiple months at once makes sense for certain use-cases. Specify the number of months or rely on auto-sizing and display as many as fit.
Check out the multi month view in actionData validation is important. Reduce user errors and disable specific dates, times, ranges and set minimum and maximum values to make picking values quick and reliable.
Take a look at how to restrict selectionMark days in the calendar with dots, icons, labels or change their background color. Days carry a lot of valuable information, use these marks to your advantage and help users make sense of what they are seeing.
See marked/colored/labels eventsRender the components inline on pages or display them in modals with center, bottom, top and contextual bubble positioning. Fullscreen display is available as well.
Use the collection of form components for creating great looking forms. Shipping with a variation of inputs, text areas, checkboxes, radio buttons, switches and more.
Don’t need to show a full month? Configure a week view to save space and only display one, two or as many weeks as necessary.
Show localized date and time formats in the pickers and calendars. Localization includes micro-copy for buttons & dialogs as well.
Make the event calendar truly feel like a part of your application. Use the available themes and fine-tune it to your needs with the Theme Builder and Sass.
Support RTL without headaches. No need to build special logic to support Right-to-Left languages. Keyboard support, screenreader and WAI-ARIA support is built in.
Fine-tune and optimize package size by including only what you need. Using the calendar for picking start and end dates? - don’t include the scrollers.
We offer two types of licenses, one for internal projects and another for multi-customer products including cloud-SaaS, PaaS, on-premise, white-label products.
Internal project licenses come with the first year of maintenance included. The maintenance agreement can be renewed on a yearly basis and cover minor & major versions, bug fixes, technical support, NPM and CI/CD access.
Date & time picker with Calendar for single, multiple and start-end selection
