{"id":15640245,"url":"https://github.com/johanneshoppe/angular-date-value-accessor","last_synced_at":"2025-05-08T23:28:30.684Z","repository":{"id":42520324,"uuid":"69466669","full_name":"JohannesHoppe/angular-date-value-accessor","owner":"JohannesHoppe","description":"Home of the Angular DateValueAccessor for \u003cinput type=\"date\"\u003e","archived":false,"fork":false,"pushed_at":"2022-10-25T14:32:55.000Z","size":2906,"stargazers_count":78,"open_issues_count":2,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T11:14:32.317Z","etag":null,"topics":["angular","angular-forms","angular2","valueasdate"],"latest_commit_sha":null,"homepage":"http://johanneshoppe.github.io/angular-date-value-accessor/","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/JohannesHoppe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-28T13:36:16.000Z","updated_at":"2024-10-01T08:08:43.000Z","dependencies_parsed_at":"2023-01-20T04:19:40.422Z","dependency_job_id":null,"html_url":"https://github.com/JohannesHoppe/angular-date-value-accessor","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohannesHoppe%2Fangular-date-value-accessor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohannesHoppe%2Fangular-date-value-accessor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohannesHoppe%2Fangular-date-value-accessor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohannesHoppe%2Fangular-date-value-accessor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JohannesHoppe","download_url":"https://codeload.github.com/JohannesHoppe/angular-date-value-accessor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253162594,"owners_count":21863947,"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-forms","angular2","valueasdate"],"created_at":"2024-10-03T11:32:41.636Z","updated_at":"2025-05-08T23:28:30.652Z","avatar_url":"https://github.com/JohannesHoppe.png","language":"TypeScript","readme":"# DateValueAccessor for Angular\n[![NPM version][npm-image]][npm-url]\n[![Tests][tests-image]][tests-url]\n\nA set of `ControlValueAccessor`s for Angular to work with Browser's native date input elements. \nNow you can use `\u003cinput type=\"date\"\u003e` directly with two-way data bindings (`ngModel`) as well as with reactive forms (`formControlName`/`formControl`). Choose freely between date objects and ISO-formatted strings.\n\n## Releases\n\nThe latest version is v3.0.0. Please refer to the [releases page](https://github.com/JohannesHoppe/angular-date-value-accessor/releases) to see which version of the package is compatible with which version of Angular and to find out what new features were rolled out at which point in time.\n\n## Demo\n\nHere you can see the `DateValueAccessor` - the binding works!\nChanges to the input field are propagated to the model.\n\n![Example: works](https://johanneshoppe.github.io/angular-date-value-accessor/assets/reactive-works.gif)\n\nAnd here you can see the `LocalDateValueAccessor` ⭐️.\nPlease notice how the date is adjusted due to the German time zone (UTC+1) and how the time offset works.\n\n![Example: works](https://johanneshoppe.github.io/angular-date-value-accessor/assets/reactive-works-local.gif)\n\nAnd this shows a not working form field (the default behaviour).\nChanges in the input field are propagated to the model, but unfortunately the date becomes a string which is not very useful for any further processing.\n\n![Example: does not work](https://johanneshoppe.github.io/angular-date-value-accessor/assets/reactive-does-not-work.gif)\n\n**You can try out a full demo at the following page:**  \n**→ http://johanneshoppe.github.io/angular-date-value-accessor/**\n\n\n## Installation\n\nDownload the package via NPM:\n\n```bash\nnpm install angular-date-value-accessor\n```\n\n\n## UTC Time or Local Time\nWhen working with Dates in Javascript you either operate in UTC or Local Time.\n\n* UTC has no timezone offset.\n* Local Time depends on the host system time zone and offset.\n\nJavascript Dates support both the UTC and the Local Time representation.\nDepending on the requirements of your application you can choose from these Value Accessors:\n* [DateValueAccessor (UTC)](#datevalueaccessor-utc)\n* [LocalDateValueAccessor (Local Time) ⭐️](#localdatevalueaccessor-local-time)\n* [IsoDateValueAccessor (UTC as ISO 8601 string)](#isodatevalueaccessor-utc-as-iso-8601-string)\n* [LocalIsoDateValueAccessor (Local Time as ISO 8601 string)](#localisodatevalueaccessor-local-time-as-iso-8601-string)\n\n\n\u003e **ℹ️ Hint:** Most UI component libraries like Angular Material, Kendo Angular, PrimeNG implement their DatePickers operating in Local Time. The Angular Date Pipe uses the Local Time representation of the Date Object by default, too.\n\n## Installation \u0026 Usage\n\nYou have to explicitly opt-in by adding one of these attribute directives to a HTML date input control: `useValueAsDate`, `useValueAsLocalDate`, `useValueAsIso` or `useValueAsLocalIso`.\n\n\n### DateValueAccessor (UTC)\n\nThe original `DateValueAccessor` operates in UTC (Coordinated Universal Time).\nThe HTML date input will use the UTC representation of a given Date Object.\nWhen you select a date it will output an UTC date with the time set to 00:00 (UTC).\n\n**If you are unsure what to use, use the `LocalDateValueAccessor` and not the `DateValueAccessor`.**\n**Most users will expect the input field to correlate to their local clock.**\n\nImport the standalone directive *or* the NgModule:\n\n```js\n// app.module.ts\n\nimport { DateValueAccessor, DateValueAccessorModule } from 'angular-date-value-accessor';\n\n@NgModule({\n  imports: [\n    DateValueAccessor\n    // OR\n    DateValueAccessorModule\n  ]\n})\nexport class AppModule {}\n```\n\nNow you can apply the `useValueAsDate` to your date input controls:\n\n```html\n\u003c!-- DateValueAccessor (UTC) ---\u003e\n\n\u003cinput type=\"date\"\n       name=\"myBirthday\"\n       [(ngModel)]=\"myBirthday\"\n       useValueAsDate\u003e\n\nOR\n\n\u003cinput type=\"date\"\n       formControlName=\"myBirthday\"\n       useValueAsDate\u003e\n```\n\n\n### LocalDateValueAccessor (Local Time) ⭐️\n\nThe improved `LocalDateValueAccessor` operates in your Local Time.\nThe HTML date input will use the Local Time representation of a given the Date Object.\nWhen you select a date it will output a Local Date with the time set to 00:00 (Local Time).\n\nImport the standalone directive *or* the NgModule:\n\n```js\n// app.module.ts\n\nimport { LocalDateValueAccessor, LocalDateValueAccessorModule } from 'angular-date-value-accessor';\n\n@NgModule({\n  imports: [\n    LocalDateValueAccessor\n    // OR\n    LocalDateValueAccessorModule\n  ]\n})\nexport class AppModule {}\n```\n\nNow you can apply the `useValueAsLocalDate` to your date input controls:\n\n```html\n\u003c!-- LocalDateValueAccessor (Local Time) ⭐️ ---\u003e\n\n\u003cinput type=\"date\"\n       name=\"myBirthday\"\n       [(ngModel)]=\"myBirthday\"\n       useValueAsLocalDate\u003e\n\nOR\n\n\u003cinput type=\"date\"\n       formControlName=\"myBirthday\"\n       useValueAsLocalDate\u003e\n```\n\n\n### IsoDateValueAccessor (UTC as ISO 8601 string)\n\nThis directive gets and sets ISO 8601 formatted date strings in HTML date inputs.\nThe handling of the dates is the same as for the `DateValueAccessor`.\n\nThe `IsoDateValueAccessor` operates in UTC (Coordinated Universal Time).\nThe HTML date input will use the UTC representation of a given ISO 8601 formatted date string.\nWhen you select a date it will output an ISO-formatted string with the time set to 00:00 (UTC).\n\nImport the standalone directive *or* the NgModule:\n\n```js\n// app.module.ts\nimport { IsoDateValueAccessor, IsoDateValueAccessorModule } from 'angular-date-value-accessor';\n\n@NgModule({\n  imports: [\n    IsoDateValueAccessor\n    // OR\n    IsoDateValueAccessorModule\n  ]\n})\nexport class AppModule { }\n```\n\nNow you can apply the `useValueAsIso` to your date input controls:\n\n```html\n\u003c!-- IsoDateValueAccessor (UTC as ISO string) ---\u003e\n\n\u003cinput type=\"date\"\n       name=\"myBirthday\"\n       [(ngModel)]=\"myBirthday\"\n       useValueAsIso\u003e\n\nOR\n\n\u003cinput type=\"date\"\n       formControlName=\"myBirthday\"\n       useValueAsIso\u003e\n```\n\n\n### LocalIsoDateValueAccessor (Local Time as ISO 8601 string)\n\nThis directive gets and sets ISO 8601 formatted date strings in HTML date inputs.\nThe handling of the dates is the same as for the `LocalDateValueAccessor`.\n\nThe `LocalIsoDateValueAccessor` operates in your Local Time.\nThe HTML date input will use the Local Time representation of a given ISO 8601 formatted date string.\nWhen you select a date it will output an ISO-formatted string with a time that equals to 00:00 (Local Time).\u003cbr\u003e\n\u003cbr\u003e\nNote: The timezone of the outputted string is always zero UTC offset, as denoted by the suffix \"Z\".\n\nImport the standalone directive *or* the NgModule:\n\n```js\n// app.module.ts\nimport { LocalIsoDateValueAccessor, LocalIsoDateValueAccessorModule } from 'angular-date-value-accessor';\n\n@NgModule({\n  imports: [\n    LocalIsoDateValueAccessor\n    // OR\n    LocalIsoDateValueAccessorModule\n  ]\n})\nexport class AppModule { }\n```\n\nNow you can apply the `useValueAsLocalIso` to your date input controls:\n\n```html\n\u003c!-- LocalIsoDateValueAccessor (Local Time as ISO string) ⭐️ ---\u003e\n\n\u003cinput type=\"date\"\n       name=\"myBirthday\"\n       [(ngModel)]=\"myBirthday\"\n       useValueAsLocalIso\u003e\n\nOR\n\n\u003cinput type=\"date\"\n       formControlName=\"myBirthday\"\n       useValueAsLocalIso\u003e\n```\n\n\n## License\n\nThis code is published under the [MIT license](LICENSE).\n\n\n\n[npm-url]: https://npmjs.org/package/angular-date-value-accessor\n[npm-image]: https://badge.fury.io/js/angular-date-value-accessor.svg\n[tests-url]: https://github.com/JohannesHoppe/angular-date-value-accessor/actions?query=workflow%3ATests\n[tests-image]: https://github.com/JohannesHoppe/angular-date-value-accessor/workflows/Tests/badge.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohanneshoppe%2Fangular-date-value-accessor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohanneshoppe%2Fangular-date-value-accessor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohanneshoppe%2Fangular-date-value-accessor/lists"}