{"id":25723561,"url":"https://github.com/rbalet/ngx-mat-date-input","last_synced_at":"2025-10-16T23:24:57.988Z","repository":{"id":208476240,"uuid":"721710272","full_name":"rbalet/ngx-mat-date-input","owner":"rbalet","description":"Designing a better date Input with Material design","archived":false,"fork":false,"pushed_at":"2025-02-22T07:28:02.000Z","size":1396,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-22T07:36:13.430Z","etag":null,"topics":["angular","angular-material"],"latest_commit_sha":null,"homepage":"","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/rbalet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":"rbalet","custom":"https://www.buymeacoffee.com/widness"}},"created_at":"2023-11-21T16:04:57.000Z","updated_at":"2025-02-22T07:27:24.000Z","dependencies_parsed_at":"2023-11-24T09:24:53.510Z","dependency_job_id":"2944f52d-2eee-40ab-aa35-c6687a6931e8","html_url":"https://github.com/rbalet/ngx-mat-date-input","commit_stats":null,"previous_names":["rbalet/ngx-mat-birthday-input","rbalet/ngx-mat-date-input"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-mat-date-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-mat-date-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-mat-date-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-mat-date-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbalet","download_url":"https://codeload.github.com/rbalet/ngx-mat-date-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240745576,"owners_count":19850985,"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"],"created_at":"2025-02-25T20:38:13.577Z","updated_at":"2025-10-16T23:24:57.949Z","avatar_url":"https://github.com/rbalet.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rbalet","https://www.buymeacoffee.com/widness"],"categories":[],"sub_categories":[],"readme":"# NgxMatDateInput\nAn Angular Material library for entering a date. \n\n![NPM](https://img.shields.io/npm/l/ngx-href)\n[![npm version](https://img.shields.io/npm/v/ngx-mat-date-input.svg)](https://www.npmjs.com/package/ngx-mat-date-input)\n![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-mat-date-input)\n![npm](https://img.shields.io/npm/dm/ngx-mat-date-input)\n\n1. Split a date into 3 input fields, day, month and year, then reassemble and save them into a given formControl. \n2. **Automatically add `0`** in front of the day/month number.\n3. Control the form value with the max number for day \u0026 month\n4. **Remove `.` and `e`** from the possible input.\n5. Does **automatically focus the next field** when needed. \n6. Based on the [Vitaly Friedman](https://www.smashingmagazine.com/author/vitaly-friedman/) article, [Designing Birthday Picker UX: Simpler Is Better](https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/#designing-a-better-birthday-input)\n\n\n| fill                                                                                                  | outlined                                                                                                |\n| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |\n| ![Input example](https://raw.githubusercontent.com/rbalet/ngx-mat-date-input/main/assets/example.png) | ![Input example](https://raw.githubusercontent.com/rbalet/ngx-mat-date-input/main/assets/example-2.png) |\n\n**Supports:**\n- Angular \u003e=15\n- Angular Material \u003e=15\n\n## Demo\n- https://stackblitz.com/~/github.com/rbalet/ngx-mat-date-input\n\n ## Installation\n\n `npm i ngx-mat-date-input`\n\n ## Usage\n\n ### Import\n\nAdd `NgxMatDateInputComponent` to your component file:\n\n```ts\nimports: [NgxMatDateInputComponent];\n```\n\n## Example\n*  Add `floatLabel` to your `mat-form-field`\n*  Use a preset `formControlName`\n*  This `formControlName` will be automatically updated, therefore giving you the possibility to add your own `mat-error` _see the comment_\n\n```html\n\u003cform #f=\"ngForm\" [formGroup]=\"dateForm\"\u003e\n  \u003cmat-form-field\n    floatLabel=\"always\"\n  \u003e\n    \u003c!-- \u003cmat-label\u003eDate\u003c/mat-label\u003e --\u003e\n    \n    \u003c!-- \n      \u003cmat-datepicker-toggle matIconPrefix [for]=\"myDatePicker\"\u003e\n        \u003cmat-icon matDatepickerToggleIcon\u003ecalendar_today\u003c/mat-icon\u003e\n      \u003c/mat-datepicker-toggle\u003e\n      \u003cmat-datepicker touchUi #myDatePicker\u003e\u003c/mat-datepicker\u003e \n    --\u003e\n\n    \u003cngx-mat-date-input\n      formControlName=\"date\"\n      id=\"date\"\n    \u003e\n    \u003c!-- [matDatepicker]=\"myDatePicker\" --\u003e\n    \u003c/ngx-mat-date-input\u003e\n\n    \u003c!-- \u003cmat-icon matSuffix\u003eevent\u003c/mat-icon\u003e\n    \u003cmat-error *ngIf=\"dateForm?.get('date').invalid\"\u003e\n      {{ Invalide error message }}\n    \u003c/mat-error\u003e --\u003e\n  \u003c/mat-form-field\u003e\n\u003c/form\u003e\n```\n\n## Options\n\n| Options         | Type                                            | Default                                | Description                            |\n| --------------- | ----------------------------------------------- | -------------------------------------- | -------------------------------------- |\n| formControlName | `FormControl`                                   | `undefined`                            | Control to be updated                  |\n| autocomplete    | `\"on\" or \"off\"`                                 | `\"on\"`                                 | Use the default browser autofill       |\n| labels          | `string[]`                                      | `[\"DD\", \"MM\", \"YYYY\"]`                 | Label used by the mat-input            |\n| placeholders    | `string[]`                                      | `[\"\", \"\", \"\"]`                         | with an *s*                            |\n| required        | `boolean`                                       | `undefined`                            |                                        |\n| disabled        | `boolean`                                       | `undefined`                            |                                        |\n| min             | `date`                                          | `undefined`                            | Activate min validators on each fields |\n| fields          | `{day: boolean, month: boolean, year: boolean}` | `{day: true, month: true, year: true}` | Show specifies fields                  |\n\n## Css variable\n| Name                           | Default | Explanation                       |\n| ------------------------------ | ------- | --------------------------------- |\n| `--ngx-mat-date-input-gap`     | `16px`  | Change the gap between the inputs |\n| `--ngx-mat-date-input-padding` | `0`     | Padding around the form           |\n\n## Auto formatting\n### Month\n- Max 12\n\n### Day\n- Month: 2 -\u003e max 29\n- Month: 4, 6, 9 \u0026 11 -\u003e max 30\n- Month: else -\u003e max 31 \n\n## Authors and acknowledgment\n* maintainer [Raphaël Balet](https://github.com/rbalet)\n\n[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-mat-date-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbalet%2Fngx-mat-date-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-mat-date-input/lists"}