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.