axiros-datetime-picker v13.0.2

Angular Date Time Picker

Angular date time picker - Angular reusable UI component with support for Angular 12+

Description

This is the modified version of date time picker package Angular Date Time Picker. In a nutshell this library is date time picker, that can work in single / range modes. There are two modes for picker UI - dialog and popup menu, so feel free to try it in your desktops, tablets and mobile devices.

The difference from original library - I have updated dependencies to Angular 11, did some refactoring and added native parsing of en-GB date format.

Online docs for original library is here. Demo page is here.

How to Use

1. Install with npm:npm install axiros-datetime-picker --save
2. Add styles. If you are using Angular CLI, you can add this to your styles.css:

   @import "~axiros-datetime-picker/assets/style/picker.min.css";

   If you are not using the Angular CLI, you can include the picker.min.css via a <link> element in your index.html.

3. Add OwlDateTimeModule and OwlNativeDateTimeModule to your @NgModule like example below

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { MyTestApp } from './my-test-app';
   
    import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'axiros-datetime-picker';
   
    @NgModule({
        imports: [ 
            BrowserModule, 
            OwlDateTimeModule, 
            OwlNativeDateTimeModule,
        ],
        declarations: [ MyTestApp ],
        bootstrap:    [ MyTestApp ]
    })
    export class MyTestAppModule {}

   Also it is important to define date format that will be displayed in Input form. In the module add provider:

   providers: [
       { provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS },
   ],

   you can define any format for date, in my example i use:

   export const MY_NATIVE_FORMATS = {
       fullPickerInput: { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false },
       datePickerInput: { year: 'numeric', month: 'numeric', day: 'numeric' },
       timePickerInput: { hour: 'numeric', minute: 'numeric' },
       monthYearLabel: { year: 'numeric', month: 'short' },
       dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
       monthYearA11yLabel: { year: 'numeric', month: 'long' },
   };

4. Connecting a picker to an input and a trigger.

   <input
       [owlDateTime]="dt1"
       [owlDateTimeTrigger]="dt1"
       placeholder="Date Time">
   <owl-date-time #dt1></owl-date-time>

   <input
       [owlDateTime]="dt2"
       placeholder="Date Time">
   <span
       [owlDateTimeTrigger]="dt2">
       <i class="fa fa-calendar"></i>
   </span>
   <owl-date-time #dt2></owl-date-time>

   The examples above are quite basic. The picker has much more features, and you could learn more about those from demo page.

   In addition, this is ngx-formly implementation

   import {Component, ElementRef, ViewChild} from '@angular/core';
   import {FieldType} from '@ngx-formly/material';
   import {DateTimeAdapter} from 'axiros-datetime-picker';
   
   @Component({
       selector: 'app-datetime-picker',
       styleUrls: ['./formly-datetime-picker.component.scss'],
       template: `
           <div fxLayout="row">
               <!--INPUT WITH PICKER TOGGLE-->
               <ng-container *ngIf="!to.showOpenPickerButton else withoutButton">
                   <input
                       #dateTimeInputWithoutButton
                       matInput
                       [formControl]="formControl"
                       [formlyAttributes]="field"
                       [owlDateTime]="dt"
                       [errorStateMatcher]="errorStateMatcher"
                       [owlDateTimeTrigger]="dt"
                   />
               </ng-container>
               <!--INPUT WITHOUT PICKER TOGGLE-->
               <ng-template #withoutButton>
                   <!--INPUT AREA-->
                   <input
                       #dateTimeInputWithButton
                       matInput
                       [formControl]="formControl"
                       [formlyAttributes]="field"
                       [owlDateTime]="dt"
                       [errorStateMatcher]="errorStateMatcher"
                   />
               </ng-template>
   
               <!--NULLIFY VALUE BUTTON-->
               <button mat-icon-button
                       [disabled]="to.disabled"
                       (click)="formControl.setValue(null)"
                       color="warn"
                       class="action-button">
                   <mat-icon>close</mat-icon>
               </button>
   
               <ng-container *ngIf="to.showOpenPickerButton">
                   <!--OPEN PICKER BUTTON-->
                   <button mat-icon-button
                           class="action-button"
                           fxFlex="0 1 auto"
                           [color]="'primary'"
                           [owlDateTimeTrigger]="dt"
                           matTooltip="Open date time picker"
                           [matTooltipPosition]="'below'">
                       <mat-icon>event_note</mat-icon>
                   </button>
               </ng-container>
   
               <!--DATE TIME PICKER-->
               <owl-date-time
                   #dt
                   [pickerMode]="'dialog'">
               </owl-date-time>
           </div>
       `
   })
   export class FormlyDatetimePickerComponent extends FieldType {
       constructor(
           dateTimeAdapter: DateTimeAdapter<any>,
       ) {
           super();
           dateTimeAdapter.setLocale('en-GB');
       }
   
       /**
        * reference to input with button
        */
       @ViewChild('dateTimeInputWithButton', { read: ElementRef, static: false }) dateTimeInputWithButton: ElementRef;
   
       /**
        * reference to input without button
        */
       @ViewChild('dateTimeInputWithoutButton', { read: ElementRef, static: false }) dateTimeInputWithoutButton: ElementRef;
   
       // @ts-ignore
       get empty() {
           // get input element
           const element = this.to.showOpenPickerButton ? this.dateTimeInputWithButton : this.dateTimeInputWithoutButton;
   
           // empty if input element is empty and picker value is empty
           return (element && !element.nativeElement.value) && (this.value == null || this.value === '');
       }
   }

Animation

This picker uses angular animations to improve the user experience, therefore you need to install @angular/animations and import BrowserAnimationsModule to your application.

npm install @angular/animations --save

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class YourAppModule { }

If you prefer to disable animation effect, use NoopAnimationsModule instead.

Choose a date implementation

The date-time picker was built to be date implementation agnostic. Developers need to make sure to provide the appropriate pieces for the picker to work with their chosen implementation. There are two pre-made modules, users need to import one of them or build your own one (learn more about this from here).

• OwlNativeDateTimeModule - support for native JavaScript Date object
• OwlMomentDateTimeModule - support for MomentJs

Properties for owl-date-time

Events for owl-date-time

Properties for input[owlDateTime]

Events for input[owlDateTime]

Properties for [owlDateTimeTrigger]

Properties for [owlDateTimeTrigger]

Properties for owl-date-time-inline

Localization and DateTime Format

Localization for different languages and formats is defined by OWL_DATE_TIME_LOCALE and OWL_DATE_TIME_FORMATS. You could learn more about this from here.

Dependencies

none

License

• License: MIT

Author

Original library author - Daniel YK Pan