NgxLaydate

Angular directive for Laydate (version >= 5.x)

• Online Demo
• Online Docs
• Laydate Online Demo
• Laydate Online Docs
• ngxLaydate Options Docs

English | 简体中文

Table of contents

• Getting Started
• Installation
• Usage
• API
  • Directive
  • Laydate Instance
• Events
• Demo

Getting Started

ngx-laydate is an Angular (ver >= 2.x) directive for Laydate (ver >= 5.x).

Latest version @npm:

• v16.x for Angular >= 16
• v15.x for Angular >= 15
• v14.x for Angular >= 14
• v13.x for Angular >= 13
• v12.x for Angular >= 12
• v11.x for Angular >= 11
• v10.x for Angular >= 10
• v1.x for Angular >= 2.x

Installation

# if you use npm
npm install layui-laydate -S
npm install ngx-laydate -S

# or if you use yarn
yarn add layui-laydate
yarn add ngx-laydate

Usage

Please refer to the demo page.

1. Firstly, import NgxLaydateModule in your app module (or any other proper angular module):

   import { NgxLaydateModule } from 'ngx-laydate';
   
   @NgModule({
     imports: [
       NgxLaydateModule.forRoot({
         /**
          * This will import all modules from laydate.
          * If you only need custom modules,
          * please refer to [Custom Build] section.
          * PS: Angular Version >= 11 need @ts-ignore or src/types/index.d.ts(declare module 'layui-laydate')
          * Issues Link: https://stackoverflow.com/questions/41292559/could-not-find-a-declaration-file-for-module-module-name-path-to-module-nam
          */
         // @ts-ignore
         laydate: () => import('layui-laydate'), // or import path-to-my-custom-laydate')
         path: 'assets/laydate/', // or import path-to-my-custom-laydate')
       }),
     ],
   })
   export class AppModule {}

2. Then: configure assets in the angular.json file.

{
  architect: {
    ...(PS: build -> options)
        assets: [
          {
            "glob": "**/*",
            "input": "node_modules/layui-laydate/dist/",
            "output": "assets/laydate"
          }
        ]
  }
}

3. Then: use laydate directive in a input element

   • Simple example:

     • html:

     <input laydate [options]="laydateOption" />

     • component:

     // ...
     
     laydateOption = {
       lang: 'en',
       value: '1989-10-14',
       done: (value, date, endDate) => {
        // Get the generated value of the date, for example: 2017-08-18
        console.log(value);seconds: 0}
        // Get the date time object: {year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(date);
        // Get the end date time object, only returns when range selection is enabled (range: true). The object members are the same as above.
        console.log(endDate);
      }
     };

🚀 standalone component

When using NgxLaydateModule in a standalone component, we can use token NGX_LAYDATE_CONFIG to provide laydate

import { NgxLaydateModule, NGX_LAYDATE_CONFIG } from 'ngx-laydate';

@Component({
  standalone: true,
  selector: 'my-laydate',
  template: `
    <input laydate [options]="{}" />
  `,
  imports: [NgxLaydateModule],
  providers: [
    {
      provide: NGX_LAYDATE_CONFIG,
      useFactory: () => ({
        // @ts-ignore
        laydate: () => import('layui-laydate'),
        path: 'assets/laydate/'
      }),
    },
  ]
})
export class MyLaydateComponent {
  // logic
}

API

Directive

laydate directive support following input properties:

Input	Type	Default	Description
[options]	object	null	The same as the options on the official demo site.

Laydate Instance

For example:

• html:

<input laydate [options]="laydateOptions" #myLaydate="laydate" />

• component:

@ViewChild('myLaydate', { static: true, read: NgxLaydateDirective }) myLaydateRef: NgxLaydateDirective;

this.options = {
  min: '2016-10-14',
  max: '2080-10-14',
  ready: () => {
    this.myLaydateRef.hint('Date selection is set within the range of <br> October 14, 2016 to October 14, 2080.');
  }
}

Events

As Laydate supports the 'click' events, our ngx-laydate directive also supports the same click events but with an additional laydate prefix. For example:

• html:

<input laydate [options]="laydateOptions" (laydateDone)="onDone($event)" />

• typescript:

onDone([value, date]): void {
  alert('You have selected the date: ' + value + '\nThe obtained object is ' + JSON.stringify(date));
}

• The '$event' is same with the 'params' that Laydate dispatches.

It supports following event outputs:

@Output	Event
laydateInit	Emitted when the laydate is initialized
laydateReady	laydate event: 'ready'
laydateChange	laydate event: 'done'
laydateDone	laydate event: 'change'
laydateClose	laydate event: 'close'

You can refer to the Laydate tutorial: Events and Actions in Laydate for more details of the event params. You can also refer to the demo page for a detailed example.

Demo

You can clone this repo to your working copy and then launch the demo page in your local machine:

npm install
npm run start

# or
yarn install
yarn start

The demo page server is listening on: http://localhost:4200