Extended Angular Material DatePicker

Datetime Pickers

You can double click / double tap to make selections.

Source Code

<input time="false" date="true" mdc-datetime-picker="" type="text" id="date" placeholder="Date"
ng-model="date" min-date="minDate" max-date="maxDate" class=" md-input">

Source Code

<input mdc-datetime-picker="" date="false" time="true" type="text" id="time" short-time="true"
placeholder="Time" min-date="minDate" format="hh:mm a" ng-model="time" class=" md-input">

Source Code

<input mdc-datetime-picker="" date="false" time="true" type="text" id="time2"
placeholder="Time" min-date="minDate" format="HH:mm" ng-model="time" class=" md-input">

Source Code

<input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime"
placeholder="Date" min-date="date" ng-model="dateTime" class=" md-input">

DateRange Example

<div class="range layout-column flex-gt-md-30">
  <md-input-container class="md-input-has-placeholder">
    <label>Start Date/Time</label>
    <input mdc-datetime-picker="" date="true" time="true" type="text"
    placeholder="Date" max-date="dateTimeEnd" ng-model="dateTimeStart" class=" md-input"
    id="input_0">
  </md-input-container>
  <md-input-container class="md-input-has-placeholder">
    <label>End Date/Time</label>
    <input mdc-datetime-picker="" date="true" time="true" type="text"
    placeholder="Date" min-date="dateTimeStart"="dateTimeEnd" class=" md-input" id="input_1">
  </md-input-container>
</div>

Source Code

<input time="false" date="true" mdc-datetime-picker="" type="text" id="date" placeholder="Date"
ng-model="date" min-date="minDate" max-date="maxDate" disable-dates="dates" class=" md-input">

Source Code

<input time="false" date="true" mdc-datetime-picker="" type="text" id="date" placeholder="Date"
ng-model="date" min-date="minDate" max-date="maxDate" week-days="true" class=" md-input">