### Date&time picker

#### Pick-A-Date Picker

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

Basic Pick-a-date
Use `.pickadate` class for basic Pick-A-Date Picker.
Pick-a-date with short string
Use `.pickadate-short-string` class for short Month & Week String.
Select Year
Use `.pickadate-select-year` class to allow user to select year.
Change First Weekday
Use `.pickadate-firstday` class to change first weekday to Monday.
Change/Hide Buttons
Use `.pickadate-buttons` class to change/hide buttons.
Date Limits
Use `.pickadate-limits` class to give selection from range of some dates.
Change Formats
Use `.pickadate-format` class to change date display formats.
Change Arrows
Use `.pickadate-arrow` class to change date display formats.
Picker Translation
Use `.pickadate-translations` class for language translation.
Disable days of the week
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
Disable arbitrary dates
Pass an array of arbitrary dates (each formatted as [ yyyy, mm, dd ]) to disable them..
Month & Year Selectors
Use `.pickadate-selectors` class to set month & year selectable.
Month & Year Dropdown
Use `.pickadate-dropdown` class to set `select` to month and year selection
Picker Events
Use `.pickadate-events` class to check events as the user interacts with the picker.
Minimum and maximum date range
Use `.pickadate-minmax` class for language translation.
Disable picker for native calendar
Use `.pickadate-nativ` class to change date display formats.

#### Pick-A-Time Picker

Basic Pick-a-time
Use `.pickatime` class for basic Pick-A-Date Picker.
Clear Button
Use `.pickatime-button` class to hide clear button.
Change Formats
Use `.pickatime-format` class to change time display formats.
Format Time Display
Use `.pickatime-formatTime` class to display time format.
Format with Label
Use `.pickatime-formatlabel` class to display time label format.
Minimum and maximum time range
Use `.pickatime-minmax` class for Start Time & End Time.
From Current Time Limit
Show previous 5 time limits and also shows current time Limit.
Intervals
Use `.pickatime-intervals` class to display time in Intervals.
Disable set of Time
Disable a specific or arbitrary set of times selectable on the picker.
Disable set of time using Integers
Using integers as hours (0 to 23)
Disable set of time using Object
Using objects as a range of times
Disable All with exceptions
Enable only a specific or arbitrary set of times by setting true as the first item in the collection
Close on a user action
When a time is selected or the "clear" button is pressed, the picker closes.
Picker Events
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

Basic Date Range 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.
Date and Time
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.
24 hour Time Picker with Seconds
Use 24-hour instead of 12-hour times, removing the AM/PM selection. Show seconds in the timePicker
Single Date Picker
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.
Auto Apply Date Range
Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates or a predefined range is selected
Not Linked Calendars
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.
Not Linked Calendars
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.
Date Limit
The maximum span between the selected start and end dates
Show Dropdowns
Show year and month select boxes above calendars to jump to a specific month and year
Show Week Numbers
Show localized week numbers at the start of each week on the calendars
Predefined Ranges
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
Always Show Calendar
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.
Localization
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.
Picker Alignment
Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.
Open Picker on top
Whether the picker appears below (default) or above the HTML element it's attached to.
Button Class Options
CSS class names that will be added to all buttons in the picker.

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now