ngxsmk-datepicker 3.0.4 → 3.0.5
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.
- package/docs/IONIC_INTEGRATION.md +33 -24
- package/fesm2022/ngxsmk-datepicker.mjs +1517 -1065
- package/package.json +1 -1
- package/styles/ionic-integration.css +57 -3
- package/types/ngxsmk-datepicker.d.ts +38 -5
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
# Ionic Framework Integration Guide
|
|
2
2
|
|
|
3
|
-
**Last updated:**
|
|
3
|
+
**Last updated:** August 22, 2026 - **Current stable:** v3.0.5
|
|
4
4
|
|
|
5
|
-
This guide provides step-by-step instructions for integrating ngxsmk-datepicker with Ionic Angular applications.
|
|
5
|
+
This guide provides step-by-step instructions for integrating `ngxsmk-datepicker` with modern **Ionic 7, 8, & 9+** and **Angular 17–21+** applications.
|
|
6
6
|
|
|
7
7
|
## Quick Start
|
|
8
8
|
|
|
@@ -26,55 +26,64 @@ Or import directly in your component:
|
|
|
26
26
|
import 'ngxsmk-datepicker/styles/ionic-integration.css';
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
### 3. Use
|
|
29
|
+
### 3. Use with Modern Standalone Ionic + Angular Signals
|
|
30
30
|
|
|
31
31
|
```typescript
|
|
32
|
-
import { Component } from '@angular/core';
|
|
32
|
+
import { Component, signal } from '@angular/core';
|
|
33
33
|
import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
|
|
34
|
-
import { IonContent, IonItem, IonLabel } from '@ionic/angular/standalone';
|
|
34
|
+
import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
|
|
35
35
|
|
|
36
36
|
@Component({
|
|
37
37
|
selector: 'app-datepicker',
|
|
38
38
|
standalone: true,
|
|
39
|
-
imports: [NgxsmkDatepickerComponent, IonContent, IonItem, IonLabel],
|
|
39
|
+
imports: [NgxsmkDatepickerComponent, IonContent, IonItem, IonLabel, IonList],
|
|
40
40
|
template: `
|
|
41
|
-
<ion-content>
|
|
42
|
-
<ion-
|
|
43
|
-
<ion-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
41
|
+
<ion-content [fullscreen]="true">
|
|
42
|
+
<ion-list [inset]="true">
|
|
43
|
+
<ion-item>
|
|
44
|
+
<ion-label position="stacked">Booking Date</ion-label>
|
|
45
|
+
<ngxsmk-datepicker
|
|
46
|
+
[(ngModel)]="selectedDate"
|
|
47
|
+
[inline]="true"
|
|
48
|
+
mode="single"
|
|
49
|
+
[locale]="'en-US'"
|
|
50
|
+
[enableAi]="true"
|
|
51
|
+
[showAiSuggestions]="true"
|
|
52
|
+
>
|
|
53
|
+
</ngxsmk-datepicker>
|
|
54
|
+
</ion-item>
|
|
55
|
+
</ion-list>
|
|
50
56
|
</ion-content>
|
|
51
57
|
`
|
|
52
58
|
})
|
|
53
|
-
export class DatepickerPage {
|
|
59
|
+
export class DatepickerPage {
|
|
60
|
+
selectedDate = signal<Date | null>(new Date());
|
|
61
|
+
}
|
|
54
62
|
```
|
|
55
63
|
|
|
56
|
-
## Configuration
|
|
64
|
+
## Configuration & Mobile Best Practices
|
|
57
65
|
|
|
58
66
|
### Disable Focus Trap (for Ionic Modals)
|
|
59
67
|
|
|
60
|
-
When using datepicker inside `ion-modal`, disable focus trapping to
|
|
68
|
+
When using datepicker inside `ion-modal`, disable focus trapping to prevent focus loops:
|
|
61
69
|
|
|
62
|
-
```
|
|
70
|
+
```html
|
|
63
71
|
<ngxsmk-datepicker
|
|
64
72
|
[inline]="true"
|
|
65
73
|
[disableFocusTrap]="true"
|
|
66
|
-
mode="single"
|
|
67
|
-
|
|
74
|
+
mode="single"
|
|
75
|
+
></ngxsmk-datepicker>
|
|
68
76
|
```
|
|
69
77
|
|
|
70
|
-
### Ionic
|
|
78
|
+
### Ionic 8 Dark Mode (`.ion-palette-dark`)
|
|
71
79
|
|
|
72
|
-
The integration
|
|
80
|
+
The integration stylesheet automatically detects Ionic 8's `.ion-palette-dark` and legacy `.ion-theme-dark`:
|
|
73
81
|
|
|
74
82
|
- `--ion-color-primary` → `--datepicker-primary-color`
|
|
75
83
|
- `--ion-background-color` → `--datepicker-background`
|
|
76
84
|
- `--ion-text-color` → `--datepicker-text-color`
|
|
77
85
|
- `--ion-border-color` → `--datepicker-border-color`
|
|
86
|
+
- `--ion-font-family` → `--datepicker-font-family`
|
|
78
87
|
|
|
79
88
|
## Usage Patterns
|
|
80
89
|
|