{"id":35313453,"url":"https://github.com/lanxuexing/ng-laydate","last_synced_at":"2026-01-19T17:05:03.995Z","repository":{"id":331004356,"uuid":"1124842119","full_name":"lanxuexing/ng-laydate","owner":"lanxuexing","description":"📅 极简、强大、高颜值的 Angular 18+ 日期时间选择器 / A minimalist, premium Date \u0026 Time Picker for Angular 18+, built with Signals.","archived":false,"fork":false,"pushed_at":"2025-12-30T17:36:03.000Z","size":350,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T22:07:28.168Z","etag":null,"topics":["angular","calendar","dark-mode","datepicker","laydate","modern-ui","ng-laydate","signals","timepicker","ui-library"],"latest_commit_sha":null,"homepage":"https://lanxuexing.github.io/ng-laydate/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lanxuexing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-29T17:54:37.000Z","updated_at":"2026-01-04T21:25:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lanxuexing/ng-laydate","commit_stats":null,"previous_names":["lanxuexing/ng-laydate"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/lanxuexing/ng-laydate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanxuexing%2Fng-laydate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanxuexing%2Fng-laydate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanxuexing%2Fng-laydate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanxuexing%2Fng-laydate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lanxuexing","download_url":"https://codeload.github.com/lanxuexing/ng-laydate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanxuexing%2Fng-laydate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28577108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T16:29:19.148Z","status":"ssl_error","status_checked_at":"2026-01-19T16:29:17.772Z","response_time":67,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","calendar","dark-mode","datepicker","laydate","modern-ui","ng-laydate","signals","timepicker","ui-library"],"created_at":"2025-12-30T18:05:40.558Z","updated_at":"2026-01-19T17:05:03.989Z","avatar_url":"https://github.com/lanxuexing.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Dates"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# NgLaydate\n\nA minimalist, powerful, and beautifully designed Date \u0026 Time Picker for Angular 18+, built with Signals.\n\n[![NPM package](https://img.shields.io/npm/v/ng-laydate.svg?style=flat-square)](https://npmjs.org/package/ng-laydate)\n[![GitHub Release Date](https://img.shields.io/github/release-date/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate/releases)\n[![GitHub repo size](https://img.shields.io/github/repo-size/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate)\n[![GitHub Stars](https://img.shields.io/github/stars/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate/stargazers)\n[![NPM downloads](http://img.shields.io/npm/dm/ng-laydate.svg?style=flat-square)](https://npmjs.org/package/ng-laydate)\n[![CI/CD](https://github.com/lanxuexing/ng-laydate/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/lanxuexing/ng-laydate/actions)\n[![GitHub license](https://img.shields.io/github/license/lanxuexing/ng-laydate.svg?style=flat-square)](https://github.com/lanxuexing/ng-laydate/blob/main/LICENSE)\n[![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=flat-square\u0026logo=angular\u0026logoColor=white)](https://angular.dev)\n[![Signals](https://img.shields.io/badge/Signals-optimized-blue.svg?style=flat-square\u0026logo=dynamic-365\u0026logoColor=white)](https://angular.dev/guide/signals)\n[![Code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n[中文版](./README.zh-CN.md) | English\n\n## 🔗 Live Demo\nCheck out the component in action: **[https://lanxuexing.github.io/ng-laydate/](https://lanxuexing.github.io/ng-laydate/)**\n\n\u003c/div\u003e\n\n---\n\n## ✨ Features\n\n- 🚀 **Signals-Based**: High performance and reactive by design.\n- 📅 **Comprehensive Modes**: Supports `year`, `month`, `date`, `time`, and `datetime`.\n- 🔗 **Range Selection**: Simple or linked range selection (consecutive months).\n- ⚡ **Shortcuts**: Customizable quick-selection buttons (sidebar or footer).\n- 🎨 **Rich Themes**: Includes `default`, `molv` (teal), `grid`, `circle`, `dark`, and a special `fullpanel` (side-by-side) theme.\n- 🕒 **Precision Control**: Intelligent H:M:S column visibility and auto-scrolling.\n- 🌏 **Internationalization**: Full support for Chinese (`cn`) and English (`en`).\n- 🚩 **Special Days**: Built-in Gregorian festivals and customizable Holiday/Workday markers.\n- 🖋️ **Custom Content**: Flexible cell rendering via `cellRender` or `mark` functions.\n- ⚡ **Performance**: Optimized rendering engine with smart diffing and `requestAnimationFrame` for smooth 60fps interactions.\n- 🖥️ **SSR Ready**: Fully compatible with Angular Universal / Server-Side Rendering (SSR).\n- 🌓 **Dark Mode**: Premium dark theme support.\n- 📝 **Form Support**: Full two-way binding support for Template-driven and Reactive Forms (`ControlValueAccessor`).\n\n## 📦 Installation\n\nThis component is available as an Angular Library.\n\n```bash\nnpm install ng-laydate\n```\n\n## 🚀 Quick Start\n\n### 1. Import Directive\n\nRegister `NgLaydateDirective` in your standalone component or module.\n\n```typescript\nimport { NgLaydateDirective } from 'ng-laydate';\n\n@Component({\n  standalone: true,\n  imports: [NgLaydateDirective, ...]\n})\nexport class MyComponent {}\n```\n\n### 1. Directive Usage (Recommended)\n\nJust add the `[laydate]` directive to any input element.\n\n```html\n\u003c!-- Simple Date Picker --\u003e\n\u003cinput type=\"text\" laydate placeholder=\"Select Date\"\u003e\n\n\u003c!-- Datetime Range with FullPanel Theme --\u003e\n\u003cinput type=\"text\" [laydate]=\"{\n  type: 'datetime',\n  range: true,\n}\" placeholder=\"Select DateTime Range\"\u003e\n```\n\n### 2. Forms Support (Two-way Binding)\n\nThe component fully implements `ControlValueAccessor`, allowing you to use `ngModel` or `formControlName` seamlessly.\n\n#### Template-driven Form\n```html\n\u003cinput type=\"text\" laydate [(ngModel)]=\"dateValue\"\u003e\n```\n\n#### Reactive Form\n```html\n\u003cform [formGroup]=\"myForm\"\u003e\n  \u003cinput type=\"text\" laydate formControlName=\"date\"\u003e\n\u003c/form\u003e\n```\n\n### 3. Component Usage\n\nUse the component directly for static or embedded pickers.\n\n```html\n\u003cng-laydate\n  [config]=\"{position: 'static', theme: 'molv'}\"\n  (done)=\"onDateSelected($event)\"\n/\u003e\n```\n\n## ⚙️ Configuration (LaydateConfig)\n\n| Property | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `id` | `string` | - | Custom ID for the picker instance. |\n| `type` | `'year'\\|'month'\\|'date'\\|'time'\\|'datetime'` | `'date'` | The type of selector to display. |\n| `range` | `boolean\\|string` | `false` | Enable range selection. Can be `true` (separator `-`) or a customized string (e.g. `' ~ '`). |\n| `rangeLinked` | `boolean` | `false` | When `true`, left and right panels are linked (consecutive months). |\n| `format` | `string` | `'yyyy-MM-dd'` | The date output format (e.g., `yyyy-MM-dd HH:mm:ss`). |\n| `value` | `string \\| Date` | - | Initial value of the picker. |\n| `isInitValue` | `boolean` | `true` | Whether to automatically populate the initial value to the element. |\n| `min` / `max` | `string \\| Date \\| number` | - | Min/Max selectable date. Supports string, Date, or numeric offset (`-7` is 7 days ago). |\n| `trigger` | `string` | `'click'` | Event that triggers the picker (e.g., `focus`, `click`). |\n| `theme` | `string \\| string[]` | `'default'` | Theme name (`molv`, `grid`, `circle`, `fullpanel`, `dark`) or Hex color. |\n| `shortcuts` | `Array` | - | Adv shortcuts (e.g., `[{text: 'Today', value: new Date()}]`). |\n| `shorthand` | `Record\u003cstring, string\u003e` | - | Simple shortcuts (e.g., `{'yesterday': '2024-01-01'}`). |\n| `btns` | `string[]` | `['clear', 'now', 'confirm']` | Footer buttons to display and their order. |\n| `lang` | `'cn' \\| 'en'` | `'cn'` | Language toggle. |\n| `weekStart` | `number` | `0` | Start of the week (0-6, 0 is Sunday). |\n| `darkMode` | `boolean` | `false` | Force enable dark mode regardless of theme. |\n| `show` | `boolean` | `false` | Whether to show the picker immediately on render. |\n| `showBottom` | `boolean` | `true` | Whether to display the footer. |\n| `isPreview` | `boolean` | `true` | Show the live selection preview in the footer. |\n| `autoConfirm` | `boolean` | `true` | Automatically confirm and close on selection (single mode only). |\n| `calendar` | `boolean` | `false` | Show ISO calendar (festivals/solar terms). |\n| `mark` | `Record \\| Function` | - | Mark days (e.g., `{'0-0-15': 'Mid'}`). |\n| `disabledDate` | `Function` | - | Callback for disabling specific dates. Returns `true` to disable. |\n| `disabledTime` | `Function` | - | Callback for disabling specific hours/minutes/seconds. |\n| `cellRender` | `Function` | - | Custom renderer for date cells (inserting HTML). |\n| `formatToDisplay` | `Function` | - | Formats the value for input box display only. |\n| `holidays` | `[string[], string[]]` | - | Highlight holidays/workdays. Format: `[[holidys], [workdays]]`. |\n| `shade` | `boolean \\| number` | - | Show background overlay or set its opacity. |\n| `zIndex` | `number` | `66666666` | The CSS z-index of the picker. |\n| `position` | `'absolute'\\|'fixed'\\|'static'` | `'absolute'` | The positioning strategy. |\n\n## 🔔 Callbacks\n\n- `ready`: Triggered when the picker is rendered.\n- `change`: Triggered whenever a value changes.\n- `done`: Triggered when selection is confirmed.\n- `close`: Triggered when the picker is closed.\n- `onConfirm` / `onNow` / `onClear`: Triggered on footer button clicks.\n\n## 🌈 Themes \u0026 Aesthetics\n\nThe component supports a variety of visual styles to match your application:\n\n- **Dark**: Deep dark mode for professional dashboards.\n\n\u003e [!TIP]\n\u003e **Custom Colors**: Pass any hex color to `theme` (e.g., `{theme: '#722ed1'}`) to instantly brand the component to match your application.\n\n## 🛠 Development\n\nThis repository is structured as an Angular Workspace.\n\n- **Library Path**: `projects/ng-laydate`\n- **Demo Path**: `projects/laydate-demo`\n\n### Scripts\n- `npm start`: Run the demo application.\n- `npm run build:lib`: Build the library for production.\n- `npm run build:demo`: Build the demo application.\n- `npm run build:all`: Build everything in one go.\n\n---\n\nFor 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).\n\nBuilt with ❤️ for the Angular Community.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flanxuexing%2Fng-laydate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flanxuexing%2Fng-laydate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flanxuexing%2Fng-laydate/lists"}