{"_rev":"5-e8e08842bdacb9077ef2954039af6a77","time":{"created":"2026-01-17T11:17:38.337Z","modified":"2026-01-17T11:17:38.892Z","20.1.0":"2026-01-17T10:49:17.011Z","21.0.0":"2026-01-17T10:57:57.662Z","21.0.1":"2026-01-17T11:17:38.651Z"},"_id":"@adamsmid/datetime-picker","name":"@adamsmid/datetime-picker","dist-tags":{"latest":"21.0.1"},"versions":{"21.0.1":{"name":"@adamsmid/datetime-picker","version":"21.0.1","description":"Angular Material Datetime Picker","author":{"name":"HO Hong Quan && updated by Adam Smid","email":"adam.smid@workbox.cz"},"repository":{"type":"git","url":"git+https://github.com/AdamSmid/angular-datetime-picker.git"},"bugs":{"url":"https://github.com/AdamSmid/angular-datetime-picker/issues"},"homepage":"https://github.com/AdamSmid/angular-datetime-picker","keywords":["angular","angular 21","angular-material","angular material datetime picker","angular material time picker","datetime-picker","datepicker","timepicker","ad-mat","mat-datetime-picker","ad-material-datetime-picker","ad-mat-timepicker"],"license":"MIT","dependencies":{"tslib":"^2.8.1"},"peerDependencies":{"@angular/cdk":"^21.0.0","@angular/common":"^21.0.0","@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/material":"^21.0.0","@angular/platform-browser":"^21.0.0"},"packageManager":"npm@10.9.2","module":"fesm2022/adamsmid-datetime-picker.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/adamsmid-datetime-picker.mjs"}},"sideEffects":false,"_id":"@adamsmid/datetime-picker@21.0.1","gitHead":"3e35310e5cb6e2d601f91d6b0c0c1a6aec4e3fe5","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Zj+LuONKPC2fwyczuMCOplkMyJf15TjJJCX/WIz9Qc1200nIcMr/wZw/15+2bGh+y9Q8ONRzmBIXgBCMlfTonQ==","shasum":"4f48e49aaf48d22105af30a45c6b4a5b17ed17c2","tarball":"https://registry.npmjs.org/@adamsmid/datetime-picker/-/datetime-picker-21.0.1.tgz","fileCount":6,"unpackedSize":961746,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDtn1rwVpQFuzFpGNaab6oUVGa/FDHHa7aONdHjUjOVNwIgQ0YfOP5BPeBkVkXbjWeLI5QOD3orJ/FoUk5UT0O+do4="}]},"_npmUser":{"name":"adamsmid","email":"email@adamsmid.cz"},"directories":{},"maintainers":[{"name":"adamsmid","email":"email@adamsmid.cz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datetime-picker_21.0.1_1768648658461_0.5933303920450366"},"_hasShrinkwrap":false}},"maintainers":[{"name":"adamsmid","email":"email@adamsmid.cz"}],"description":"Angular Material Datetime Picker","homepage":"https://github.com/AdamSmid/angular-datetime-picker","keywords":["angular","angular 21","angular-material","angular material datetime picker","angular material time picker","datetime-picker","datepicker","timepicker","ad-mat","mat-datetime-picker","ad-material-datetime-picker","ad-mat-timepicker"],"repository":{"type":"git","url":"git+https://github.com/AdamSmid/angular-datetime-picker.git"},"author":{"name":"HO Hong Quan && updated by Adam Smid","email":"adam.smid@workbox.cz"},"bugs":{"url":"https://github.com/AdamSmid/angular-datetime-picker/issues"},"license":"MIT","readme":"# Angular Material DatetimePicker\n\n## Description\n\n## Demo\n\n@see [Stackblitz demo](https://stackblitz.com/edit/demo-mat-datetime-picker)\n\n![Alt Text](picker.png)\n\nChoose the version corresponding to your Angular version:\n\n| Angular | @adamsmid/datetime-picker        |\n| ------- | ------------------------------- |\n| 20      | 20.x+                           |\n\n\n## Getting started\n\n```\nnpm install --save  @adamsmid/datetime-picker\n```\n\n## Setup\n\nAdd the date provider to your app configuration.\n\n[!IMPORTANT] to prevent the \\_ERROR Error: AdMatDatetimePicker: No provider found for DateAdapter.\nYou must import one of the following providers at your application root or standalone component:\nprovideNativeDateAdapter, provideMomentDateAdapter, provideLuxonDateAdapter, provideDateFnsAdapter,\nor provide a custom implementation.\n\n```typescript\nimport { provideNativeDateAdapter } from '@angular/material/core';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    ...,\n    provideNativeDateAdapter(),\n    ...,\n  ],\n};\n```\n\nOn your component, you can use the datepicker as follows:\n\n```typescript\nimport {\n  AdMatDatepickerActions,\n  AdMatDatepickerApply,\n  AdMatDatepickerCancel,\n  AdMatDatepickerClear,\n  AdMatDatepickerInput,\n  AdMatDatetimepicker,\n} from '@adamsmid/datetime-picker';\n\n@Component({\n  selector: 'test',\n  imports: [\n    AdMatDatepickerActions,\n    AdMatDatepickerActions,\n    AdMatDatepickerApply,\n    AdMatDatepickerCancel,\n    AdMatDatepickerClear,\n    AdMatDatepickerInput,\n    AdMatDatetimepicker,\n    ..., // other imports\n  ],\n  template: `\n    <input matInput [adMatDatetimePicker]=\"event\" class=\"hidden\" />\n\n    <mat-datetime-picker #event>\n      <ad-mat-datepicker-actions>\n        <div class=\"flex w-full justify-between\">\n          <button mat-button adMatDatepickerClear>Clear</button>\n          <div>\n            <button mat-button adMatDatepickerCancel>Cancel</button>\n            <button mat-raised-button color=\"primary\" adMatDatepickerApply>Apply</button>\n          </div>\n        </div>\n      </ad-mat-datepicker-actions>\n    </mat-datetime-picker>\n  `,\n})\nexport class TestComponent {}\n```\n\n## Using the component The same API as @angular/material Datepicker (@see [API\n\ndocs](https://material.angular.io/components/datepicker/api)) ### Datetime Picker\n(mat-datetime-picker)\n\n```html\n<mat-form-field>\n  <input\n    matInput\n    [adMatDatetimePicker]=\"picker\"\n    placeholder=\"Choose a date\"\n    [formControl]=\"dateControl\"\n    [min]=\"minDate\"\n    [max]=\"maxDate\"\n    [disabled]=\"disabled\" />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datetime-picker\n    #picker\n    [showSpinners]=\"showSpinners\"\n    [showSeconds]=\"showSeconds\"\n    [stepHour]=\"stepHour\"\n    [stepMinute]=\"stepMinute\"\n    [stepSecond]=\"stepSecond\"\n    [touchUi]=\"touchUi\"\n    [color]=\"color\"\n    [enableMeridian]=\"enableMeridian\"\n    [disableMinute]=\"disableMinute\"\n    [hideTime]=\"hideTime\">\n  </mat-datetime-picker>\n</mat-form-field>\n```\n\n### Timepicker (ad-mat-timepicker)\n\n```\n<ad-mat-timepicker [(ngModel)]=\"date\"></ad-mat-timepicker>\n<ad-mat-timepicker [(ngModel)]=\"date\" [disabled]=\"disabled\"></ad-mat-timepicker>\n<ad-mat-timepicker [(ngModel)]=\"date\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"10\"></ad-mat-timepicker>\n<ad-mat-timepicker [(ngModel)]=\"date\" [showSpinners]=\"showSpinners\"></ad-mat-timepicker>\n<ad-mat-timepicker [(ngModel)]=\"date\" [showSeconds]=\"showSeconds\"></ad-mat-timepicker>\n<ad-mat-timepicker [(ngModel)]=\"date\" [disableMinute]=\"disableMinute\"></ad-mat-timepicker>\n<ad-mat-timepicker [(ngModel)]=\"date\" [defaultTime]=\"defaultTime\"></ad-mat-timepicker>\n<ad-mat-timepicker [formControl]=\"formControl\"></ad-mat-timepicker>\n```\n\n#### List of @Input of ad-mat-timepicker\n\n_You can use all @Input of ad-mat-timepicker for mat-datetime-picker_\n\n| @Input             | Type         | Default value | Description                                                                                                                                                                  |\n| ------------------ | ------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **disabled**       | boolean      | null          | If true, the picker is readonly and can't be modified                                                                                                                        |\n| **showSpinners**   | boolean      | true          | If true, the spinners above and below input are visible                                                                                                                      |\n| **showSeconds**    | boolean      | true          | If true, it is not possible to select seconds                                                                                                                                |\n| **disableMinute**  | boolean      | false         | If true, the minute (and second) is readonly                                                                                                                                 |\n| **defaultTime**    | Array        | undefined     | An array [hour, minute, second] for default time when the date is not yet defined                                                                                            |\n| **stepHour**       | number       | 1             | The number of hours to add/substract when clicking hour spinners                                                                                                             |\n| **stepMinute**     | number       | 1             | The number of minutes to add/substract when clicking minute spinners                                                                                                         |\n| **stepSecond**     | number       | 1             | The number of seconds to add/substract when clicking second spinners                                                                                                         |\n| **color**          | ThemePalette | undefined     | Color palette to use on the datepicker's calendar.                                                                                                                           |\n| **enableMeridian** | boolean      | false         | Whether to display 12H or 24H mode.                                                                                                                                          |\n| **hideTime**       | boolean      | false         | If true, the time is hidden.                                                                                                                                                 |\n| **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. |\n\n## Choosing a date implementation and date format settings\n\n[NativeDateAdapter](https://github.com/angular/components/blob/main/src/material/core/datetime/index.ts)\n[DateFnsAdapter](https://github.com/angular/components/blob/main/src/material-date-fns-adapter/adapter/index.ts)\n[LuxonDateAdapter](https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/index.ts)\n[MomentDateAdapter](https://github.com/angular/components/blob/main/src/material-moment-adapter/adapter/index.ts)\n\nFor example:\n\nCreating a custom date adapter:\n\n```\n@Injectable()\nexport class CustomDateAdapter extends DateAdapter<D> {...}\n// D can be Date, Moment or customized type\n```\n\n```\n// If using Moment\nconst CUSTOM_DATE_FORMATS: MatDateFormats = {\n  parse: {\n    dateInput: \"l, LTS\"\n  },\n  display: {\n    dateInput: \"l, LTS\",\n    monthYearLabel: \"MMM YYYY\",\n    dateA11yLabel: \"LL\",\n    monthYearA11yLabel: \"MMMM YYYY\"\n  }\n};\n```\n\nCreating a custom date adapter module\n\n```\nexport function provideAdMatCustomDate() {\n  return makeEnvironmentProviders([\n    { provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },\n    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\n  ]);\n}\n\n```\n\nYou can also customize the date format by providing your custom MAT_DATE_FORMATS in your module.\n\n## Theming\n\n- @see @angular/material\n  [Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)\n- Add the Material Design icon font to your index.html\n\n```\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\" rel=\"stylesheet\">\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}