Date and time pickers

  1. Forms
  2. Form Elements
  3. Date and time pickers

Calendar date

Select a date and display it in a friendly format.

The second field stores a standard date while showing a friendly label. 
<input type="text" class="form-control" id="date"
       placeholder="Choose a date">
<input type="text" class="form-control" id="humanfrienndlydate"
       placeholder="Choose a date">

Date interval

Select a range or review dates by calendar week.

Use a date range for reports and week numbers for planning. 
<input type="text" class="form-control" id="daterange"
       placeholder="Choose start and end dates">
<input type="text" class="form-control" id="weeknum"
       placeholder="Choose a date">

Meeting schedule

Choose a date and time for the appointment. 

<input type="text" class="form-control" id="datetime"
       placeholder="Choose date and time">
<input type="text" class="form-control" id="limitdatetime"
       placeholder="Available 16:00–22:00">

Time formats

Choose a standard or 24-hour time value. 

<input type="text" class="form-control" id="timepikcr"
       placeholder="Choose time">
<input type="text" class="form-control" id="timepickr1"
       placeholder="HH:MM">

Availability window

Set allowed hours or start from a suggested time.

Between 4:00 PM and 10:30 PM.
Starts at 1:45 PM. You can change it. 
<input type="text" class="form-control" id="limittime"
       placeholder="16:00–22:30">
<input type="text" class="form-control" id="pretime"
       placeholder="Choose time">

Inline calendar

A persistent calendar for date-focused workflows. 

<input type="text" class="form-control" id="inlinecalendar"
       placeholder="Choose date">

Inline time

Select a time without opening a popup. 

<input type="text" class="form-control" id="inlinetime"
       placeholder="Choose time">

Brand color

Choose a color for a product or workspace accent.

Click the swatch to open the system color chooser. 

<input type="color"
       class="form-control form-control-color border-0"
       id="exampleColorInput" value="#136ad0"
       title="Choose your color">

Classic - Full Controls

Swatches, opacity, hue and value inputs.

A complete picker for detailed color editing. 

<div class="theme-container"></div>
<div class="pickr-container example-picker"></div>

Monolith - Compact

Focused picker with HEX-oriented input.

A smaller palette for settings panels. 

<div class="theme-container1"></div>
<div class="pickr-container1 example-picker"></div>

Nano - Minimal

A lightweight layout with essential controls.

Use a simple picker where space is limited. 

<div class="theme-container2"></div>
<div class="pickr-container2 example-picker"></div>