Wondering what’s next for npm?Check out our public roadmap! »

    angular-date-value-accessor
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    DateValueAccessor for Angular

    NPM version Tests

    A custom value accessor for Angular.
    Now you can use <input type="date"> (provides real JavaScript date objects) directly with two-way data bindings (ngModel) as well as with reactive forms (formControlName/formControl).

    Demo

    Here you can see the DateValueAccessor - the binding works!

    Example: works

    And this shows a not working form field (the default behaviour).

    Example: does not work

    There is an example application at:
    http://johanneshoppe.github.io/angular-date-value-accessor/

    Usage

    You have to explicitly opt-in by adding the attribute useValueAsDate to a date input control:

    <!-- DateValueAccessor (UTC) --->
    
    <input type="date"
           name="myBirthday"
           ngModel
           useValueAsDate>
    
    OR
    
    <input type="date"
           name="myBirthday"
           [(ngModel)]="myBirthday"
           useValueAsDate>
    
    OR
    
    <input type="date"
           formControlName="myBirthday"
           useValueAsDate>
    
    <!-- LocalDateValueAccessor (Local Time) --->
    
    <input type="date"
           name="myBirthday"
           ngModel
           useValueAsLocalDate>
    
    OR
    
    <input type="date"
           name="myBirthday"
           [(ngModel)]="myBirthday"
           useValueAsLocalDate>
    
    OR
    
    <input type="date"
           formControlName="myBirthday"
           useValueAsLocalDate>

    Installation

    Download the package via NPM:

    npm install angular-date-value-accessor

    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)

    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:

    // app.module.ts
    
    import { DateValueAccessorModule } from 'angular-date-value-accessor';
    
    @NgModule({
      imports: [
        DateValueAccessorModule
      ]
    })
    export class AppModule { }

    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:

    // 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.

    Install

    npm i angular-date-value-accessor

    DownloadsWeekly Downloads

    1,216

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    67.3 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar