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.
