Date Picker

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

Use daysOfWeekDisabled property to disabled date.

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

Just add disabled in input type

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

One of the simpliest implementation is the component.

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.

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 without seconds

You can use time picker with seconds enabled.

Alternatively you can set time picker with 24hr mode.

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.

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

To activate just add class .clockpicker.

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

Attached to input element.

Attached to readonly input with appended button.

Attached to div element.