datepicker material angular code example

Example 1: material datepicker

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

Example 2: angular strap datepicker

<form name="datepickerForm" class="form-inline" role="form">
  <!-- Basic example -->
  <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
    <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
    <input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
  </div>
  <!-- Custom example -->
  <div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}">
    <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as number)</small></label>
    <input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
  </div>
  <hr>
  <!-- Date range example -->
  <div class="form-group">
    <label class="control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i> Date range <small>(dynamic)</small></label><br>
    <div class="form-group col-xs-6">
      <input type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="From" bs-datepicker>
    </div>
    <div class="form-group col-xs-6">
      <input type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Until" bs-datepicker>
    </div>
  </div>
</form>

Example 3: date time picker in angular material

<input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime"
placeholder="Date" show-todays-date="" minutes="true" min-date="date" show-icon="true"
ng-model="dateTime" class=" dtp-no-msclear dtp-input md-input">