ngxsmk-datepicker 2.0.4 → 2.0.6

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

@@ -7233,7 +7233,31 @@ class NgxsmkDatepickerComponent {
             }
             const dayTime = getStartOfDay(day).getTime();
             const startTime = this.startDate ? getStartOfDay(this.startDate).getTime() : null;
-            if (!this.startDate || (this.startDate && this.endDate)) {
+            const endTime = this.endDate ? getStartOfDay(this.endDate).getTime() : null;
+            if (this.startDate && this.endDate && dayTime === startTime) {
+                this.endDate = null;
+                this.hoveredDate = null;
+                this._invalidateMemoCache();
+                this.emitValue({ start: this.startDate, end: null });
+                this.scheduleChangeDetection();
+            }
+            else if (this.startDate && this.endDate && dayTime === endTime) {
+                this.startDate = this.applyTimeIfNeeded(day);
+                this.endDate = null;
+                this.hoveredDate = null;
+                this._invalidateMemoCache();
+                this.emitValue({ start: this.startDate, end: null });
+                this.scheduleChangeDetection();
+            }
+            else if (this.startDate && this.endDate && dayTime > startTime && dayTime < endTime) {
+                this.startDate = this.applyTimeIfNeeded(day);
+                this.endDate = null;
+                this.hoveredDate = null;
+                this._invalidateMemoCache();
+                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;
@@ -7249,7 +7273,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.4",
+  "version": "2.0.6",
   "author": {
     "name": "Sachin Dilshan",
     "url": "https://www.linkedin.com/in/sachindilshan/"