ngxsmk-datepicker 1.3.4 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +35 -25
  2. package/fesm2022/ngxsmk-datepicker.mjs +526 -206
  3. package/fesm2022/ngxsmk-datepicker.mjs.map +1 -1
  4. package/index.d.ts +63 -21
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,9 +1,13 @@
1
1
  # **ngxsmk-datepicker**
2
2
 
3
- ngxsmk-datepicker – A modern, powerful, and fully customizable date and date-range picker component designed for Angular 17+ and Ionic applications. Seamlessly integrates with both frameworks, offering a flexible, mobile-friendly UI and advanced features to enhance date selection experiences in your apps.
3
+ npm i ngxsmk-datepicker
4
+
5
+ gxsmk-datepicker – A modern, powerful, and fully customizable date and date-range picker component designed for Angular 17+ and Ionic applications. Seamlessly integrates with both frameworks, offering a flexible, mobile-friendly UI and advanced features to enhance date selection experiences in your apps.
4
6
 
5
7
  * Github: [https://github.com/toozuuu/ngxsmk-datepicker](https://github.com/toozuuu/ngxsmk-datepicker)
6
8
 
9
+ Built with Angular Signals for optimal performance and a clean, declarative API. The component is standalone and has zero dependencies, making it lightweight and easy to integrate into any project.
10
+
7
11
  ## Screenshots
8
12
 
9
13
  <p align="left">
@@ -16,15 +20,16 @@ ngxsmk-datepicker – A modern, powerful, and fully customizable date and date-r
16
20
 
17
21
  ## **✨ Features**
18
22
 
19
- * **Date & Time Selection**: Supports `single` date or `range` mode selection, including optional time inputs.
23
+ * **Multiple Selection Modes**: Supports `single`, `range`, and `multiple` date selection.
24
+ * **Inline and Popover Display**: Can be rendered inline or as a popover with automatic mode detection.
25
+ * **Light and Dark Themes**: Includes built-in support for light and dark modes.
26
+ * **Holiday Marking**: Automatically mark and disable holidays using a custom `HolidayProvider`.
27
+ * **Date & Time Selection**: Supports optional time inputs with configurable minute intervals.
20
28
  * **12h/24h Time Support**: Uses internal 24-hour timekeeping but displays a user-friendly **12-hour clock with AM/PM toggle**.
21
- * **Dynamic Time Intervals**: Configure minute selection steps (e.g., 5, 15, 30 minutes) using the `minuteInterval` input.
22
- * **Time Restriction**: Time controls are validated against `minDate` to prevent selecting times in the past for the current day.
23
29
  * **Predefined Date Ranges**: Offers quick selection of common ranges (e.g., "Last 7 Days").
24
30
  * **Advanced Localization (i18n)**: Automatically handles month/weekday names and week start days based on the browser's locale.
25
31
  * **Custom Styling**: All component elements are prefixed with `ngxsmk-` and themeable via CSS custom properties.
26
- * **Rounded Range Borders**: Visually highlights the selected date range with rounded start/end cells.
27
- * **Flexible Inputs**: Accepts native `Date` objects for initialization.
32
+ * **Zero Dependencies**: The component is standalone and lightweight.
28
33
 
29
34
  ## **🚀 Installation**
30
35
 
@@ -41,7 +46,7 @@ ngxsmk-datepicker is a standalone component, so you can import it directly into
41
46
  In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponent.
42
47
 
43
48
  import { Component } from '@angular/core';
44
- import { NgxsmkDatepickerComponent, DateRange } from 'ngxsmk-datepicker';
49
+ import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';
45
50
 
46
51
  @Component({
47
52
  selector: 'app-root',
@@ -54,7 +59,7 @@ In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponen
54
59
  public myRanges: DateRange = {
55
60
  'Today': [new Date(), new Date()],
56
61
  'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],
57
- 'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() \+ 1, 0)],
62
+ 'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],
58
63
  };
59
64
 
60
65
  // Example for disabling weekends
@@ -63,14 +68,14 @@ In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponen
63
68
  return day === 0 || day === 6; // Sunday or Saturday
64
69
  };
65
70
 
66
- onDateChange(value: Date | { start: Date; end: Date }) {
71
+ onDateChange(value: Date | { start: Date; end: Date } | Date[]) {
67
72
  console.log('Date changed:', value);
68
73
  }
69
74
  }
70
75
 
71
- #### **2\. Add it to Your Template**
76
+ #### **2. Add it to Your Template**
72
77
 
73
- Use the \<ngxsmk-datepicker\> selector in your HTML template.
78
+ Use the `<ngxsmk-datepicker>` selector in your HTML template.
74
79
 
75
80
  <!-- app.component.html -->
76
81
 
@@ -84,7 +89,8 @@ Use the \<ngxsmk-datepicker\> selector in your HTML template.
84
89
  [minDate]="today"
85
90
  [isInvalidDate]="isWeekend"
86
91
  [locale]="'en-US'"
87
- [theme]="'light'"
92
+ [theme]="'light'"
93
+ [inline]="'auto'"
88
94
  (valueChange)="onDateChange($event)"
89
95
  ></ngxsmk-datepicker>
90
96
 
@@ -94,24 +100,28 @@ Use the \<ngxsmk-datepicker\> selector in your HTML template.
94
100
 
95
101
  | Property | Type | Default | Description |
96
102
  |:---------------|:---------------------------------------------------|:----------------------|:--------------------------------------------------------------------------------------------------------------|
97
- | mode | 'single' | 'range' | 'single' |
103
+ | mode | 'single' \| 'range' \| 'multiple' | 'single' | The selection mode. |
104
+ | inline | boolean \| 'always' \| 'auto' | false | Controls the display mode. `true` or `'always'` for inline, `'auto'` for responsive. |
98
105
  | locale | string | navigator.language | Sets the locale for language and regional formatting (e.g., 'en-US', 'de-DE'). |
99
- | theme | 'light' | 'dark' | 'light' |
106
+ | theme | 'light' \| 'dark' | 'light' | The color theme. |
100
107
  | showRanges | boolean | true | If true, displays the predefined ranges panel when in 'range' mode. |
101
- | minDate | DateInput | null | null | The earliest selectable date. Accepts Date, string, moment, or dayjs objects. |
102
- | maxDate | DateInput | null | null | The latest selectable date. Accepts Date, string, moment, or dayjs objects. |
103
- | isInvalidDate | (date: Date) \=\> boolean | () \=\> false | A function to programmatically disable specific dates. Returns true if the date should be disabled. |
104
- | ranges | DateRange | null | null | An object of predefined date ranges. The key is the label, and the value is a \[start, end\] tuple. |
105
- | minuteInterval | number | 1 | Interval for minute dropdown options (e.g., 5, 15, 30). Used for option generation and initial time rounding. |
108
+ | minDate | DateInput | null | The earliest selectable date. |
109
+ | maxDate | DateInput | null | The latest selectable date. |
110
+ | isInvalidDate | (date: Date) => boolean | () => false | A function to programmatically disable specific dates. |
111
+ | ranges | DateRange | null | An object of predefined date ranges. |
112
+ | minuteInterval | number | 1 | Interval for minute dropdown options. |
106
113
  | showTime | boolean | false | Enables the hour/minute/AM/PM selection section. |
107
- | value | Date \| { start: Date; end: Date } \| null | null | The initial selected date or date range. |
108
- | startAt | DateInput | null | null |
114
+ | value | DatepickerValue | null | The initial selected date, date range, or array of dates. |
115
+ | startAt | DateInput | null | The date to initially center the calendar view on. |
116
+ | holidayProvider| HolidayProvider | null | An object that provides holiday information. |
117
+ | disableHolidays| boolean | false | If true, disables holiday dates from being selected. |
109
118
 
110
119
  ### **Outputs**
111
120
 
112
- | Event | Payload | Description |
113
- |:------------|:-----------------------------------|:-------------------------------------------------------|
114
- | valueChange | Date \| { start: Date; end: Date } | Emits the newly selected, time-adjusted date or range. |
121
+ | Event | Payload | Description |
122
+ |:------------|:---------------------------------------------------|:-----------------------------------------------------------------|
123
+ | valueChange | DatepickerValue | Emits the newly selected date, range, or array of dates. |
124
+ | action | { type: string; payload?: any } | Emits various events like `dateSelected`, `timeChanged`, etc. |
115
125
 
116
126
  ## **🎨 Theming**
117
127
 
@@ -129,7 +139,7 @@ To enable the dark theme, simply bind the theme input:
129
139
 
130
140
  ## **🌍 Localization**
131
141
 
132
- The locale input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week.
142
+ The `locale` input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week.
133
143
 
134
144
  <!-- Renders the calendar in German -->
135
145
  <ngxsmk-datepicker [locale]="'de-DE'"></ngxsmk-datepicker>