ngx-laydate v16.0.3
NgxLaydate
Angular directive for Laydate (version >= 5.x)
English | 简体中文
Table of contents
Getting Started
ngx-laydate
is an Angular (ver >= 2.x) directive for Laydate (ver >= 5.x).
Latest version @npm:
v16.x
for Angular >= 16v15.x
for Angular >= 15v14.x
for Angular >= 14v13.x
for Angular >= 13v12.x
for Angular >= 12v11.x
for Angular >= 11v10.x
for Angular >= 10v1.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.
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 {}
Then: configure assets in the
angular.json
file.{ architect: { ...(PS: build -> options) assets: [ { "glob": "**/*", "input": "node_modules/layui-laydate/dist/", "output": "assets/laydate" } ] } }
Then: use
laydate
directive in a input elementSimple 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
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago