Daterange picker
This date range picker component creates a dropdown menu from which a user can select a range of dates. If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, a time picker, and predefined date ranges.
Daterange picker with minimum configuration. You can customize it and limit the selectable date range, localize strings and date formats, show a single date picker mode, a time picker, and predefined date ranges.
By default, date picker displays only day grid with day names. You can optionally display localized week numbers at the start of each week on the calendars. To do that, set showWeekNumbers to true.
In addition to days and weeks, you can also show 2 select boxes with time range. To show them, set timePicker option to true. Also use timePickerIncrement to change minutes increment and timePicker24Hour to change time format.
Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen. Just set singleDatePicker to true.
Another example of basic range picker, but attached to a regular input field to demonstrate flexibility of configuration. You can attach it to any element: button or inline text, input field or heading. No extra config requred.
Use 3 options to customize action buttons: buttonClasses to change classes in both apply and cancel buttons, applyButtonClasses to update classes in Apply button and cancelButtonClasses to update classes in Cancel button.
Default alignment of date picker if left. Use opens option with 'left'/'right'/'center' values to change the alignment to right or center relalatively to the HTML element it's attached to. In RTL direction alignment is mirrored.
Daterange picker doesn't allow you to quickly jump to specific year or month by default. Set showDropdowns option to true to display 2 select boxes with a list of years and months in the header area.
As mentioned yearlier, minutes selection list is displayed with 30 minutes increment. You can modify this value with timePickerIncrement option. This example demonstrates 10 minutes increment.
Combination of daterange picker's locale and ranges options allow you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars.
Daterange picker can also have pre-defined date ranges displayed as a list of ranges in menu format and an ability to select a custom range. Calendars are hidden by default and shown only when custom range is selected.
The following example demonstrates daterange picker attached to the button. The logic is similar to input field, but selected date range is appended to <span> element inside the button, to avoid overriding of other child elements.
Date picker
Date picker is a remake of widely used Bootstrap Datepicker written from scratch using vanilla JS to reproduce similar usability. Works in 3 modes: dropdown, inline and range. Also supports keyboard operations, localization, customization via SCSS/CSS and is dependency free. This specific version includes a few additions, custom design and re-uses Bootstrap classes for seamless integration with Bootstrap framework.
By default, Datepicker object is attached to an <input> element that is configured as a regular date picker displayed in dropdown. Aside from a couple of exceptions, config options can be updated dynamically using the setOptions() method.
Date picker remains opened when date is selected and can be closed with pressing Esc key or clicking outside. If autoHide option is set to true, picker gets hidden immediately after a date is selected.
If calendarWeeks option is set to true, week numbers will be displayed in the first column of days grid. Week numbers use ISO week-numbering year, which has 52 or 53 full weeks. That is 364 or 371 days instead of the usual 365 or 366 days.
Depending on specific use case, date picker can have a clear button that allows you to clear selected date in both input field and date picker itself. To show clear button, set clearBtn option to true in date picker configuration.
Today button allows you to quickly jump to today's date if you navigate away. It's displayed below the days grid on the same line with Clear button and is hidden by default. Set todayBtn option to true to enable it.
Date picker can have certain week days disabled. That's especially useful when you need to prevent users from selecting weekend days for instance. Use daysOfWeekDisabled option with an array of day numbers starting from 0 (Sunday).
Date picker can also have specific dates disabled. Useful when you need to disable public holidays or days with no available time slots. Supports array of date strings, date objects, time values or mix of those. Bear in mind date formatting.
Date picker can also have week days highlighted with different color. Although you can highlight up to 6 days, they all can have only 1 general style. Use daysOfWeekHighlighted option with an array of numbers starting from 0 (Sunday).
Date range picker is essentially a wrapper/controller of 2 date pickers, which cannot be attached to elements that contain less than 2 <input> elements. Range picker supports almost all options from regular date picker and are applied to its start- and end-date pickers.
Date format can be easily changed in format config option. It must be declared using the combination of the predefined tokens and separators. Alternatively to format string you can use object that contains custom parser and formatter functions.
Regular date picker can be easily turned into multiple date picker with maxNumberOfDates option. Default value is 1, no limit is applied if 0 is set. Additionally use dateDelimiter option to change dates separator in the input field.
By default, date picker doesn't have minimum limit of selectable date and is infinite. To set minimum date that user can select, use minDate config option. You can use String, Date or Number date types.
By default, date picker doesn't have maximum limit of selectable date and is infinite. To set maximum date that user can select, use maxDate config option. You can use String, Date or Number date types.
The level that the date picker allows to pick. Default value of pickLevel option is 0, which corresponds to date. You can also use 1 to set month and 2 to set year. This example allows you to pick only a month and a year.
The view displayed when the date picker opens. Default view can be changed with startView option, where allowed values are 0 (days, default), 1 (months), 2 (years) and 3 (decades). In this example start view is set to years.
Date picker can have a title shown in the date picker's title bar above month/year toolbar, use a string in title option to add it. Title bar is not displayed if the title is empty, this is a default behaviour.
Default start day of the week is Sunday, but this differs per country. You can change it to Monday by setting weekStart option value to 6. The count starts from 0 (Sunday) to 6 (Saturday).
When allowOneSidedRange option is false, if the user selects a date on one side while the other side is blank, the date range picker complements the blank side with the same date as the selected side. The same is applied to the other side automatically.
