hijri-date-time-picker 1.0.3 → 1.0.31
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/QUICKSTART.md +121 -0
- package/docs/INITIAL_DATE_BINDING.md +183 -0
- package/docs/MIN_MAX_DATE.md +326 -0
- package/ng-package.json +11 -0
- package/package.json +2 -8
- package/src/demo.ts +246 -0
- package/src/index.ts +2 -0
- package/src/lib/hijri-date-picker.component.css +524 -0
- package/src/lib/hijri-date-picker.component.html +229 -0
- package/src/lib/hijri-date-picker.component.ts +795 -0
- package/src/lib/hijri-date-picker.types.ts +164 -0
- package/src/types/hijri-date.d.ts +43 -0
- package/tsconfig.json +39 -0
- package/dist/LICENSE +0 -21
- package/dist/README.md +0 -188
- package/dist/fesm2022/hijri-date-time-picker.mjs +0 -786
- package/dist/fesm2022/hijri-date-time-picker.mjs.map +0 -1
- package/dist/types/hijri-date-time-picker.d.ts +0 -179
package/src/demo.ts
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
3
|
+
import { HijriDatePickerComponent } from './lib/hijri-date-picker.component';
|
|
4
|
+
import { SelectedDate, DatePickerStyles } from './lib/hijri-date-picker.types';
|
|
5
|
+
|
|
6
|
+
@Component({
|
|
7
|
+
selector: 'app-demo',
|
|
8
|
+
standalone: true,
|
|
9
|
+
imports: [HijriDatePickerComponent],
|
|
10
|
+
template: `
|
|
11
|
+
<div class="demo-container">
|
|
12
|
+
<h1>Hijri Date Picker Demo</h1>
|
|
13
|
+
|
|
14
|
+
<div class="demo-grid">
|
|
15
|
+
<!-- Example 1: Basic Gregorian -->
|
|
16
|
+
<div class="demo-card">
|
|
17
|
+
<h2>Basic Gregorian</h2>
|
|
18
|
+
<hijri-date-picker
|
|
19
|
+
[mode]="'greg'"
|
|
20
|
+
[locale]="'en'"
|
|
21
|
+
[canChangeMode]="true"
|
|
22
|
+
(dateSelected)="onDateSelected($event, 'basic')">
|
|
23
|
+
</hijri-date-picker>
|
|
24
|
+
<div class="output" *ngIf="selectedDates['basic']">
|
|
25
|
+
<strong>Selected:</strong>
|
|
26
|
+
<pre>{{ selectedDates['basic'] | json }}</pre>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<!-- Example 2: Hijri with Arabic -->
|
|
31
|
+
<div class="demo-card">
|
|
32
|
+
<h2>Hijri Calendar (Arabic)</h2>
|
|
33
|
+
<hijri-date-picker
|
|
34
|
+
[mode]="'hijri'"
|
|
35
|
+
[locale]="'ar'"
|
|
36
|
+
[dir]="'rtl'"
|
|
37
|
+
[canChangeMode]="true"
|
|
38
|
+
[submitTextButton]="'تأكيد'"
|
|
39
|
+
[todaysDateText]="'اليوم'"
|
|
40
|
+
[yearSelectLabel]="'السنة'"
|
|
41
|
+
[monthSelectLabel]="'الشهر'"
|
|
42
|
+
(dateSelected)="onDateSelected($event, 'hijri')">
|
|
43
|
+
</hijri-date-picker>
|
|
44
|
+
<div class="output" *ngIf="selectedDates['hijri']">
|
|
45
|
+
<strong>Selected:</strong>
|
|
46
|
+
<pre>{{ selectedDates['hijri'] | json }}</pre>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- Example 3: Multiple Selection -->
|
|
51
|
+
<div class="demo-card">
|
|
52
|
+
<h2>Multiple Selection</h2>
|
|
53
|
+
<hijri-date-picker
|
|
54
|
+
[mode]="'greg'"
|
|
55
|
+
[locale]="'en'"
|
|
56
|
+
[multiple]="true"
|
|
57
|
+
[showConfirmButton]="true"
|
|
58
|
+
[submitTextButton]="'Confirm Selection'"
|
|
59
|
+
(dateSelected)="onDateSelected($event, 'multiple')">
|
|
60
|
+
</hijri-date-picker>
|
|
61
|
+
<div class="output" *ngIf="selectedDates['multiple']">
|
|
62
|
+
<strong>Selected Dates:</strong>
|
|
63
|
+
<pre>{{ selectedDates['multiple'] | json }}</pre>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<!-- Example 4: Custom Styling -->
|
|
68
|
+
<div class="demo-card">
|
|
69
|
+
<h2>Custom Theme</h2>
|
|
70
|
+
<hijri-date-picker
|
|
71
|
+
[mode]="'greg'"
|
|
72
|
+
[locale]="'en'"
|
|
73
|
+
[styles]="customStyles"
|
|
74
|
+
[canChangeMode]="true"
|
|
75
|
+
(dateSelected)="onDateSelected($event, 'custom')">
|
|
76
|
+
</hijri-date-picker>
|
|
77
|
+
<div class="output" *ngIf="selectedDates['custom']">
|
|
78
|
+
<strong>Selected:</strong>
|
|
79
|
+
<pre>{{ selectedDates['custom'] | json }}</pre>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<!-- Example 5: Future Date Validation -->
|
|
84
|
+
<div class="demo-card">
|
|
85
|
+
<h2>No Future Dates</h2>
|
|
86
|
+
<hijri-date-picker
|
|
87
|
+
[mode]="'greg'"
|
|
88
|
+
[locale]="'en'"
|
|
89
|
+
[futureValidation]="true"
|
|
90
|
+
[futureYearsLimit]="0"
|
|
91
|
+
[todaysDateText]="'Select Today'"
|
|
92
|
+
(dateSelected)="onDateSelected($event, 'validation')">
|
|
93
|
+
</hijri-date-picker>
|
|
94
|
+
<div class="output" *ngIf="selectedDates['validation']">
|
|
95
|
+
<strong>Selected:</strong>
|
|
96
|
+
<pre>{{ selectedDates['validation'] | json }}</pre>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Example 6: Minimal UI -->
|
|
101
|
+
<div class="demo-card">
|
|
102
|
+
<h2>Minimal UI</h2>
|
|
103
|
+
<hijri-date-picker
|
|
104
|
+
[mode]="'greg'"
|
|
105
|
+
[locale]="'en'"
|
|
106
|
+
[canChangeMode]="false"
|
|
107
|
+
[todaysDateSection]="false"
|
|
108
|
+
[disableYearPicker]="true"
|
|
109
|
+
[disableMonthPicker]="true"
|
|
110
|
+
(dateSelected)="onDateSelected($event, 'minimal')">
|
|
111
|
+
</hijri-date-picker>
|
|
112
|
+
<div class="output" *ngIf="selectedDates['minimal']">
|
|
113
|
+
<strong>Selected:</strong>
|
|
114
|
+
<pre>{{ selectedDates['minimal'] | json }}</pre>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<!-- Example 7: Date Range with minDate and maxDate -->
|
|
119
|
+
<div class="demo-card">
|
|
120
|
+
<h2>Date Range (Last 30 Days)</h2>
|
|
121
|
+
<hijri-date-picker
|
|
122
|
+
[mode]="'greg'"
|
|
123
|
+
[locale]="'en'"
|
|
124
|
+
[minDate]="minDate"
|
|
125
|
+
[maxDate]="maxDate"
|
|
126
|
+
[futureValidation]="false"
|
|
127
|
+
(dateSelected)="onDateSelected($event, 'range')">
|
|
128
|
+
</hijri-date-picker>
|
|
129
|
+
<div class="output" *ngIf="selectedDates['range']">
|
|
130
|
+
<strong>Selected:</strong>
|
|
131
|
+
<pre>{{ selectedDates['range'] | json }}</pre>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<!-- Example 8: Future Dates Only with minDate -->
|
|
136
|
+
<div class="demo-card">
|
|
137
|
+
<h2>Future Dates Only (Next 60 Days)</h2>
|
|
138
|
+
<hijri-date-picker
|
|
139
|
+
[mode]="'greg'"
|
|
140
|
+
[locale]="'en'"
|
|
141
|
+
[minDate]="today"
|
|
142
|
+
[maxDate]="maxFutureDate"
|
|
143
|
+
[futureValidation]="false"
|
|
144
|
+
[todaysDateText]="'Select Today or Future'"
|
|
145
|
+
(dateSelected)="onDateSelected($event, 'futureOnly')">
|
|
146
|
+
</hijri-date-picker>
|
|
147
|
+
<div class="output" *ngIf="selectedDates['futureOnly']">
|
|
148
|
+
<strong>Selected:</strong>
|
|
149
|
+
<pre>{{ selectedDates['futureOnly'] | json }}</pre>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
`,
|
|
155
|
+
styles: [`
|
|
156
|
+
.demo-container {
|
|
157
|
+
max-width: 1400px;
|
|
158
|
+
margin: 0 auto;
|
|
159
|
+
padding: 40px 20px;
|
|
160
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
h1 {
|
|
164
|
+
text-align: center;
|
|
165
|
+
color: #1f2937;
|
|
166
|
+
margin-bottom: 40px;
|
|
167
|
+
font-size: 2.5rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.demo-grid {
|
|
171
|
+
display: grid;
|
|
172
|
+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
173
|
+
gap: 30px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.demo-card {
|
|
177
|
+
background: white;
|
|
178
|
+
border-radius: 12px;
|
|
179
|
+
padding: 24px;
|
|
180
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.demo-card h2 {
|
|
184
|
+
margin-top: 0;
|
|
185
|
+
margin-bottom: 20px;
|
|
186
|
+
color: #374151;
|
|
187
|
+
font-size: 1.25rem;
|
|
188
|
+
border-bottom: 2px solid #e5e7eb;
|
|
189
|
+
padding-bottom: 10px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.output {
|
|
193
|
+
margin-top: 20px;
|
|
194
|
+
padding: 16px;
|
|
195
|
+
background: #f9fafb;
|
|
196
|
+
border-radius: 8px;
|
|
197
|
+
border: 1px solid #e5e7eb;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.output strong {
|
|
201
|
+
display: block;
|
|
202
|
+
margin-bottom: 8px;
|
|
203
|
+
color: #374151;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.output pre {
|
|
207
|
+
margin: 0;
|
|
208
|
+
font-size: 12px;
|
|
209
|
+
color: #6b7280;
|
|
210
|
+
white-space: pre-wrap;
|
|
211
|
+
word-wrap: break-word;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
@media (max-width: 768px) {
|
|
215
|
+
.demo-grid {
|
|
216
|
+
grid-template-columns: 1fr;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
`]
|
|
220
|
+
})
|
|
221
|
+
export class DemoComponent {
|
|
222
|
+
selectedDates: { [key: string]: any } = {};
|
|
223
|
+
|
|
224
|
+
// Date range examples
|
|
225
|
+
today: Date = new Date();
|
|
226
|
+
minDate: Date = new Date(new Date().setDate(new Date().getDate() - 30)); // 30 days ago
|
|
227
|
+
maxDate: Date = new Date(); // Today
|
|
228
|
+
maxFutureDate: Date = new Date(new Date().setDate(new Date().getDate() + 60)); // 60 days from now
|
|
229
|
+
|
|
230
|
+
customStyles: DatePickerStyles = {
|
|
231
|
+
primaryColor: '#059669',
|
|
232
|
+
secondaryColor: '#34d399',
|
|
233
|
+
selectedDateBackground: '#059669',
|
|
234
|
+
todayColor: '#f59e0b',
|
|
235
|
+
borderRadius: '12px',
|
|
236
|
+
fontFamily: 'Inter, sans-serif'
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
onDateSelected(date: SelectedDate | SelectedDate[], key: string) {
|
|
240
|
+
this.selectedDates[key] = date;
|
|
241
|
+
console.log(`Date selected for ${key}:`, date);
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
// Bootstrap the demo application
|
|
246
|
+
bootstrapApplication(DemoComponent);
|
package/src/index.ts
ADDED