Angular Material DatetimePicker, Timepicker for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x, 18.x, 19.x, 20.x

![Github All Releases]()

Description

A DatetimePicker like @angular/material
Datepicker by adding support for
choosing time.

DEMO

@see LIVE DEMO AND DOCUMENTATION

@see DEMO stackblitz

!Alt Text

Choose the version corresponding to your Angular version:

| Angular | @ngxmc/datetime-picker |
| ------- | ------------------------------- |
| 20 | 20.x+ |
| 19 | 19.x+ |
| 18 | 18.x+ |
| 16 | 16.x+ |
| 15 | 15.x+ OR 9.x+ for legacy import |
| 14 | 8.x+ |
| 13 | 7.x+ |
| 12 | 6.x+ |
| 11 | 5.x+ |
| 10 | 4.x+ |
| 9 | 2.x+ |
| 8 | 2.x+ |
| 7 | 2.x+ |

Getting started

``
npm install --save @ngxmc/datetime-picker
`

Setup

Add the date provider to your app configuration.

[!IMPORTANT] to prevent the \_ERROR Error: NgxMatDatetimePicker: No provider found for DateAdapter.
You must import one of the following providers at your application root or standalone component:
provideNativeDateAdapter, provideMomentDateAdapter, provideLuxonDateAdapter, provideDateFnsAdapter,
or provide a custom implementation.

`typescript
import { provideNativeDateAdapter } from '@angular/material/core';

export const appConfig: ApplicationConfig = {
providers: [
...,
provideNativeDateAdapter(),
...,
],
};
`

On your component, you can use the datepicker as follows:

`typescript
import {
NgxMatDatepickerActions,
NgxMatDatepickerApply,
NgxMatDatepickerCancel,
NgxMatDatepickerClear,
NgxMatDatepickerInput,
NgxMatDatetimepicker,
} from '@ngxmc/datetime-picker';

@Component({
selector: 'test',
imports: [
NgxMatDatepickerActions,
NgxMatDatepickerActions,
NgxMatDatepickerApply,
NgxMatDatepickerCancel,
NgxMatDatepickerClear,
NgxMatDatepickerInput,
NgxMatDatetimepicker,
..., // other imports
],
template:

`html

matInput
[ngxMatDatetimePicker]="picker"
placeholder="Choose a date"
[formControl]="dateControl"
[min]="minDate"
[max]="maxDate"
[disabled]="disabled" />

#picker
[showSpinners]="showSpinners"
[showSeconds]="showSeconds"
[stepHour]="stepHour"
[stepMinute]="stepMinute"
[stepSecond]="stepSecond"
[touchUi]="touchUi"
[color]="color"
[enableMeridian]="enableMeridian"
[disableMinute]="disableMinute"
[hideTime]="hideTime">


`

$3

`








`

#### List of @Input of ngx-mat-timepicker

_You can use all @Input of ngx-mat-timepicker for ngx-mat-datetime-picker_

| @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 |
| disableMinute | boolean | false | If true, the minute (and second) is readonly |
| defaultTime | Array | undefined | An array [hour, minute, second] for default time when the date is not yet defined |
| stepHour | number | 1 | The number of hours to add/substract when clicking hour spinners |
| stepMinute | number | 1 | The number of minutes to add/substract when clicking minute spinners |
| stepSecond | number | 1 | The number of seconds to add/substract 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. |
| hideTime | boolean | false | If true, the time is hidden. |
| 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. |

Choosing a date implementation and date format settings

NativeDateAdapter
DateFnsAdapter
LuxonDateAdapter
MomentDateAdapter

For example:

Creating a custom date adapter:

`
@Injectable()
export class CustomDateAdapter extends DateAdapter {...}
// D can be Date, Moment or customized type
`

`
// If using Moment
const CUSTOM_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: "l, LTS"
},
display: {
dateInput: "l, LTS",
monthYearLabel: "MMM YYYY",
dateA11yLabel: "LL",
monthYearA11yLabel: "MMMM YYYY"
}
};
`

Creating a custom date adapter module

`
export function provideNgxMatCustomDate() {
return makeEnvironmentProviders([
{ provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
]);
}

`

You can also customize the date format by providing your custom MAT_DATE_FORMATS in your module.

Theming

- @see @angular/material
Using a pre-built theme
- Add the Material Design icon font to your index.html

`

``

License

MIT