ngxsmk-datepicker 2.0.3 → 2.0.5

package/README.md

@@ -7,7 +7,7 @@
 
 **npm i ngxsmk-datepicker**
 
-> **Stable Version**: `2.0.3` is the current stable release. For production use, install the latest version from npm.
+> **Stable Version**: `2.0.5` is the current stable release. For production use, install the latest version from npm.
 > 
 > ⚠️ **Warning**: Version `1.9.26` contains broken styles. If you are using `1.9.26`, please upgrade to `1.9.28` or downgrade to `1.9.25` immediately.
 
@@ -33,6 +33,7 @@ Built with Angular Signals for optimal performance and a clean, declarative API.
 ## **✨ Features**
 
 * **Multiple Selection Modes**: Supports `single`, `range`, and `multiple` date selection.
+* **Smart Range Reselection**: Clicking the start date again after selecting a complete range clears only the end date, allowing quick range adjustments without clearing the entire selection.
 * **Inline and Popover Display**: Can be rendered inline or as a popover with automatic mode detection.
 * **Light and Dark Themes**: Includes built-in support for light and dark modes.
 * **Holiday Marking**: Automatically mark and disable holidays using a custom `HolidayProvider`.
@@ -127,7 +128,7 @@ For details, see [CONTRIBUTING.md](https://github.com/NGXSMK/ngxsmk-datepicker/b
 
 Install the package using npm:
 
-    npm install ngxsmk-datepicker@2.0.3  
+    npm install ngxsmk-datepicker@2.0.5  
 
 ## **Usage**
 
@@ -488,6 +489,26 @@ export class PlainFormComponent {
 </form>
 ```
 
+### **Form Validation**
+
+By default, the datepicker input is `readonly` to prevent invalid date strings and force selection via the calendar. However, **browsers do not validate `readonly` fields** during native form submission.
+
+**Behavior:**
+- Native browser validation (e.g., blocking submit on `required` fields) will **NOT** trigger on the datepicker by default.
+- Custom validation (e.g., Angular validators) works normally but often only shows errors after the control is "touched".
+
+**Solutions:**
+
+1. **Enable Typing (Recommended for Native Validation):**
+   Set `[allowTyping]="true"` to make the input standard editable field. This enables native browser validation tooltips and submit-blocking.
+   ```html
+   <ngxsmk-datepicker [allowTyping]="true" required ...></ngxsmk-datepicker>
+   ```
+
+2. **Custom Validation Logic:**
+   If you prefer the readonly behavior, ensure your form submission handler explicitly checks `form.invalid` before proceeding, as the browser won't stop the submit button click.
+
+
 ## **⚙️ API Reference**
 
 ### **Inputs**
@@ -506,6 +527,8 @@ export class PlainFormComponent {
 | minuteInterval | number                                             | 1                     | Interval for minute dropdown options.                                                                         |
 | showTime       | boolean                                            | false                 | Enables the hour/minute/AM/PM selection section.                                                              |
 | timeOnly       | boolean                                            | false                 | Display time picker only (no calendar). Automatically enables `showTime`. Perfect for time selection scenarios. |
+| allowTyping    | boolean                                            | false                 | Enable manual typing in the input field. Required for native validation. | `[allowTyping]="true"` |
+| displayFormat  | string                                             | null                  | Custom date format string (e.g., 'MM/DD/YYYY'). | `displayFormat="DD.MM.YYYY"` |
 | showCalendarButton | boolean                                        | false                 | Show/hide the calendar icon button. When `false`, users can still open calendar by clicking the input field. |
 | value          | DatepickerValue                                    | null                  | Programmatic value setting. Set the datepicker value from code (useful for server-side API data).            |
 | startAt        | DateInput                                          | null                  | The date to initially center the calendar view on.                                                            |

package/docs/API.md

@@ -55,6 +55,8 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | `inline` | `boolean \| 'always' \| 'auto'` | `false` | Stable | Inline display mode | `[inline]="true"` or `inline="auto"` |
 | `showTime` | `boolean` | `false` | Stable | Show time selection | `[showTime]="true"` |
 | `timeOnly` | `boolean` | `false` | Stable | Display time picker only (no calendar). Automatically enables `showTime`. | `[timeOnly]="true"` |
+| `allowTyping` | `boolean` | `false` | Stable | Enable manual typing in the input field. Required for native validation. | `[allowTyping]="true"` |
+| `displayFormat` | `string` | `null` | Stable | Custom date format string (e.g., 'MM/DD/YYYY'). | `displayFormat="DD.MM.YYYY"` |
 | `showCalendarButton` | `boolean` | `true` | Stable | Show/hide the calendar icon button. When `false`, users can still open calendar by clicking the input field. | `[showCalendarButton]="false"` |
 | `minuteInterval` | `number` | `1` | Stable | Minute selection interval | `[minuteInterval]="15"` |
 | `showRanges` | `boolean` | `true` | Stable | Show predefined ranges (range mode) | `[showRanges]="true"` |
@@ -2180,7 +2182,7 @@ type DateInput =
 ```
 
 
-### SignalFormField (v2.0.3+)
+### SignalFormField (v2.0.5+)
 
 **Status**: Stable
 
@@ -2190,7 +2192,7 @@ Type representing a signal-based form field.
 type SignalFormField = any; // Compatible with Angular 21 FieldTree
 ```
 
-### SignalFormFieldConfig (v2.0.3+)
+### SignalFormFieldConfig (v2.0.5+)
 
 **Status**: Stable
 

package/docs/signal-forms.md

@@ -113,7 +113,7 @@ export class TwoWayComponent {
 }
 ```
 
-### Signal Field Resolution (v2.0.3+)
+### Signal Field Resolution (v2.0.5+)
 
 The datepicker includes a robust resolution mechanism for signal-based fields. It can handle:
 - **Direct Signals**: A signal that contains the field configuration.
@@ -136,7 +136,7 @@ const config: SignalFormFieldConfig = {
 };
 ```
 
-**TypeScript Compatibility (v2.0.3+):**
+**TypeScript Compatibility (v2.0.5+):**
 
 The datepicker is fully compatible with Angular 21+ `FieldTree<string | Date | null, string>` structure. The types accept:
 - `WritableSignal<Date | null>` for date values
@@ -321,6 +321,13 @@ export class ValidatedFormComponent {
 }
 ```
 
+### Note on Native Validation
+By default, the datepicker input is `readonly`. Browsers do not validate `readonly` fields. To enable native browser validation (e.g., blocking submit on empty required fields), set `[allowTyping]="true"`.
+
+```html
+<ngxsmk-datepicker [field]="myForm.date" [allowTyping]="true" required ...></ngxsmk-datepicker>
+```
+
 ## Date Range Forms
 
 For date range selection:

package/fesm2022/ngxsmk-datepicker.mjs

@@ -2134,6 +2134,20 @@ class FieldSyncService {
     getLastKnownValue() {
         return this._lastKnownFieldValue;
     }
+    markAsTouched(fieldInput) {
+        const field = this.resolveField(fieldInput);
+        if (!field || typeof field !== 'object') {
+            return;
+        }
+        try {
+            if (typeof field.markAsTouched === 'function') {
+                field.markAsTouched();
+            }
+        }
+        catch {
+            // Ignore errors when marking as touched
+        }
+    }
     cleanup() {
         if (this._fieldEffectRef) {
             this._fieldEffectRef.destroy();
@@ -5473,6 +5487,9 @@ class NgxsmkDatepickerComponent {
         this.valueChange.emit(normalizedVal);
         this.onChange(normalizedVal);
         this.onTouched();
+        if (this._field) {
+            this.fieldSyncService.markAsTouched(this._field);
+        }
         if (!this.isInlineMode && val !== null && !this.timeOnly) {
             if (this.mode === 'single' || (this.mode === 'range' && this.startDate && this.endDate)) {
                 this.isCalendarOpen = false;
@@ -6741,6 +6758,9 @@ class NgxsmkDatepickerComponent {
             this._focused = false;
             this.stateChanges.next();
             this.onTouched();
+            if (this._field) {
+                this.fieldSyncService.markAsTouched(this._field);
+            }
         }
         if (!this.allowTyping)
             return;
@@ -7213,7 +7233,17 @@ class NgxsmkDatepickerComponent {
             }
             const dayTime = getStartOfDay(day).getTime();
             const startTime = this.startDate ? getStartOfDay(this.startDate).getTime() : null;
-            if (!this.startDate || (this.startDate && this.endDate)) {
+            // Check if clicking on start date when both start and end dates exist
+            if (this.startDate && this.endDate && dayTime === startTime) {
+                // Clear the end date, keep the start date
+                this.endDate = null;
+                this.hoveredDate = null;
+                this._invalidateMemoCache();
+                // Emit the partial range (start only, no end)
+                this.emitValue({ start: this.startDate, end: null });
+                this.scheduleChangeDetection();
+            }
+            else if (!this.startDate || (this.startDate && this.endDate)) {
                 this.startDate = this.applyTimeIfNeeded(day);
                 this.endDate = null;
                 this.hoveredDate = null;
@@ -7229,7 +7259,7 @@ class NgxsmkDatepickerComponent {
                     this.scheduleChangeDetection();
                 }
                 else if (dayTime === startTime) {
-                    // No action needed when dayTime equals startTime
+                    // No action needed when dayTime equals startTime (start date clicked again, no end date selected yet)
                 }
                 else {
                     const potentialEndDate = this.applyTimeIfNeeded(day);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxsmk-datepicker",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "author": {
     "name": "Sachin Dilshan",
     "url": "https://www.linkedin.com/in/sachindilshan/"

package/types/ngxsmk-datepicker.d.ts

@@ -184,6 +184,7 @@ type SignalFormFieldConfig = {
     setValue?: (value: DatepickerValue | string) => void;
     updateValue?: (updater: () => DatepickerValue | string) => void;
     markAsDirty?: () => void;
+    markAsTouched?: () => void;
 };
 type SignalFormField = any;
 interface FieldSyncCallbacks {
@@ -212,6 +213,7 @@ declare class FieldSyncService {
     syncFieldValue(fieldInput: SignalFormField | Signal<SignalFormField> | (() => unknown) | unknown, callbacks: FieldSyncCallbacks): boolean;
     updateFieldFromInternal(value: DatepickerValue, fieldInput: SignalFormField | Signal<SignalFormField> | (() => unknown) | unknown): void;
     getLastKnownValue(): DatepickerValue | undefined;
+    markAsTouched(fieldInput: SignalFormField | Signal<SignalFormField> | (() => unknown) | unknown): void;
     cleanup(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldSyncService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FieldSyncService>;