Pick-a-Date : Date Picker

The basic setup requires targetting an input element and invoking the picker.

Default

Use .pickadate class for basic Pick-A-Date Picker.

Format Date Picker

Setformat attribute for basic change format of date.

Min-Max Date Range

Use .pickadate-limits class for min. and max. date range.

Translation

Use .pickadate-translations class for language translation.

Pick-a-date with short string

Use .pickadate-short-string class for short Month & Week String.

Change First Weekday

Use .pickadate-firstday class to change first weekday to Monday.

Select Month & Year

Use .pickadate-months-year class for display select menus to pick the month & year.

Disabled Dates & Weeks

Use .pickadate-disable class for disabled dates or weeks. (such as all Sun.1th day of week and 1st and 3rd Sat.).

Inline Date Picker

Pick-a-Date : Time Picker

Default

Use .pickatime class for basic Pick-a-Time Picker.

Change Formats

Use .pickatime-format class to change time display formats.

Format with Label

Use .pickatime-formatlabel class to display time label format.

Intervals

Use .pickatime-intervals class to display time in Intervals.

Disable set of Time

Use .pickatime-disable class to disable time hours.

Minimum and maximum time range

Use .pickatime-min-max class for Start Time & End Time.

Bootstrap DateRange Picker

The Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".

Default

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 in the calendars.

Single Date Picker

The Date Range Picker can be turned into a single date picker widget with only one calendar.

24 hour Time Picker with Seconds

Use 24-hour instead of 12-hour times, removing the AM/PM selection. Show seconds in the timePicker.

Input Initially Empty

To set datepicker input default empty.

Predefined Ranges

Set predefined date ranges the user can select from.

Auto Apply Date Range

Hide the apply and cancel buttons, and automatically apply a new date range.

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.

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.

Inline Date Range Picker
today

How can we help? 😄

7:45 AM

Hey John, I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 AM

Stack admin is the responsive bootstrap 4 admin template.

8:01 AM