Date and Time Pickers

  1. Home
  2. Forms
  3. Date Time Picker

Implement date time picker design patterns that are appropriate for your context. When designing date-entry fields support text input and consider whether or not you have an international audience. Avoid designs that are ambiguous and will likely frustrate users.

Date Time pickers should be used for events close to the present time — within less than a year. However, they can be frustrating for users who choose dates far in advance because they require too much navigation to get to the desired input; for these users, it would be faster to simply type the year.

Date Time pickers are especially useful for selecting a date range. In those situations, they often display two months side by side.

  • Do not require users to enter special characters to format dates.
  • Report errors appropriately. If a user enters a date that is obviously a mistake, such as 11/81/17, do not make any assumptions. Give the user feedback and provide suggestions on how to resolve the error.
  • Preserve users’ work. If the same date information is required in a separate part of the form or later during a task, then don’t make users enter that date twice.
  • Keep date ranges consistent.
  • Add labels and separate the fields to make it clear which fields are for the month, day, and year.
  • Utilize calendar pickers with clearly spelled out names for months.

You can find examples and documentation of the date time picker here: Date Time Range Picker

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.

<input type="text" class="form-control" name="daterange" value="01/01/2015 - 01/31/2015" /> <script> $(function() { $('input[name="daterange"]').daterangepicker(); }); </script>
Date and Time Picker

The Date Range Picker can also be used to select times. Hour, minute and (optional) second dropdowns are added below the calendars. An option exists to set the increment count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.

<input type="text" class="form-control" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM" /> <script> $(function() { $('input[name="daterange"]').daterangepicker({ timePicker: true, timePickerIncrement: 30, locale: { format: 'MM/DD/YYYY h:mm A' } }); }); </script>
Single Date Picker

The Date Range Picker can be turned into a single date picker widget with only one calendar. In this example, dropdowns to select a month and year have also been enabled at the top of the calendar to quickly jump to different months.

<input type="text" class="form-control" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM" /> <script> $(function() { $('input[name="daterange"]').daterangepicker({ timePicker: true, timePickerIncrement: 30, locale: { format: 'MM/DD/YYYY h:mm A' } }); }); </script>
Predefined Ranges

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

 

<input type="text" class="form-control" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM" /> <script> $(function() { $('input[name="daterange"]').daterangepicker({ timePicker: true, timePickerIncrement: 30, locale: { format: 'MM/DD/YYYY h:mm A' } }); }); </script>