This date range picker component for
Bootstrap 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.
Pickadate.js is a very powerful, mobile-friendly, responsive, and lightweight jQuery date & time input picker. The basic setup requires targetting an input element and invoking the picker. Basically this plugin includes 2 main parts: date picker and time picker. Time picker examples demonstrated below.
The basic setup requires targetting an input element and invoking the picker.
Change the month and weekday labels as you find suitable.
Change the text or hide a button completely by passing a false-y value.
Display a human-friendly format and use an alternate one to submit to the server.
You can also specify the number of years to show in the dropdown using an even integer.
The first day of the week can be set to either Sunday or Monday.
Set the minimum and maximum selectable dates on the picker.
title attributes to several elements within the picker
By default, typing into the input is disabled by giving it a
select menus to pick the month and year.
The picker supports translations for 39 languages, available out of the box.
Enable dates that fall within a range of disabled dates by adding the
Fire off events as the user interacts with the picker.
Disable a specific or arbitrary set of dates selectable on the picker.
The basic setup requires targetting an
input element and invoking the picke.r
Change the text or hide the button completely by passing a
Display a human-friendly label and
input format and use an alternate one to submit.
Send the hidden value only
Sometimes the value that needs to be sent to the server is just the hidden value – and not the visible one.
Set the minimum and maximum selectable times on the picker.
Using integers as hours
Set the minimum and maximum selectable times on the picker using integers as hours.
Disable a specific or arbitrary set of times selectable on the picker
Enable times that fall within a range of disabled times by adding the
By default, text input has a
readOnly attribute to hide virtual keyboards on touch devices.
Fire off events as the user interacts with the picker
Disabling all with exeptions
Enable only a specific or arbitrary set of times by setting true as the first item in the collection.
Choose the minutes interval between each time in the list.
Basic text field specifies that the week begins with Monday.
Month and day
Month and day only picker format
Current example displays hours and minutes only. Seconds can be added via plugin
Display hours only
Current example demonstrates simple time picker with hours only in
Date and time pickers
The first field specifies that the week begins with Monday. The second field demonstrates a time picker.
Custom display format
Custom display format can be specified via plugin
Current example demonstrates custom
DD/MM/YYYY date format
In the following example,
AnyTime.Converter and jQuery work together to provide date-range selection. The value for the second ("Finish") field must be at least one day after the date in the first ("Start") field, but no more than 90 days later.
The following example shows how to create a field that initially does not have a picker, followed by a button that creates a picker for the field. This would be useful if you want to allow manual entry into the field, but it does not prevent the user from entering a value in the wrong format.