ngx-clarity-datetime

v1.1.1

Published

3 years ago

Angular 4+ datetime picker for clarity ui

Downloads

0High
0Medium
0Low

thatisuday

Angular datepicker date picker timepicker time picker

Angular Date Time Picker

Angular date time picker - Angular reusable UI component This package supports Angular 4

Breaking Changes

This picker is complete changed in version 5.
This picker now is no longer as a directive added into a text input. Instead, it is a stand along component that includes a text input and a dropdown calendar-time picker. You could see more details down below.
This picker now does not use MomentJS. Instead, it is using date-fns. Here is why.

Latest Update

I am working on a way that the picker would add dynamically. In this way, the picker component would not have the input element and users could use their own input template (such as Angular Material, issue#161). In the next major update, the picker would use Javascript Intl to have better internationalization support.

Description

Simple Angular date time picker. Online demo is here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices. This picker uses date-fns.

How to Use

Install with npm:npm install ng-pick-datetime --save
Add <link rel="stylesheet" type="text/css" href="/node_modules/ng-pick-datetime/assets/style/picker.min.css" /> in your index.html.
Add DateTimePickerModule import to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { MyTestApp } from './my-test-app';

   import { DateTimePickerModule } from 'ng-pick-datetime';

   @NgModule({
       imports:      [ BrowserModule, DateTimePickerModule ],
       declarations: [ MyTestApp ],
       bootstrap:    [ MyTestApp ]
   })
   export class MyTestAppModule {}

If you are using systemjs package loader add the following ng-pick-datetime properties to the System.config:

  (function (global) {
      System.config({
          paths: {
              'npm:': 'node_modules/'
          },
          map: {
              // Other components are here...

              'ng-pick-datetime': 'npm:ng-pick-datetime',
          },
          packages: {
              // Other components are here...

            // the picker
              'ng-pick-datetime': {
                  main: 'picker.bundle.js',
                  defaultExtension: 'js'
              },
          }
      });
  })(this);

Add picker component to your component: <owl-date-time [(ngModel)]="moment" ></owl-date-time>

Animation

This picker uses angular animations to improve the user experience, starting with Angular 4 animations have their own module so you need to import BrowserAnimationsModule to your application. If you prefer to disable animation effect, use NoopAnimationsModule instead.

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 { }

Properties

Events

Styling

Following is the list of structural style classes.

DateFormat

Default date format is 'YYYY/MM/DD HH:mm', to customize this use dateFormat property. Following options can be a part of the format.

s - second of the time value (no leading zero 0, 1, ..., 59)
ss - second of the time value (two digits 00, 01, ..., 59)
m - minute of the time value (no leading zero 0, 1, ..., 59)
mm - minute of the time value (two digits 00, 01, ..., 59)
h - hour of the time value, 12 hour format (no leading zero 1, 2, ..., 12)
hh - hour of the time value, 12 hour format (two digits 01, 02, ..., 12)
H - hour of the time value, 24 hour format (no leading zero 0, 1, ..., 23)
HH - hour of the time value, 24 hour format (two digits 00, 01, ..., 23)
A - meridian of the time value (AM, PM)
a - meridian of the time value (am, pm)
D - day of the month (no leading zero 1, 2, ..., 31)
DD - day of the month (two digits 01, 02, ..., 31)
M - month of the year (no leading zero 1, 2, ..., 12)
MM - month of the year (two digits 01, 02, ..., 12)
MMM - month of the year (Jan, Feb, ..., Dec)
MMMM - month of the year (January, February, ..., December)
YYYY - year(2015, 2016, 2017 ...)

Your could learn more about this from here.

Localization

Localization for different languages and formats is defined by binding the locale settings object to the locale property. Following is the default values for English.

<owl-date-time [(ngModel)]="dateValue" [locale]="en"></owl-date-time>

export class MyModel {
    
    en: any;
    
    ngOnInit() {
        this.en = {
            firstDayOfWeek: 0,
            dayNames: ["Sunday", "Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday"],
            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
        };
    }
}

If you want the formatted date time to be localized as well, you need to npm install date-fns.

<owl-date-time [(ngModel)]="dateValue" [locale]="es"></owl-date-time>

export class MyModel {
    
    es: any;
    esLocale = require('date-fns/locale/es')
    
    ngOnInit() {
        this.es = {
			 firstDayOfWeek: 1,
		     dayNames:["domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
		     dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
		     monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
		     monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ],
		     dateFns: esLocale
        };
    }
}

Dependencies

date-fns

Theme

The picker now separate its styles into ./node_modules/ng-pick-datetime/assets/style/picker.min.css. You could inspect the picker's classes from your browser's dev tool and overwrite them in your project's css files.

Demo

Online demo is here

License

License: MIT

Author

Daniel YK Pan