Date Time Picker

About

We use bootstrap-datetimepicker by Eonasdan. This plugin requires moment.js.

Previews

There are four modes with the Date / Time picker.

Date: Only shows a calendar date picker
Time: Only shows a time picker
Date / Time: Show a calendar date picker with a icon to click bringing the time picker up
Date / Time - Side by Side: Show a date calendar and a time picker simultaneously in the same widget

Date

<div class="input-group" data-datetime="date">
  <asp:TextBox ID="txtID" runat="server" CssClass="form-control" readonly data-disable-touch-keyboard></asp:TextBox>
    <span class="input-group-addon primary">
      <i class="fa fa-calendar"></i>
    </span>
</div>

The `readonly` and `data-disable-touch-keyboard` elements are in place to keep the virtual keyboard on touch devices from coming up.

Time

<div class="input-group" data-datetime="time">
  <asp:TextBox ID="txtID" runat="server" CssClass="form-control" readonly data-disable-touch-keyboard></asp:TextBox>
    <span class="input-group-addon primary">
      <i class="fa fa-clock-o"></i>
    </span>
</div>

Date / Time

<div class="input-group" data-datetime="both">
  <asp:TextBox ID="txtID" runat="server" CssClass="form-control" readonly data-disable-touch-keyboard></asp:TextBox>
    <span class="input-group-addon primary">
      <i class="fa fa-calendar"></i>
    </span>
</div>

Date / Time: Side by Side

<div class="input-group" data-datetime="both-side">
  <asp:TextBox ID="txtID" runat="server" CssClass="form-control" readonly data-disable-touch-keyboard></asp:TextBox>
    <span class="input-group-addon primary">
      <i class="fa fa-calendar"></i>
    </span>
</div>

Allowing Input via keyboard

To allow the user to enter the date or time via typing, add the following JavaScript to your page.

// allow keyboard to be used on click
$('[data-disable-touch-keyboard]').on('click', function (e) {
  $(this).prop("readonly", false);
  $(this).focus();

});

// make readonly to make sure virtual keyboard doesn't show
$('[data-disable-touch-keyboard]').on('blur', function (e) {
  $(this).prop("readonly", true);
});