Pickers - Date & Time
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.
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.
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.
The Any+Time™ JavaScript Library includes a highly-customizable, jQuery-compatible datepicker/ timepicker (calendar/ clock widget) and a powerful Date/String parse/format utility. Anytime allows you to create a date/time picker with advanced features and options not found in other calendar/clock widgets, also to format dates and times in different ways.
Basic usage
Basic text field specifies that the week begins with Monday.
Month and day
Month and day only picker format
Time picker
Current example displays hours and minutes only. Seconds can be added via plugin options.
Display hours only
Current example demonstrates simple time picker with hours only in AM/PM format.
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 options
Numeric date
Current example demonstrates custom DD/MM/YYYY date format
Date range
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.
On-Demand Picker
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.
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
Default functionality
The datepicker is tied to a standard form input field
Dates in other months
The datepicker can show dates that come from other than the main month being displayed.
Button bar
Display a button for selecting Today's date and a Done button for closing the calendar.
Month & year menu
Show month and year dropdowns in place of the static month/year header.
Show week number
The datepicker can show the week of the year. The default calculation follows the ISO 8601 definition.
Format date
Display date feedback in a variety of ways.
Icon trigger
Click the icon next to the input field to show the datepicker.
Populate alternate field
Populate an alternate field with its own date format using the altField and altFormat options.
Restrict date range
Restrict the range of selectable dates with the minDate and maxDate options.
Multiple months
Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.
Date range
Select the date range to search for.
Datepicker animations
Use different animations when opening or closing the datepicker.