Ngx Smart Datetime Picker NG16

A lightweight, Angular 16-compatible smart date–time picker designed for classic NgModule applications (no standalone requirement). Simple API, flexible UI, and seamless integration with both template-driven and reactive forms.

⭐ Features

• 📅 Combined date + time selection with month/year pickers
• 🔢 Configurable year range limits
• 🔒 Read-only mode with optional focus-trigger opening
• 🎯 Two-way binding via ngModel or formControlName
• 🖱️ Optional calendar icon button
• 🚫 Prevent closing picker when selection is incomplete
• 🎉 Emits okClick and valueChange events

📦 Installation

npm install ngx-smart-datetime-picker-ng16

🚀 Usage (Angular 16 NgModule)

1. Import the module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxSmartDatetimePickerNg16Module } from 'ngx-smart-datetime-picker-ng16';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    NgxSmartDatetimePickerNg16Module
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  selectedDateTime?: Date;

  handleOkClick(value: Date | null) {
    console.log('Selected date-time:', value);
  }
}

2. Use the component in your template

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

Example: Prevent Closing with Incomplete Selection

When preventToClosePicker is set to true, the picker will:

• Prevent closing if a date is selected but time is not selected
• Show an error message ("Please select time") when user tries to close with incomplete selection
• Keep the picker open until both date and time are selected

This ensures users complete their selection before the picker can be dismissed.

🛠️ Inputs

| Input | Type | Default | Description | |----------------------|-----------------------------------|---------|-------------| | [(ngModel)] | Date \| null | - | Two-way binding for template-driven forms. | | formControlName | FormControl | - | Reactive-forms binding. | | yearRange | { min?: number; max?: number } | null | Restrict years shown in the picker. | | readonly | boolean | true | Prevents manual typing while still allowing calendar interactions. | | showOnFocus | boolean | false | Automatically opens the picker when the input gains focus. | | showIcon | boolean | true | Toggles the calendar icon trigger. | | preventToClosePicker | boolean | false | If true, prevents closing the picker when date is selected but time is not. Shows error message when user tries to close with incomplete selection. |

🎧 Outputs

| Output | Description | |---------------|-------------| | okClick | Fires when the user confirms the selection. | | valueChange | Emits whenever the internal date-time value changes. |

📝 License

MIT © 2025 Bugcleaner Team.