{"id":13808324,"url":"https://github.com/kuhnroyal/mat-datetimepicker","last_synced_at":"2025-12-29T13:48:34.928Z","repository":{"id":27334548,"uuid":"110588680","full_name":"kuhnroyal/mat-datetimepicker","owner":"kuhnroyal","description":"Material datetimepicker for @angular/material","archived":false,"fork":false,"pushed_at":"2025-05-01T07:25:21.000Z","size":14573,"stargazers_count":153,"open_issues_count":47,"forks_count":86,"subscribers_count":7,"default_branch":"release","last_synced_at":"2025-05-08T21:47:33.047Z","etag":null,"topics":["angular","angular-material","angular-material5","datetimepicker","material","material-datepicker","material-datetimepicker","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kuhnroyal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-11-13T18:58:15.000Z","updated_at":"2025-04-08T11:10:01.000Z","dependencies_parsed_at":"2024-01-21T17:30:57.145Z","dependency_job_id":"b010185f-a7c6-4337-8f2d-ab3ebdedbf3b","html_url":"https://github.com/kuhnroyal/mat-datetimepicker","commit_stats":{"total_commits":461,"total_committers":28,"mean_commits":"16.464285714285715","dds":0.6724511930585684,"last_synced_commit":"d3ea68690112276b9a8cb41ad2d4e3b975bc12cc"},"previous_names":[],"tags_count":116,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuhnroyal%2Fmat-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuhnroyal%2Fmat-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuhnroyal%2Fmat-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuhnroyal%2Fmat-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kuhnroyal","download_url":"https://codeload.github.com/kuhnroyal/mat-datetimepicker/tar.gz/refs/heads/release","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270646,"owners_count":22042859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","angular-material5","datetimepicker","material","material-datepicker","material-datetimepicker","typescript"],"created_at":"2024-08-04T01:01:40.085Z","updated_at":"2025-12-29T13:48:34.874Z","avatar_url":"https://github.com/kuhnroyal.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Dates"],"readme":"# Material Datetimepicker for @angular/material\n\n\u003e **The example application is on [GitHub Pages](https://kuhnroyal.github.io/mat-datetimepicker/)!**\n\n[![Build](https://img.shields.io/github/workflow/status/kuhnroyal/mat-datetimepicker/Test?style=flat-square)](https://github.com/kuhnroyal/mat-datetimepicker/actions/workflows/test.yaml)\n[![Latest Stable Version](https://img.shields.io/npm/v/@mat-datetimepicker/core?style=flat-square)](https://www.npmjs.com/package/@mat-datetimepicker/core)\n[![License](https://img.shields.io/npm/l/@mat-datetimepicker/core.svg?style=flat-square)](https://www.npmjs.com/package/@mat-datetimepicker/core)\n[![NPM Downloads](https://img.shields.io/npm/dm/@mat-datetimepicker/core.svg?style=flat-square)](https://www.npmjs.com/package/@mat-datetimepicker/core)\n\n---\n\nThe datetimepicker was initially taken from [`Promact/md2`](https://github.com/Promact/md2) and modified to\nuse `@angular/material`. We have also added theming support.\n\nLike the `@angular/material` `datepicker` it contains a `native-datetime-adapter` as well as a `moment-datetime-adapter`\n.\n\n# Contents\n\n- [Usage](#usage)\n- [Development](#development)\n\n# Usage\n\n## Installation\n\nInstall:\n\n```sh\nnpm install --save @mat-datetimepicker/core\n```\n\nAnd for the moment adapter:\n\n```sh\nnpm install --save @angular/material-moment-adapter mat-datetimepicker/moment\n```\n\n## Setup\n\nBasically the same way the `@angular/material` datepicker is configured and imported.\n\n```ts\nimports: [\n  ...MatDatepickerModule,\n  // use this if you want to use native javascript dates and INTL API if available\n  // MatNativeDatetimeModule,\n  MatMomentDatetimeModule,\n  MatDatetimepickerModule,\n];\n```\n\n@see [`src/app/app.module.ts`](src/app/app.module.ts)\n\n## Using the component\n\n```html\n\u003cform [formGroup]=\"group\"\u003e\n  \u003cmat-form-field\u003e\n    \u003cmat-placeholder\u003eStart DateTime\u003c/mat-placeholder\u003e\n    \u003cmat-datetimepicker-toggle\n      [for]=\"datetimePicker\"\n      matSuffix\n    \u003e\u003c/mat-datetimepicker-toggle\u003e\n    \u003cmat-datetimepicker\n      #datetimePicker\n      type=\"datetime\"\n      openOnFocus=\"true\"\n      timeInterval=\"5\"\n    \u003e\n    \u003c/mat-datetimepicker\u003e\n    \u003cinput\n      matInput\n      formControlName=\"start\"\n      [matDatetimepicker]=\"datetimePicker\"\n      required\n      autocomplete=\"false\"\n    /\u003e\n  \u003c/mat-form-field\u003e\n\u003c/form\u003e\n```\n\n## Date formatting\n\nIn order to change the default input/output formats, a custom instance of `MAT_DATETIME_FORMATS` needs to be provided in\nthe global configuration.\n\nInput/output formats can be changed separately for the existing datetime picker types\n`date`, `month` , `datetime`and `time`.\n\n## Accessibility\n\nYou can use the following properties to provide values for ARIA- attributes:\n\n| Property           | Description                                                | Default          |\n| ------------------ | ---------------------------------------------------------- | ---------------- |\n| ariaNextMonthLabel | `aria-label` for the `Next` button in the `month` mode     | \"Next month\"     |\n| ariaPrevMonthLabel | `aria-label` for the `Previous` button in the `month` mode | \"Previous month\" |\n| ariaNextYearLabel  | `aria-label` for the `Next` button in the `year` mode      | \"Next year\"      |\n| ariaPrevYearLabel  | `aria-label` for the `Previous` button in the `year` mode  | \"Previous year\"  |\n\nThe component supports property bindings or pipes with the aria- values.\n\n### Native\n\nParsing does not work with the native adapter because the Intl.DateTimeFormat API does not provide that feature.\n\n```ts\nproviders: [\n  {\n    provide: MAT_DATETIME_FORMATS,\n    useValue: {\n      parse: {},\n      display: {\n        dateInput: {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n        },\n        monthInput: {\n          month: 'long',\n        },\n        datetimeInput: {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          hour: '2-digit',\n          minute: '2-digit',\n        },\n        timeInput: {\n          hour: '2-digit',\n          minute: '2-digit',\n        },\n        monthYearLabel: {\n          year: 'numeric',\n          month: 'short',\n        },\n        dateA11yLabel: {\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        },\n        monthYearA11yLabel: {\n          year: 'numeric',\n          month: 'long',\n        },\n        popupHeaderDateLabel: {\n          weekday: 'short',\n          month: 'short',\n          day: '2-digit',\n        },\n      },\n    },\n  },\n];\n```\n\n@see defaults in [`native-datetime-formats.ts`](projects/core/src/adapter/native-datetime-formats.ts) \\\n@see Intl.DateTimeFormat\nAPI [documentation](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)\n\n### Moment\n\n```ts\nproviders: [\n  {\n    provide: MAT_DATETIME_FORMATS,\n    useValue: {\n      parse: {\n        dateInput: 'L',\n        monthInput: 'MMMM',\n        timeInput: 'LT',\n        datetimeInput: 'L LT',\n      },\n      display: {\n        dateInput: 'L',\n        monthInput: 'MMMM',\n        datetimeInput: 'L LT',\n        timeInput: 'LT',\n        monthYearLabel: 'MMM YYYY',\n        dateA11yLabel: 'LL',\n        monthYearA11yLabel: 'MMMM YYYY',\n        popupHeaderDateLabel: 'ddd, DD MMM',\n      },\n    },\n  },\n];\n```\n\n@see defaults in [`moment-datetime-formats.ts`](projects/moment/src/adapter/moment-datetime-formats.ts) \\\n@see moment.js [documentation](https://momentjs.com/docs/#/displaying/)\n\n## Theming\n\n```scss\n@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';\n\n// Using the $theme variable from the pre-built theme you can call the theming function\n@include datetimepicker-theme.mat-datetimepicker-theme($theme);\n```\n\n@see [src/styles.scss](src/styles.scss)\n\n# Development\n\nRun `npm install` in order to install all required dependencies and initialize the Git hooks. Further instructions are\navailable in the [`DEVELOPMENT.md`](https://github.com/kuhnroyal/mat-datetimepicker/blob/release/DEVELOPMENT.md).\n\n**Make sure you read at\nleast [the \"Committing\" section](https://github.com/kuhnroyal/mat-datetimepicker/blob/release/DEVELOPMENT.md#committing)\nbefore committing anything.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuhnroyal%2Fmat-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuhnroyal%2Fmat-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuhnroyal%2Fmat-datetimepicker/lists"}