Daterange picker
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.
Pick-a-Date picker
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.
Basic options
The basic setup requires targetting an input element and invoking the picker.
Strings
Change the month and weekday labels as you find suitable.
Buttons
Change the text or hide a button completely by passing a false-y value.
Formats
Display a human-friendly format and use an alternate one to submit to the server.
Year selector
You can also specify the number of years to show in the dropdown using an even integer.
First weekday
The first day of the week can be set to either Sunday or Monday.
Date limits
Set the minimum and maximum selectable dates on the picker.
Accessibility labels
Change the title
attributes to several elements within the picker
Editable input
By default, typing into the input is disabled by giving it a readOnly
attribute.
Dropdown selectors
Display select
menus to pick the month and year.
Translations
The picker supports translations for 39 languages, available out of the box.
Disable ranges
Enable dates that fall within a range of disabled dates by adding the inverted
parameter.
Events
Fire off events as the user interacts with the picker.
Disable dates
Disable a specific or arbitrary set of dates selectable on the picker.
Pick-a-Time time picker
Basic options
The basic setup requires targetting an input
element and invoking the picke.r
Clear button
Change the text or hide the button completely by passing a false-y
value.
Timepicker formats
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.
Time limits
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 times
Disable a specific or arbitrary set of times selectable on the picker
Disabling ranges
Enable times that fall within a range of disabled times by adding the inverted
parameter.
Editable input
By default, text input has a readOnly
attribute to hide virtual keyboards on touch devices.
Timepicker events
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.
Timepicker intervals
Choose the minutes interval between each time in the list.