Date&time picker

  1. Home
  2. Pickers
  3. Date&time picker
Bootstrap CardsButtons Extended

Bootstrap DateTime Picker

Pick-A-Date Picker

Pickadate.js is a mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Use .pickadate class for basic Pick-A-Date Picker.
Use .pickadate-short-string class for short Month & Week String.
Use .pickadate-select-year class to allow user to select year.
Use .pickadate-firstday class to change first weekday to Monday.
Use .pickadate-buttons class to change/hide buttons.
Use .pickadate-limits class to give selection from range of some dates.
Use .pickadate-format class to change date display formats.
Use .pickadate-arrow class to change date display formats.
Use .pickadate-translations class for language translation.
Disable certain days of the week, such as all Saturdays (7th day of week) and Sundays (1st day of week), by passing an integer between 1 and 7
Pass an array of arbitrary dates (each formatted as [ yyyy, mm, dd ]) to disable them..
Use .pickadate-selectors class to set month & year selectable.
Use .pickadate-dropdown class to set select to month and year selection
Use .pickadate-events class to check events as the user interacts with the picker.
Use .pickadate-minmax class for language translation.
Use .pickadate-nativ class to change date display formats.

Pick-A-Time Picker

Use .pickatime class for basic Pick-A-Date Picker.
Use .pickatime-button class to hide clear button.
Use .pickatime-format class to change time display formats.
Use .pickatime-formatTime class to display time format.
Use .pickatime-formatlabel class to display time label format.
Use .pickatime-minmax class for Start Time & End Time.
Show previous 5 time limits and also shows current time Limit.
Use .pickatime-intervals class to display time in Intervals.
Disable a specific or arbitrary set of times selectable on the picker.
Using integers as hours (0 to 23)
Using objects as a range of times
Enable only a specific or arbitrary set of times by setting true as the first item in the collection
When a time is selected or the "clear" button is pressed, the picker closes.
The onSet event is the only callback that is passed a context argument that provides details as to which properties are being "set".

Bootstrap DateRange Picker

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.
The Date Range Picker can also be used to select times. Hour, minute and (optional) second dropdowns are added below the calendars. An option exists to set the increment count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.
Use 24-hour instead of 12-hour times, removing the AM/PM selection. Show seconds in the timePicker
The Date Range Picker can be turned into a single date picker widget with only one calendar. In this example, dropdowns to select a month and year have also been enabled at the top of the calendar to quickly jump to different months.
Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates or a predefined range is selected
When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
The maximum span between the selected start and end dates
Show year and month select boxes above calendars to jump to a specific month and year
Show localized week numbers at the start of each week on the calendars
Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range
Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.
Allows you to provide localized strings for buttons and labels, customize the date display format, and change the first day of week for the calendars.
Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.
Whether the picker appears below (default) or above the HTML element it's attached to.
CSS class names that will be added to all buttons in the picker.

Theme Customizer

Customize & Preview in Real Time

Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Menu Color Options
Buy Now