@oneluiz/dual-datepicker 3.3.0 → 3.5.0

package/README.md

@@ -2,6 +2,8 @@
 
 A lightweight, zero-dependency date range picker for Angular 17+. Built with standalone components, Reactive Forms, and Angular Signals. No Angular Material required.
 
+> **🆕 NEW in v3.5.0**: [**Headless Architecture**](HEADLESS.md) - Use date range state WITHOUT the UI component. Perfect for SSR, services, and global dashboard filters! 🎯
+
 [![npm version](https://img.shields.io/npm/v/@oneluiz/dual-datepicker)](https://www.npmjs.com/package/@oneluiz/dual-datepicker)
 [![npm provenance](https://img.shields.io/badge/provenance-available-brightgreen)](https://www.npmjs.com/package/@oneluiz/dual-datepicker)
 ![license](https://img.shields.io/npm/l/@oneluiz/dual-datepicker)
@@ -17,6 +19,35 @@ npm install @oneluiz/dual-datepicker
 
 ---
 
+## 🌟 What's New
+
+### Headless Architecture (v3.5.0)
+
+Use date range logic **without the UI component**:
+
+```typescript
+// Inject the store anywhere - no UI needed!
+const rangeStore = inject(DualDateRangeStore);
+
+// Apply preset
+rangeStore.applyPreset('THIS_MONTH');
+
+// Use in API calls
+const range = rangeStore.range();
+http.get(`/api/sales?start=${range.start}&end=${range.end}`);
+```
+
+**Perfect for:**
+- 📊 Dashboard filters (control multiple charts)
+- 🏢 SSR applications
+- 🔄 Global state management
+- 🎯 Service-layer filtering
+- 📈 Analytics and BI tools
+
+**[📖 Read the Headless Architecture Guide →](HEADLESS.md)**
+
+---
+
 ## 📋 Table of Contents
 
 - [Features](#-features)
@@ -26,11 +57,13 @@ npm install @oneluiz/dual-datepicker
   - [Basic Usage](#basic-usage)
   - [Reactive Forms](#with-reactive-forms)
   - [Angular Signals](#with-angular-signals)
+  - [Headless Usage](#headless-usage-new) ⭐ NEW
 - [Advanced Features](#-advanced-features)
   - [Multi-Range Selection](#multi-range-support)
   - [Disabled Dates](#disabled-dates)
   - [Display Format](#display-format)
   - [Apply/Confirm Button](#applyconfirm-button)
+  - [Time Picker](#time-picker)
   - [Hover Range Preview](#hover-range-preview)
   - [Custom Presets](#custom-presets)
   - [Date Adapter System](#date-adapter-system)
@@ -168,6 +201,52 @@ dateRange = signal<DateRange | null>(null);
 </ngx-dual-datepicker>
 ```
 
+### Headless Usage (NEW) ⭐
+
+**Use date range state WITHOUT the UI component** - perfect for SSR, services, and global filters!
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { DualDateRangeStore } from '@oneluiz/dual-datepicker';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  template: `
+    <div class="dashboard">
+      <button (click)="setPreset('TODAY')">Today</button>
+      <button (click)="setPreset('THIS_MONTH')">This Month</button>
+      <p>{{ rangeText() }}</p>
+    </div>
+  `
+})
+export class DashboardComponent {
+  private rangeStore = inject(DualDateRangeStore);
+  private http = inject(HttpClient);
+  
+  // Expose signals for template
+  rangeText = this.rangeStore.rangeText;
+  
+  setPreset(key: string) {
+    this.rangeStore.applyPreset(key);
+    
+    // Use in API call
+    const range = this.rangeStore.range();
+    this.http.get(`/api/sales`, { 
+      params: { start: range.start, end: range.end } 
+    }).subscribe(data => console.log(data));
+  }
+}
+```
+
+**Benefits:**
+- ✅ No UI component needed
+- ✅ SSR-compatible
+- ✅ Global state management
+- ✅ Perfect for services and guards
+- ✅ Testable and deterministic
+
+**[📖 Full Headless Architecture Guide →](HEADLESS.md)** | **[💻 Code Examples →](HEADLESS_EXAMPLES.ts)**
+
 ---
 
 ## 🎯 Advanced Features
@@ -470,6 +549,109 @@ export class DashboardExample {
 | User control | Automatic | Explicit confirmation |
 | Best for | Simple forms | Dashboards, reports |
 
+---
+
+### Time Picker
+
+**Select precise datetime ranges with optional time picker.** Choose exact start and end times in addition to dates, with support for 12h/24h formats and configurable minute steps.
+
+#### Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { DateRange } from '@oneluiz/dual-datepicker';
+
+@Component({
+  template: `
+    <ngx-dual-datepicker
+      [enableTimePicker]="true"
+      (dateRangeChange)="onDateRangeChange($event)">
+    </ngx-dual-datepicker>
+  `
+})
+export class AppointmentComponent {
+  onDateRangeChange(range: DateRange) {
+    console.log('Start:', range.startDate, 'at', range.startTime);
+    console.log('End:', range.endDate, 'at', range.endTime);
+    // startTime and endTime are in 'HH:mm' format
+  }
+}
+```
+
+#### Configuration Options
+
+```typescript
+// 12-hour format with AM/PM
+<ngx-dual-datepicker
+  [enableTimePicker]="true"
+  timeFormat="12h"
+  defaultStartTime="09:00"
+  defaultEndTime="17:00"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+
+// 30-minute intervals
+<ngx-dual-datepicker
+  [enableTimePicker]="true"
+  [minuteStep]="30"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+
+// With Apply button for controlled changes
+<ngx-dual-datepicker
+  [enableTimePicker]="true"
+  [requireApply]="true"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+```
+
+#### DateRange with Time
+
+When `enableTimePicker` is true, the DateRange includes optional time properties:
+
+```typescript
+interface DateRange {
+  startDate: string;     // 'YYYY-MM-DD'
+  endDate: string;       // 'YYYY-MM-DD'
+  rangeText: string;     // Display text
+  startTime?: string;    // 'HH:mm' or 'HH:mm AM/PM'
+  endTime?: string;      // 'HH:mm' or 'HH:mm AM/PM'
+}
+```
+
+#### Configuration Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enableTimePicker` | boolean | `false` | Enable time selection |
+| `timeFormat` | `'12h'` \| `'24h'` | `'24h'` | Time display format |
+| `minuteStep` | number | `15` | Minute intervals (1, 5, 15, or 30) |
+| `defaultStartTime` | string | `'00:00'` | Default start time (HH:mm) |
+| `defaultEndTime` | string | `'23:59'` | Default end time (HH:mm) |
+
+#### Perfect Use Cases
+
+- 📅 **Appointment booking systems** - Schedule meetings with exact times
+- 🎫 **Event scheduling** - Create events with start and end times
+- 🏢 **Meeting planners** - Book conference rooms with time slots
+- 📊 **Time-based reporting** - Generate reports for specific time ranges
+- 👥 **Shift management** - Assign work shifts with precise times
+- 🎬 **Reservation systems** - Book resources with time constraints
+
+#### Key Features
+
+- ✅ Optional - disabled by default (backward compatible)
+- ✅ 12h (AM/PM) or 24h time format
+- ✅ Configurable minute steps (1, 5, 15, 30)
+- ✅ Default start/end times support
+- ✅ Works with all themes
+- ✅ Integrates with requireApply mode
+- ✅ Fully accessible with keyboard navigation
+
+**For complete documentation, see [TIME_PICKER.md](TIME_PICKER.md)**
+
+---
+
 ### Hover Range Preview
 
 **Automatic visual feedback while selecting dates.** Provides instant visual preview of the date range when hovering over dates before clicking to confirm.
@@ -759,6 +941,12 @@ spanishLocale: LocaleConfig = {
 | `disabledDates` | `Date[] \| ((date: Date) => boolean)` | `undefined` | Array of dates or function to disable specific dates |
 | `displayFormat` | `string` | `'D MMM'` | Format for displaying dates in input (tokens: YYYY, YY, MMMM, MMM, MM, M, DD, D) |
 | `requireApply` | `boolean` | `false` | Require Apply button confirmation before emitting changes |
+| `enableTimePicker` | `boolean` | `false` | Enable time selection |
+| `timeFormat` | `'12h' \| '24h'` | `'24h'` | Time display format (12-hour with AM/PM or 24-hour) |
+| `minuteStep` | `number` | `15` | Step for minute selector (1, 5, 15, or 30) |
+| `defaultStartTime` | `string` | `'00:00'` | Default start time in HH:mm format |
+| `defaultEndTime` | `string` | `'23:59'` | Default end time in HH:mm format |
+| `theme` | `ThemeType` | `'default'` | Theme preset: 'default', 'bootstrap', 'bulma', 'foundation', 'tailwind', 'custom' |
 | `enableKeyboardNavigation` | `boolean` | `true` | Enable keyboard navigation |
 | `inputBackgroundColor` | `string` | `'#fff'` | Input background color |
 | `inputTextColor` | `string` | `'#495057'` | Input text color |
@@ -809,6 +997,8 @@ interface DateRange {
   startDate: string;   // ISO format: 'YYYY-MM-DD'
   endDate: string;     // ISO format: 'YYYY-MM-DD'
   rangeText: string;   // Display text: 'DD Mon - DD Mon'
+  startTime?: string;  // Optional: 'HH:mm' or 'HH:mm AM/PM' (when enableTimePicker=true)
+  endTime?: string;    // Optional: 'HH:mm' or 'HH:mm AM/PM' (when enableTimePicker=true)
 }
 
 interface MultiDateRange {
@@ -1886,20 +2076,43 @@ export class ExampleComponent {
 
 Recently shipped:
 
+**v3.4.0:**
+- ✅ **Time Picker** - Select precise datetime ranges with 12h/24h format
+- ✅ **Configurable Minute Steps** - Choose 1, 5, 15, or 30-minute intervals
+- ✅ **Default Times** - Set default start/end times
+- ✅ **Full Theme Support** - Works seamlessly with all built-in themes
+
+**v3.3.0:**
+- ✅ **Theming System** - Pre-built themes for Bootstrap, Bulma, Foundation, Tailwind CSS, and Custom
+- ✅ **CSS Variables Support** - 13 customizable variables for branding
+- ✅ **Framework Integration** - Match your existing design system seamlessly
+
+**v3.2.0:**
+- ✅ **Hover Range Preview** - Visual feedback before confirming selection
+- ✅ **Apply/Confirm Button** - Require confirmation for enterprise dashboards
+- ✅ **Display Format** - Customize date display (DD/MM/YYYY, MM/DD/YYYY, etc.)
+- ✅ **Disabled Dates** - Block weekends, holidays, or custom logic
+
+**v3.1.0:**
+- ✅ **Complete Keyboard Navigation** - Arrow keys, Enter/Space, Tab, Escape, Home/End, PageUp/Down
+- ✅ **Full Accessibility Audit** - WCAG 2.1 Level AA compliance
+
+**v2.7.0:**
+- ✅ **Multi-range Support** - Select UNLIMITED date ranges (Material CAN'T do this!)
+
 **v2.6.0:**
-- ✅ **Flexible Preset System** - `getValue()` pattern for custom date logic (This month, Last month, Quarter to date, etc.)
+- ✅ **Flexible Preset System** - `getValue()` pattern for custom date logic
 - ✅ **Pre-built Preset Utilities** - CommonPresets for Dashboard, Reporting, Financial, Analytics
-- ✅ **Real Differentiator** - Perfect for ERP, BI, POS, and Reporting systems
 
 **v2.5.0:**
 - ✅ **Date Adapter System** - Support for DayJS, date-fns, Luxon, and custom date libraries
 
-Planned features and improvements:
+Planned features:
 
-- ⬜ **Complete keyboard navigation** - Arrow keys, Enter/Space, Tab, Escape
-- ⬜ **Full accessibility audit** - WCAG 2.1 AA compliance
-- ⬜ **Multi-range support** - Select multiple date ranges
-- ⬜ **Theming system** - Pre-built theme presets
+- ⬜ **Mobile Optimizations** - Enhanced touch gestures and responsive layout
+- ⬜ **Range Shortcuts** - Quick selection buttons (Today, This Week, etc.)
+- ⬜ **Time Constraints** - Min/max time validation and business hours
+- ⬜ **Multi-range + Time Picker** - Combined support for multiple datetime ranges
 
 ## 📄 License
 

package/core/dual-date-range.store.d.ts

@@ -0,0 +1,104 @@
+import * as i0 from "@angular/core";
+export interface DateRangeState {
+    start: string;
+    end: string;
+    startTime?: string;
+    endTime?: string;
+}
+export interface DateRangeConfig {
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    enableTimePicker?: boolean;
+    defaultStartTime?: string;
+    defaultEndTime?: string;
+}
+export declare class DualDateRangeStore {
+    private config;
+    private _startDate;
+    private _endDate;
+    private _leftMonth;
+    private _rightMonth;
+    private _selectingStart;
+    private _startTime;
+    private _endTime;
+    private _pendingStart;
+    private _pendingEnd;
+    private _hasPendingChanges;
+    readonly startDate: import("@angular/core").Signal<Date>;
+    readonly endDate: import("@angular/core").Signal<Date>;
+    readonly leftMonth: import("@angular/core").Signal<Date>;
+    readonly rightMonth: import("@angular/core").Signal<Date>;
+    readonly selectingStart: import("@angular/core").Signal<boolean>;
+    readonly startTime: import("@angular/core").Signal<string>;
+    readonly endTime: import("@angular/core").Signal<string>;
+    readonly hasPendingChanges: import("@angular/core").Signal<boolean>;
+    readonly range: import("@angular/core").Signal<DateRangeState>;
+    readonly isValid: import("@angular/core").Signal<boolean>;
+    readonly rangeText: import("@angular/core").Signal<string>;
+    /**
+     * Configure the store
+     */
+    configure(config: Partial<DateRangeConfig>): void;
+    /**
+     * Set start date (with validation)
+     */
+    setStart(date: Date | string | null): void;
+    /**
+     * Set end date (with validation)
+     */
+    setEnd(date: Date | string | null): void;
+    /**
+     * Set complete range at once
+     */
+    setRange(start: Date | string | null, end: Date | string | null): void;
+    /**
+     * Set pending selection (for requireApply mode)
+     */
+    setPendingStart(date: Date | string | null): void;
+    setPendingEnd(date: Date | string | null): void;
+    /**
+     * Apply pending changes
+     */
+    applyPending(): void;
+    /**
+     * Cancel pending changes
+     */
+    cancelPending(): void;
+    private clearPending;
+    /**
+     * Reset to empty state
+     */
+    reset(): void;
+    /**
+     * Apply a preset by key
+     */
+    applyPreset(presetKey: string, now?: Date): void;
+    /**
+     * Navigate left calendar month
+     */
+    setLeftMonth(date: Date): void;
+    /**
+     * Navigate right calendar month
+     */
+    setRightMonth(date: Date): void;
+    /**
+     * Set time values
+     */
+    setStartTime(time: string): void;
+    setEndTime(time: string): void;
+    /**
+     * Get current state as snapshot
+     */
+    getSnapshot(): DateRangeState;
+    /**
+     * Load state from snapshot
+     */
+    loadSnapshot(snapshot: DateRangeState): void;
+    private parseDate;
+    private getNextMonth;
+    private getPreviousMonth;
+    private formatDateShort;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DualDateRangeStore, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DualDateRangeStore>;
+}

package/core/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Core headless date range logic
+ * Import from here for clean barrel exports
+ */
+export * from './dual-date-range.store';
+export * from './preset.engine';
+export * from './range.validator';

package/core/preset.engine.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Headless Preset Engine
+ * Pure functions that resolve date ranges WITHOUT render dependency
+ * Perfect for SSR, global state, dashboard filters
+ */
+export interface RangePreset {
+    /**
+     * Resolve preset to actual date range
+     * @param now - Current date for deterministic calculation
+     */
+    resolve(now: Date): {
+        start: Date;
+        end: Date;
+    };
+}
+export interface PresetRange {
+    start: string;
+    end: string;
+}
+/**
+ * Registry of built-in presets
+ * Can be extended by consumers
+ */
+export declare class PresetEngine {
+    private presets;
+    constructor();
+    /**
+     * Register a custom preset
+     */
+    register(key: string, preset: RangePreset): void;
+    /**
+     * Resolve a preset to date range
+     */
+    resolve(key: string, now?: Date): PresetRange | null;
+    /**
+     * Get all available preset keys
+     */
+    getPresetKeys(): string[];
+    /**
+     * Register all built-in presets
+     */
+    private registerBuiltInPresets;
+}
+/**
+ * Create a custom preset from a function
+ */
+export declare function createPreset(resolver: (now: Date) => {
+    start: Date;
+    end: Date;
+}): RangePreset;
+/**
+ * Singleton preset engine instance
+ */
+export declare const presetEngine: PresetEngine;

package/core/range.validator.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Pure validation functions for date ranges
+ * No dependencies, no side effects - just logic
+ * Perfect for SSR, testing, and reusability
+ */
+export interface ValidationResult {
+    valid: boolean;
+    error?: string;
+}
+/**
+ * Validate that end date is not before start date
+ */
+export declare function validateRangeOrder(start: Date | null, end: Date | null): ValidationResult;
+/**
+ * Validate that date is within min/max bounds
+ */
+export declare function validateDateBounds(date: Date | null, minDate?: Date, maxDate?: Date): ValidationResult;
+/**
+ * Validate that a range is within bounds
+ */
+export declare function validateRangeBounds(start: Date | null, end: Date | null, minDate?: Date, maxDate?: Date): ValidationResult;
+/**
+ * Check if a date is disabled
+ */
+export declare function isDateDisabled(date: Date, disabledDates?: Date[] | ((date: Date) => boolean)): boolean;
+/**
+ * Apply bounds to a date (clamp it)
+ */
+export declare function applyBounds(date: Date, minDate?: Date, maxDate?: Date): Date;
+/**
+ * Parse ISO date string to Date object (deterministic)
+ */
+export declare function parseISODate(dateStr: string): Date | null;
+/**
+ * Format Date to ISO string (YYYY-MM-DD)
+ */
+export declare function formatISODate(date: Date | null): string;

package/dual-datepicker.component.d.ts

@@ -5,6 +5,8 @@ export interface DateRange {
     startDate: string;
     endDate: string;
     rangeText: string;
+    startTime?: string;
+    endTime?: string;
 }
 export interface MultiDateRange {
     ranges: DateRange[];
@@ -49,6 +51,11 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     disabledDates: Date[] | ((date: Date) => boolean) | undefined;
     displayFormat: string;
     requireApply: boolean;
+    enableTimePicker: boolean;
+    timeFormat: '12h' | '24h';
+    minuteStep: number;
+    defaultStartTime: string;
+    defaultEndTime: string;
     dateRangeChange: EventEmitter<DateRange>;
     dateRangeSelected: EventEmitter<DateRange>;
     multiDateRangeChange: EventEmitter<MultiDateRange>;
@@ -65,6 +72,12 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     pendingStartDate: string;
     pendingEndDate: string;
     hasPendingChanges: import("@angular/core").WritableSignal<boolean>;
+    startHour: number;
+    startMinute: number;
+    endHour: number;
+    endMinute: number;
+    showStartTimePicker: import("@angular/core").WritableSignal<boolean>;
+    showEndTimePicker: import("@angular/core").WritableSignal<boolean>;
     hoverDate: import("@angular/core").WritableSignal<string>;
     selectedRanges: import("@angular/core").WritableSignal<DateRange[]>;
     currentRangeIndex: import("@angular/core").WritableSignal<number>;
@@ -123,10 +136,25 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     private emitMultiChange;
     private emitMultiSelection;
     private getDateRangeValue;
+    toggleStartTimePicker(): void;
+    toggleEndTimePicker(): void;
+    incrementStartHour(): void;
+    decrementStartHour(): void;
+    incrementStartMinute(): void;
+    decrementStartMinute(): void;
+    incrementEndHour(): void;
+    decrementEndHour(): void;
+    incrementEndMinute(): void;
+    decrementEndMinute(): void;
+    formatTime(hour: number, minute: number): string;
+    parseTime(timeString: string): {
+        hour: number;
+        minute: number;
+    };
     writeValue(value: DateRange | null): void;
     registerOnChange(fn: (value: DateRange | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DualDatepickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DualDatepickerComponent, "ngx-dual-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "showPresets": { "alias": "showPresets"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "multiRange": { "alias": "multiRange"; "required": false; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; }; "closeOnPresetSelection": { "alias": "closeOnPresetSelection"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "enableKeyboardNavigation": { "alias": "enableKeyboardNavigation"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "inputBackgroundColor": { "alias": "inputBackgroundColor"; "required": false; }; "inputTextColor": { "alias": "inputTextColor"; "required": false; }; "inputBorderColor": { "alias": "inputBorderColor"; "required": false; }; "inputBorderColorHover": { "alias": "inputBorderColorHover"; "required": false; }; "inputBorderColorFocus": { "alias": "inputBorderColorFocus"; "required": false; }; "inputPadding": { "alias": "inputPadding"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "requireApply": { "alias": "requireApply"; "required": false; }; }, { "dateRangeChange": "dateRangeChange"; "dateRangeSelected": "dateRangeSelected"; "multiDateRangeChange": "multiDateRangeChange"; "multiDateRangeSelected": "multiDateRangeSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DualDatepickerComponent, "ngx-dual-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "showPresets": { "alias": "showPresets"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "multiRange": { "alias": "multiRange"; "required": false; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; }; "closeOnPresetSelection": { "alias": "closeOnPresetSelection"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "enableKeyboardNavigation": { "alias": "enableKeyboardNavigation"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "inputBackgroundColor": { "alias": "inputBackgroundColor"; "required": false; }; "inputTextColor": { "alias": "inputTextColor"; "required": false; }; "inputBorderColor": { "alias": "inputBorderColor"; "required": false; }; "inputBorderColorHover": { "alias": "inputBorderColorHover"; "required": false; }; "inputBorderColorFocus": { "alias": "inputBorderColorFocus"; "required": false; }; "inputPadding": { "alias": "inputPadding"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "requireApply": { "alias": "requireApply"; "required": false; }; "enableTimePicker": { "alias": "enableTimePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "defaultStartTime": { "alias": "defaultStartTime"; "required": false; }; "defaultEndTime": { "alias": "defaultEndTime"; "required": false; }; }, { "dateRangeChange": "dateRangeChange"; "dateRangeSelected": "dateRangeSelected"; "multiDateRangeChange": "multiDateRangeChange"; "multiDateRangeSelected": "multiDateRangeSelected"; }, never, never, true, never>;
 }