https://github.com/lanxuexing/ng-laydate

📅 极简、强大、高颜值的 Angular 18+ 日期时间选择器 / A minimalist, premium Date & Time Picker for Angular 18+, built with Signals.
https://github.com/lanxuexing/ng-laydate

angular calendar dark-mode datepicker laydate modern-ui ng-laydate signals timepicker ui-library

Last synced: 5 months ago
JSON representation

📅 极简、强大、高颜值的 Angular 18+ 日期时间选择器 / A minimalist, premium Date & Time Picker for Angular 18+, built with Signals.

Host: GitHub
URL: https://github.com/lanxuexing/ng-laydate
Owner: lanxuexing
License: mit
Created: 2025-12-29T17:54:37.000Z (5 months ago)
Default Branch: main
Last Pushed: 2025-12-30T17:36:03.000Z (5 months ago)
Last Synced: 2026-01-13T22:07:28.168Z (5 months ago)
Topics: angular, calendar, dark-mode, datepicker, laydate, modern-ui, ng-laydate, signals, timepicker, ui-library
Language: TypeScript
Homepage: https://lanxuexing.github.io/ng-laydate/
Size: 342 KB
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-angular - ng-laydate - A simple yet robust date & time picker for Angular 18+. (Third Party Components / Dates)
fucking-awesome-angular - ng-laydate - A simple yet robust date & time picker for Angular 18+. (Third Party Components / Dates)

README

          


# NgLaydate

A minimalist, powerful, and beautifully designed Date & Time Picker for Angular 18+, built with Signals.

[![NPM package](https://img.shields.io/npm/v/ng-laydate.svg?style=flat-square)](https://npmjs.org/package/ng-laydate)

[![GitHub Release Date](https://img.shields.io/github/release-date/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate/releases)

[![GitHub repo size](https://img.shields.io/github/repo-size/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate)

[![GitHub Stars](https://img.shields.io/github/stars/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate/stargazers)

[![NPM downloads](http://img.shields.io/npm/dm/ng-laydate.svg?style=flat-square)](https://npmjs.org/package/ng-laydate)

[![CI/CD](https://github.com/lanxuexing/ng-laydate/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/lanxuexing/ng-laydate/actions)

[![GitHub license](https://img.shields.io/github/license/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate/blob/main/LICENSE)

[![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=flat-square&logo=angular&logoColor=white)](https://angular.dev)

[![Signals](https://img.shields.io/badge/Signals-optimized-blue.svg?style=flat-square&logo=dynamic-365&logoColor=white)](https://angular.dev/guide/signals)

[![Code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[中文版](./README.zh-CN.md) | English

## 🔗 Live Demo

Check out the component in action: **[https://lanxuexing.github.io/ng-laydate/](https://lanxuexing.github.io/ng-laydate/)**



---

## ✨ Features

- 🚀 **Signals-Based**: High performance and reactive by design.

- 📅 **Comprehensive Modes**: Supports `year`, `month`, `date`, `time`, and `datetime`.

- 🔗 **Range Selection**: Simple or linked range selection (consecutive months).

- ⚡ **Shortcuts**: Customizable quick-selection buttons (sidebar or footer).

- 🎨 **Rich Themes**: Includes `default`, `molv` (teal), `grid`, `circle`, `dark`, and a special `fullpanel` (side-by-side) theme.

- 🕒 **Precision Control**: Intelligent H:M:S column visibility and auto-scrolling.

- 🌏 **Internationalization**: Full support for Chinese (`cn`) and English (`en`).

- 🚩 **Special Days**: Built-in Gregorian festivals and customizable Holiday/Workday markers.

- 🖋️ **Custom Content**: Flexible cell rendering via `cellRender` or `mark` functions.

- ⚡ **Performance**: Optimized rendering engine with smart diffing and `requestAnimationFrame` for smooth 60fps interactions.

- 🖥️ **SSR Ready**: Fully compatible with Angular Universal / Server-Side Rendering (SSR).

- 🌓 **Dark Mode**: Premium dark theme support.

- 📝 **Form Support**: Full two-way binding support for Template-driven and Reactive Forms (`ControlValueAccessor`).

## 📦 Installation

This component is available as an Angular Library.

```bash

npm install ng-laydate

```

## 🚀 Quick Start

### 1. Import Directive

Register `NgLaydateDirective` in your standalone component or module.

```typescript

import { NgLaydateDirective } from 'ng-laydate';

@Component({

  standalone: true,

  imports: [NgLaydateDirective, ...]

})

export class MyComponent {}

```

### 1. Directive Usage (Recommended)

Just add the `[laydate]` directive to any input element.

```html

```

### 2. Forms Support (Two-way Binding)

The component fully implements `ControlValueAccessor`, allowing you to use `ngModel` or `formControlName` seamlessly.

#### Template-driven Form

```html

```

#### Reactive Form

```html

  

```

### 3. Component Usage

Use the component directly for static or embedded pickers.

```html

```

## ⚙️ Configuration (LaydateConfig)

| Property | Type | Default | Description |

| :--- | :--- | :--- | :--- |

| `id` | `string` | - | Custom ID for the picker instance. |

| `type` | `'year'\|'month'\|'date'\|'time'\|'datetime'` | `'date'` | The type of selector to display. |

| `range` | `boolean\|string` | `false` | Enable range selection. Can be `true` (separator `-`) or a customized string (e.g. `' ~ '`). |

| `rangeLinked` | `boolean` | `false` | When `true`, left and right panels are linked (consecutive months). |

| `format` | `string` | `'yyyy-MM-dd'` | The date output format (e.g., `yyyy-MM-dd HH:mm:ss`). |

| `value` | `string \| Date` | - | Initial value of the picker. |

| `isInitValue` | `boolean` | `true` | Whether to automatically populate the initial value to the element. |

| `min` / `max` | `string \| Date \| number` | - | Min/Max selectable date. Supports string, Date, or numeric offset (`-7` is 7 days ago). |

| `trigger` | `string` | `'click'` | Event that triggers the picker (e.g., `focus`, `click`). |

| `theme` | `string \| string[]` | `'default'` | Theme name (`molv`, `grid`, `circle`, `fullpanel`, `dark`) or Hex color. |

| `shortcuts` | `Array` | - | Adv shortcuts (e.g., `[{text: 'Today', value: new Date()}]`). |

| `shorthand` | `Record` | - | Simple shortcuts (e.g., `{'yesterday': '2024-01-01'}`). |

| `btns` | `string[]` | `['clear', 'now', 'confirm']` | Footer buttons to display and their order. |

| `lang` | `'cn' \| 'en'` | `'cn'` | Language toggle. |

| `weekStart` | `number` | `0` | Start of the week (0-6, 0 is Sunday). |

| `darkMode` | `boolean` | `false` | Force enable dark mode regardless of theme. |

| `show` | `boolean` | `false` | Whether to show the picker immediately on render. |

| `showBottom` | `boolean` | `true` | Whether to display the footer. |

| `isPreview` | `boolean` | `true` | Show the live selection preview in the footer. |

| `autoConfirm` | `boolean` | `true` | Automatically confirm and close on selection (single mode only). |

| `calendar` | `boolean` | `false` | Show ISO calendar (festivals/solar terms). |

| `mark` | `Record \| Function` | - | Mark days (e.g., `{'0-0-15': 'Mid'}`). |

| `disabledDate` | `Function` | - | Callback for disabling specific dates. Returns `true` to disable. |

| `disabledTime` | `Function` | - | Callback for disabling specific hours/minutes/seconds. |

| `cellRender` | `Function` | - | Custom renderer for date cells (inserting HTML). |

| `formatToDisplay` | `Function` | - | Formats the value for input box display only. |

| `holidays` | `[string[], string[]]` | - | Highlight holidays/workdays. Format: `[[holidys], [workdays]]`. |

| `shade` | `boolean \| number` | - | Show background overlay or set its opacity. |

| `zIndex` | `number` | `66666666` | The CSS z-index of the picker. |

| `position` | `'absolute'\|'fixed'\|'static'` | `'absolute'` | The positioning strategy. |

## 🔔 Callbacks

- `ready`: Triggered when the picker is rendered.

- `change`: Triggered whenever a value changes.

- `done`: Triggered when selection is confirmed.

- `close`: Triggered when the picker is closed.

- `onConfirm` / `onNow` / `onClear`: Triggered on footer button clicks.

## 🌈 Themes & Aesthetics

The component supports a variety of visual styles to match your application:

- **Dark**: Deep dark mode for professional dashboards.

> [!TIP]

> **Custom Colors**: Pass any hex color to `theme` (e.g., `{theme: '#722ed1'}`) to instantly brand the component to match your application.

## 🛠 Development

This repository is structured as an Angular Workspace.

- **Library Path**: `projects/ng-laydate`

- **Demo Path**: `projects/laydate-demo`

### Scripts

- `npm start`: Run the demo application.

- `npm run build:lib`: Build the library for production.

- `npm run build:demo`: Build the demo application.

- `npm run build:all`: Build everything in one go.

---

For more complex examples and advanced usage, please refer to the [demo source code](https://github.com/lanxuexing/ng-laydate/blob/main/projects/laydate-demo/src/app/app.html).

Built with ❤️ for the Angular Community.

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/lanxuexing/ng-laydate

Awesome Lists containing this project

README