Date Picker

Time Picker

Date Time Picker

Events

Min Date set

Default Date Picker

Use data-provide="datepicker" for default date picker

Date Picker With Input Group

Use data-provide="datepicker" with input group element.

Date Picker With Start And End Date

you have to set startDate and endDate property to activate it.

Date Picker Inline

You also can set the datepicker to be inline and flat.

Date Picker With Disabled Date

Use daysOfWeekDisabled property to disabled date.

Date Range

Set name="start" and name="end" for date range.

Date Range Disabled

Just add disabled in input type

Inline

You also can set the datetimepicker to be inline and flat.

Default input

One of the simpliest implementation is the component.

Advanced

A reset button can be activated to reset the content of the field. The button today has been activated too the fill the input field with the current datetime. The minuteStep property can be used to specify the gap between each preset on the hour view.

Meridian Format

To select the date using the meridian, you can activate the showMeridian flag and display P to view the AM/PM selector in the input field. The HH format will display the hours in 12-format instead of 24-format hour.

Default Timepicker

Default timepicker without seconds

Timepicker With Seconds

You can use time picker with seconds enabled.

24hr Timepicker

Alternatively you can set time picker with 24hr mode.

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 Range With Time

The Date Range Picker can also be used to select times. Hour, minute and (optional) second.

Predefined Ranges

This example shows the option to predefine date ranges that the user can choose from a list.

Default

To activate just add class .clockpicker.

Auto Close

Just add data-autoclose="true" for it.

Input

Attached to input element.

Component

Attached to readonly input with appended button.

Inline

Attached to div element.