Date and Time

Date and Time

The date and time picker allows a user to select a single point in time or a time range. Time can be expressed as a date, a time of day, or a combination of both. Common use cases are selecting a date and time for something to run or expire and filtering events by their timestamp. The date and time picker is based on the Bootstrap-datetimepicker. See the bootstrap-datepicker doc for complete documentation.

There are number of variation of the date and Time picker. We recommend using appropriate component to meet specific user case, jump to a section below for applied examples: </br>

DatePicker

The DatePicker allows a user to select a single date.

DatePicker

TimePicker

The TimePicker allows a user to select a single Time.

TimePicker

DateTimePicker

The DateTimePicker allows a user to select a date with a time.

DateTimePicker

DateRangePicker

The DateRangePicker allows a user to select a range of date.

DateRangePicker

DateTimeRangePicker

The DateTimeRangPicker allows a user to select a range of date with time.

DateTimeRangePicker

Date and Time

Date and Time picker has a number of variations, jump to a section below for applied examples:

DatePicker

DatePicker

  1. Input Field: 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. Today indicator: Today indicator: The indication of Today’s date.

  6. Month and Year Switch: Change the view of the calendar to month or year by clicking on the calendar header.

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

TimePicker

TimePicker

  1. Input Field: The Timepicker field is read only due to the limitations of the input validation.

  2. Time Icon: The time icon is shown on the right.

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

  4. AM and PM Buttons: Allows the user to toggle between AM and PM.

  5. Select Hour: Use the picker to select the hour.

  6. Select Minute: Use the picker to select the minute.

  7. Up and Down Buttons: Allows the user to step through the hours or minutes.

DateTimePicker

DateTimePicker

DateTimePicker is a combination of DatePicker and TimePicker. Refer to the DatePicker and TimePicker for more details about design guidance.

  1. Input Field: The DateTimepicker field is read only due to the limitations of the input validation.

  2. DateTimePicker: The DateTimePicker is displayed when the user clicks on the input field.

DateRangePicker

DateRange

DateRangePicker is a combination of two DatePickers. Refer to the DatePicker for more details about design guidance.

  1. StartDate Input Field: When the user clicks on the StartDate Input Field, the calendar is display for selecting a StartDate.

  2. EndDate Input Field: When the user clicks on the EndDate Input Field, the calendar is display for selecting an EndDate.

Selecting Predefined Ranges

Predefined Ranges

  1. Predefined Range (optional): This action allow user to quickly select some predefined ranges, such as : 7 days, 15 days, 30 days… The Options available in the dropdown menu may be any number of days.

  • When both the StartDate and the EndDate field are empty, user clicks “7 days “, the date range selected will be 7 days starting from Today’s date.

  • When the StartDate is filled, user clicks “7 days “, the date range selected will be 7 days after the StartDate.

  • When the EndDate is filled, user clicks “7 days “, the date range selected will be 7 days before the EndDate.

DateTimeRangePicker

DateTimeRangPicker

DateTimeRangePicker is a combination of Two DateTimePickers. Refer to the DateTimePicker for more details about design guidance.

  1. StartDate Input Field: When the user clicks on the StartDate Input Field, the DateTimePicker is display for selecting a StartDate and Time.

  2. EndDate Input Field: When the user clicks on the EndDate Input Field, the DateTimePicker is display for selecting an EndDate and Time.

PatternFly Core Example


Jump to DatePicker, TimePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker

DatePicker

Reference Markup 

<script src="components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
<script src="components/moment/min/moment.min.js"></script>
<div class="input-group date-time-picker-pf" id="datetimepicker1">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <span class="fa fa-calendar"></span>
  </span>
</div>
<script>
  $(function () {
    $('#datetimepicker1').datetimepicker({
      format: 'L',
      allowInputToggle: true,
      showTodayButton: true,
      icons: {
        today: 'today-button-pf'
      }
    });
  });
</script>

TimePicker

Reference Markup 

<script src="components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
<script src="components/moment/min/moment.min.js"></script>
<div class="input-group date-time-picker-pf" id="datetimepicker2">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <span class="fa fa-clock-o"></span>
  </span>
</div>
<script>
  $(function () {
    $('#datetimepicker2').datetimepicker({
      format: 'LT',
      allowInputToggle: true,
      keyBinds: {
        enter: function () {
          this.hide();
        }
      }
    });
  });
</script>

DateTimePicker

Reference Markup 

<script src="components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
<script src="components/moment/min/moment.min.js"></script>
<div class="input-group date-time-picker-pf" id="datetimepicker3">
  <input type="text" class="form-control"/>
  <span class="input-group-addon">
    <span class="fa fa-calendar"></span>
  </span>
</div>
<script>
  $(function () {
    $('#datetimepicker3').datetimepicker({
      allowInputToggle: true,
      showTodayButton: true,
      toolbarPlacement: 'bottom',
      sideBySide: true,
      icons: {
        today: 'today-button-pf'
      }
    });
  });
</script>

DateRangePicker

Reference Markup 

<script src="components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
<script src="components/moment/min/moment.min.js"></script>
<div class="date-time-range-picker-pf input-group" id="range1">
  <input type="text" class="form-control" id="datetimepicker4">
  <span class="input-group-addon">To</span>
  <input type="text" class="form-control" id="datetimepicker5">
  <div class="dropdown btn-group dropdown-kebab-pf">
    <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="fa fa-ellipsis-v"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownKebab">
      <li><a href="#!">7 days</a></li>
      <li><a href="#!">15 days</a></li>
      <li><a href="#!">30 days</a></li>
      <li><a href="#!">90 days</a></li>
    </ul>
  </div>
</div>
<script>
  $(function () {
    var $startDate = $('#datetimepicker4');
    var $endDate = $('#datetimepicker5');

    $startDate.datetimepicker({
      format: 'L',
      showTodayButton: true,
      icons: {
        today: 'today-button-pf'
      }
    });
    $endDate.datetimepicker({
      format: 'L',
      useCurrent: false,
      showTodayButton: true,
      icons: {
        today: 'today-button-pf'
      }
    });

    $startDate.on('dp.change', function (e) {
      $endDate.data('DateTimePicker').minDate(e.date);
    });
    $endDate.on('dp.change', function (e) {
      $startDate.data('DateTimePicker').maxDate(e.date);
    });

    $('#range1').on('click', 'a', function (e) {
      var sDate = $startDate.data('DateTimePicker').date();
      var eDate = $endDate.data('DateTimePicker').date();
      var duration = parseInt(e.target.textContent);
      if (!sDate && !eDate) {
        $startDate.data('DateTimePicker').date(moment());
        $endDate.data('DateTimePicker').date(moment().add(duration, 'days'));
      } else if (sDate && !eDate) {
        $endDate.data('DateTimePicker').date(sDate.add(duration, 'days'));
      } else if (!sDate && eDate) {
        $startDate.data('DateTimePicker').date(eDate.subtract(duration, 'days'));
      } else {
        $endDate.data('DateTimePicker').minDate(false);
        $endDate.data('DateTimePicker').date(sDate.add(duration, 'days'));
      }
    });
  });
</script>

DateTimeRangePicker

To

Reference Markup 

<script src="components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
<script src="components/moment/min/moment.min.js"></script>
<div class="date-time-range-picker-pf input-group">
  <input type="text" class="form-control" id="datetimepicker6">
  <span class="input-group-addon">To</span>
  <input type="text" class="form-control" id="datetimepicker7">
</div>
<script>
  $(function () {
    var $startDate = $('#datetimepicker6');
    var $endDate = $('#datetimepicker7');

    $startDate.datetimepicker({
      showTodayButton: true,
      toolbarPlacement: 'bottom',
      sideBySide: true,
      icons: {
        today: 'today-button-pf'
      }
    });
    $endDate.datetimepicker({
      useCurrent: false,
      showTodayButton: true,
      toolbarPlacement: 'bottom',
      sideBySide: true,
      icons: {
        today: 'today-button-pf'
      }
    });
    $startDate.on('dp.change', function (e) {
      $endDate.data('DateTimePicker').minDate(e.date);
    });
    $endDate.on('dp.change', function (e) {
      $startDate.data('DateTimePicker').maxDate(e.date);
    });
  });
</script>