From 137d709cd970fad889151f32818d70b92b8a2e2c Mon Sep 17 00:00:00 2001 From: Johannes Hoppe Date: Wed, 2 Dec 2020 10:19:54 +0100 Subject: [PATCH] final tweaks for v1.2.0 --- README.md | 31 ++++++-- .../projects/date-value-accessor/README.md | 72 ++++++++++++++++++- .../projects/date-value-accessor/package.json | 13 ++-- 3 files changed, 104 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 26c6bf3..52ce594 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,8 @@ http://johanneshoppe.github.io/angular-date-value-accessor/ You have to explicitly opt-in by adding the attribute `useValueAsDate` to a date input control: ```html + + + + + + + +OR + + + +OR + + + ``` ## Installation @@ -47,7 +70,7 @@ OR Download the package via NPM: ```bash -npm install --save angular-date-value-accessor +npm install angular-date-value-accessor ``` ## UTC Time and Local Time @@ -63,6 +86,7 @@ Depending on the requirements of your application you can choose the from these ## DateValueAccessor (UTC) + The DateValueAccessor operates in UTC (Coordinated Universal Time). The HTML date input will read the UTC representation of the Date Object. When you select a date it will output an UTC date with the time set to 00:00 (UTC). @@ -89,9 +113,7 @@ If you prefer to work with Local Dates then you can use the `LocalDateValueAcces The HTML date input will read the Local Time representation of the Date Object. When you select a date it will output a Local Date with the time set to 00:00 (Local Time). -Most UI component libraries like Angular Material, Kendo Angular, PrimeNG implement their DatePickers operating in Local Time. - -Also the Angular Date Pipe uses the Local Time representation of the Date Object by default. +Import the module via NgModule: ```js // app.module.ts @@ -108,6 +130,7 @@ export class AppModule { } Now you can apply the `useValueAsLocalDate` to your date input controls. +> **ℹ️ 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. [npm-url]: https://npmjs.org/package/angular-date-value-accessor [npm-image]: https://badge.fury.io/js/angular-date-value-accessor.svg diff --git a/workspace/projects/date-value-accessor/README.md b/workspace/projects/date-value-accessor/README.md index 91beec6..52ce594 100644 --- a/workspace/projects/date-value-accessor/README.md +++ b/workspace/projects/date-value-accessor/README.md @@ -1,5 +1,6 @@ # DateValueAccessor for Angular [![NPM version][npm-image]][npm-url] +[![Tests][tests-image]][tests-url] A custom value accessor for Angular. Now you can use `` (provides real JavaScript date objects) directly with two-way data bindings (ngModel) as well as with reactive forms (formControlName/formControl). @@ -22,6 +23,8 @@ http://johanneshoppe.github.io/angular-date-value-accessor/ You have to explicitly opt-in by adding the attribute `useValueAsDate` to a date input control: ```html + + + + + + + +OR + + + +OR + + + ``` ## Installation @@ -46,10 +70,27 @@ OR Download the package via NPM: ```bash -npm install --save angular-date-value-accessor +npm install angular-date-value-accessor ``` -Then import the module via NgModule: +## UTC Time and Local Time +When working with Dates in Javascript you either operate in UTC or Local Time. + +* UTC is has no timezone offset. +* Local Time depends on the host system time zone and offset. + +Javascript Dates support both the UTC and the Local Time representation. +Depending on the requirements of your application you can choose the from these Value Accessors: +* [DateValueAccessor (UTC)](#datevalueaccessor-utc) +* [LocalDateValueAccessor (Local Time)](#localdatevalueaccessor-local-time) + + +## DateValueAccessor (UTC) + +The DateValueAccessor operates in UTC (Coordinated Universal Time). +The HTML date input will read the UTC representation of the Date Object. When you select a date it will output an UTC date with the time set to 00:00 (UTC). + +Import the module via NgModule: ```js // app.module.ts @@ -64,9 +105,34 @@ import { DateValueAccessorModule } from 'angular-date-value-accessor'; export class AppModule { } ``` -Now you can apply the "useValueAsDate" to your date input controls. +Now you can apply the `useValueAsDate` to your date input controls. + +## LocalDateValueAccessor (Local Time) + +If you prefer to work with Local Dates then you can use the `LocalDateValueAccessorModule`. + +The HTML date input will read the Local Time representation of the Date Object. When you select a date it will output a Local Date with the time set to 00:00 (Local Time). + +Import the module via NgModule: + +```js +// app.module.ts + +import { LocalDateValueAccessorModule } from 'angular-date-value-accessor'; + +@NgModule({ + imports: [ + LocalDateValueAccessorModule + ] +}) +export class AppModule { } +``` +Now you can apply the `useValueAsLocalDate` to your date input controls. +> **ℹ️ 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. [npm-url]: https://npmjs.org/package/angular-date-value-accessor [npm-image]: https://badge.fury.io/js/angular-date-value-accessor.svg +[tests-url]: https://github.com/JohannesHoppe/angular-date-value-accessor/actions?query=workflow%3ATests +[tests-image]: https://github.com/JohannesHoppe/angular-date-value-accessor/workflows/Tests/badge.svg diff --git a/workspace/projects/date-value-accessor/package.json b/workspace/projects/date-value-accessor/package.json index a51deb0..8ae2605 100644 --- a/workspace/projects/date-value-accessor/package.json +++ b/workspace/projects/date-value-accessor/package.json @@ -1,7 +1,7 @@ { "name": "angular-date-value-accessor", - "version": "1.1.0", - "description": "DateValueAccessor for Angular. Now you can use with template-driven and reactive forms!", + "version": "1.2.0", + "description": "DateValueAccessor / LocalDateValueAccessor for Angular. Now you can use with template-driven and reactive forms!", "repository": { "type": "git", "url": "git+https://github.com/johanneshoppe/angular-date-value-accessor.git" @@ -10,7 +10,10 @@ "angular", "forms", "ControlValueAccessor", - "DateValueAccessor" + "DateValueAccessor", + "LocalDateValueAccessor", + "UTC", + "Local Time" ], "author": { "name": "Johannes Hoppe", @@ -23,8 +26,8 @@ }, "homepage": "https://github.com/johanneshoppe/angular-date-value-accessor", "peerDependencies": { - "@angular/common": "^9.0.0 || ^10.0.0", - "@angular/core": "^9.0.0 || ^10.0.0" + "@angular/common": "^9.0.0 || ^10.0.0 || ^11.0.0", + "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0" }, "dependencies": { "tslib": "^2.0.0"