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
-
Input Field: At this time, we recommend that the datepicker field is read only due to the limitations of the input validation.
-
Calendar Icon: The calendar icon is shown on the right.
-
Calendar: The calendar is displayed when the user clicks on the input field.
-
Today Button: This button is a shortcut to select today’s date.
-
Datepicker Switch: Change the view of the calendar to month or year by clicking on the calendar header.
-
Previous and Next Buttons: Allows the user to navigate through the months or years.
Example
<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>