NgxLaydate

The Angular Directive for Laydate, built for modern Angular applications.

English | 简体中文

🔗 Live Demo

Check out the component in action: https://lanxuexing.github.io/ngx-laydate/

✨ Features

• 🚀 Modern Angular: Built with Standalone Directives, supporting Angular 16+.
• ⚡ Optimized Loading: Smart caching ensures the core library is loaded only once per session.
• 🧱 Easy Integration: Seamless wrapper for the popular Laydate picker (versions >= 5.x).
• 🧩 Flexible Configuration: Full access to all native Laydate options and events.
• 🎨 Customizable: Determine your own theme color and path configuration.
• 📦 Lightweight: Minimal overhead, focusing on wrapping the core functionality efficiently.
• 🌏 SSR Friendly: Designed to work safely in Server-Side Rendering environments.

📦 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

🔥 Pro Tip: To utilize the latest Laydate features, replace "layui-laydate" with "laydate-next" and update the asset dependencies in your angular.json file.

🚀 Usage

1. Standalone Component (Recommended)

Import NgxLaydateDirective directly in your component:

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

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [NgxLaydateDirective],
  providers: [
    {
      provide: NGX_LAYDATE_CONFIG,
      useFactory: () => ({
        // Use standard import or custom path
        // @ts-ignore
        laydate: () => import('layui-laydate'), 
        path: 'assets/laydate/'
      }),
    },
  ],
  template: `
    <input laydate [options]="laydateOption" />
  `
})
export class AppComponent {
   laydateOption = {
      lang: 'en',
      type: 'datetime',
      value: '2023-10-14 00:00:00'
   };
}

2. NgModule (Backwards Compatibility)

Import NgxLaydateModule in your module:

import { NgxLaydateModule } from 'ngx-laydate';

@NgModule({
  imports: [
    NgxLaydateModule.forRoot({
      // @ts-ignore
      laydate: () => import('layui-laydate'), 
      path: 'assets/laydate/'
    }),
  ],
})
export class AppModule {}

3. Configure Assets

Add the laydate assets to your angular.json. This ensures themes and styles load correctly.

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

📖 API

Directive Inputs

| Input | Type | Default | Description | | :--- | :--- | :--- | :--- | | [options] | LaydateOptions | null | Configuration object matching the official Laydate documentation. |

Events

ngx-laydate proxies native Laydate events with a laydate prefix.

| @Output | Description | | :--- | :--- | | (laydateInit) | Emitted when the instance is initialized. | | (laydateReady) | Emitted when the picker is displayed (ready callback). | | (laydateChange) | Emitted when the value changes (done callback). | | (laydateDone) | Same as change, consistent with native naming. | | (laydateClose) | Emitted when the picker is closed (close callback). |

Example:

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

onDone([value, date, endDate]): void {
  console.log('Selected:', value);
  console.log('Date Object:', date);
}

🛠️ Development

Clone the repo and start the demo:

npm install
npm run start

Visit: http://localhost:4200

🔗 Links

• Online Demo
• Official Laydate Docs
• Laydate Gitee