Date & time picker

Instead of forcing the user to manually type a date, a datepicker provides a visual way to browse and select a single date.

Date picker

To provide visual differentiation add .datepicker to the .form-group containing the input. Refer to Angular UI Bootstrap Datepicker for usage.

Date & time picker

When showing date and time inputs, refer to Angular UI Bootstrap Timepicker for timepicker usage. Place both .form-group inside a .form-inline and add .c8y-datetime-picker.

For component resizing, add the sizing modifiers into .form-group.

   
: :
   


   
: :
   
<div class="form-inline c8y-datetime-picker">
    <div class="form-group datepicker">
      <input class="form-control" placeholder="{{'Date' | translate}}"
             is-open="openFrom"
             uib-datepicker-popup
             datepicker-append-to-body="false"
             show-button-bar="false"
             on-open-focus="false"
             show-weeks="false"
             max-date="internalDates.dateTo"
             ng-model="internalDates.dateFrom"
             ng-click="openFrom=true">
    </div>
    <div class="form-group">
      <div uib-timepicker ng-model="internalDates.dateFrom" show-meridian="false" show-spinners="false"></div>
    </div>
  </div>