Datepicker

The datepicker allows a user to select a single date. The most common use case is selecting a date for something to run or expire. The datepicker widget is based on the Bootstrap-datepicker. See the bootstrap-datepicker doc for complete documentation.

This pattern should NOT be used when selecting a date range.

Datepicker

Datepicker

Expanded Datepicker

  1. Input Field: At this time, we recommend that the datepicker field is read only due to the limitations of the input validation.

  2. Calendar Icon: The calendar icon is shown on the right.

  3. Calendar: The calendar is displayed when the user clicks on the input field.

  4. Today Button: This button is a shortcut to select today’s date.

  5. Datepicker Switch: Change the view of the calendar to month or year by clicking on the calendar header.

  6. Previous and Next Buttons: Allows the user to navigate through the months or years.

Example

Reference Markup

<script src="components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<div id="date-2" class="input-group date">
  <input type="text" class="form-control bootstrap-datepicker" readonly><span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
<script>
  $('#date-2').datepicker({
    autoclose: true,
    orientation: "top auto",
    todayBtn: "linked",
    todayHighlight: true
  });
</script>