Ngx Smart Datetime Picker

A lightweight, Angular 19-compatible, fully customizable smart date–time picker component.
Built for modern Angular standalone applications — simple API, flexible UI, and easy integration.

⭐ Features

• 📅 Date + Time selection
• ⌚ Configurable year range
• 🔒 Read-only + focus-trigger mode
• 🎯 Two-way binding using ngModel
• 🖱️ Optional calendar icon button
• 🎉 Emits events like okClick

📦 Installation

npm install ngx-smart-datetime-picker

🚀 Usage (Angular 19 Standalone)

1. Import the library in your component

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgxSmartDatetimePickerModule } from 'ngx-smart-datetime-picker';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [FormsModule, NgxSmartDatetimePickerModule],
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  selectedDateTime: any;

  handleOkClick(value: any) {
    console.log('Selected DateTime:', value);
  }
}

2. Add the component in HTML

<ngx-smart-datetime-picker
  [(ngModel)]="selectedDateTime"
  [yearRange]="{ min: 2000, max: 2040 }"
  [readonly]="true"
  [showOnFocus]="true"
  [showIcon]="true"
  (okClick)="handleOkClick($event)">
</ngx-smart-datetime-picker>

🛠️ Inputs

| Input | Type | Description | | --------- | --------------------------- | ----------------------------------- | | ngModel | any | Two-way bound selected datetime | | yearRange | {min: number, max: number} | Restrict selectable years | | readonly | boolean | Makes input uneditable but clickable | | showOnFocus | boolean | Opens picker when input gets focus | | showIcon | boolean | Shows calendar icon inside input |

🎧 Outputs

| Output | Description | | -------- | --------------------------------------- | | okClick | Fired when user confirms datetime selection |

📝 License

MIT © 2025 Ngx Smart Datetime Picker Team