ngx mat datetime picker is a date and time picker like @angular/material data picker (Datetime picker, Time picker, Color picker) by adding support for time selection.
Bootstrap Date Time Picker for BS 3/4 | datetimepicker
How to make use of it:
1. Install the ngx-mat-datetime picker.
# NPM $ npm install ngx-mat-datetime-picker --save
2. Import the ngx-mat-datetime picker component.
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from 'ngx-mat-datetime-picker';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatInputModule,
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule
],
bootstrap: [
AppComponent
]
})
export class AppModule { }3. Insert the component into your project.
<mat-form-field> <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker> </mat-form-field>
4. Insert the component into your project.
<mat-form-field> <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker> </mat-form-field>
List of @Input
| @Input | Type | Default value | Description |
|---|---|---|---|
| disabled | boolean | null | If true, the picker is readonly and can’t be modified |
| showSpinners | boolean | true | If true, the spinners above and below input are visible |
| showSeconds | boolean | true | If true, it is not possible to select seconds |
| stepHour | number | 1 | The number of hours to add/subtract when clicking hour spinners |
| stepMinute | number | 1 | The number of minutes to add/subtract when clicking minute spinners |
| stepSecond | number | 1 | The number of seconds to add/subtract when clicking second spinners |
| color | ThemePalette | undefined | Color palette to use on the datepicker’s calendar. |
| enableMeridian | boolean | false | Whether to display 12H or 24H mode. |
| touchUi | boolean | false | Whether the calendar UI is in touch mode. In touch mode, the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets. |
See Demo And Download
Official Website(h2qutc): Click Here
This superior jQuery/javascript plugin is developed by h2qutc. For extra Advanced usage, please go to the official website.
