material datetime picker 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: 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">
Example 3: material timepicker example
<div class="12hr-example">
<input placeholder="12hr format (default settings)" aria-label="12hr format" [ngxTimepicker]="default" readonly>
<ngx-material-timepicker #default></ngx-material-timepicker>
</div>
<div class="24hr-example">
<input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly>
<ngx-material-timepicker #fullTime></ngx-material-timepicker>
</div>
<div class="default-time-example">
<input aria-label="default time" [ngxTimepicker]="defaultValue" [value]="'05:11 pm'" readonly>
<ngx-material-timepicker #defaultValue></ngx-material-timepicker>
</div>
<div class="ngx-material-timepicker-example__form-group">
<input placeholder="Default time 11:11 pm" aria-label="default time"
[ngxTimepicker]="defaultTime" readonly>
<ngx-material-timepicker #defaultTime [defaultTime]="'11:11 pm'"></ngx-material-timepicker>
</div>
<div class="disabled-example">
<input placeholder="Disabled Time Picker" aria-label="disabled time picker" [ngxTimepicker]="disabled" [disabled]="true">
<ngx-material-timepicker #disabled></ngx-material-timepicker>
</div>