hijri-date-time-picker 1.0.2 → 1.0.3
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/README.md +3 -0
- package/dist/README.md +5 -2
- package/dist/fesm2022/hijri-date-time-picker.mjs +287 -135
- package/dist/fesm2022/hijri-date-time-picker.mjs.map +1 -1
- package/dist/types/hijri-date-time-picker.d.ts +179 -0
- package/package.json +6 -2
- package/dist/demo.d.ts +0 -12
- package/dist/demo.js +0 -249
- package/dist/esm2022/hijri-date-time-picker.mjs +0 -5
- package/dist/esm2022/index.mjs +0 -3
- package/dist/esm2022/lib/hijri-date-picker.component.mjs +0 -606
- package/dist/esm2022/lib/hijri-date-picker.types.mjs +0 -22
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -2
- package/dist/lib/hijri-date-picker.component.d.ts +0 -88
- package/dist/lib/hijri-date-picker.component.js +0 -774
- package/dist/lib/hijri-date-picker.types.d.ts +0 -84
- package/dist/lib/hijri-date-picker.types.js +0 -77
|
@@ -1,774 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
-
};
|
|
10
|
-
import { Component, Input, Output, EventEmitter, } from "@angular/core";
|
|
11
|
-
import { CommonModule } from "@angular/common";
|
|
12
|
-
import HijriDate, { toHijri } from "hijri-date/lib/safe";
|
|
13
|
-
import { GREGORIAN_MONTHS_EN, GREGORIAN_MONTHS_AR, HIJRI_MONTHS_EN, HIJRI_MONTHS_AR, WEEKDAY_NAMES_EN, WEEKDAY_NAMES_AR, } from "./hijri-date-picker.types";
|
|
14
|
-
let HijriDatePickerComponent = class HijriDatePickerComponent {
|
|
15
|
-
// Mode & Configuration
|
|
16
|
-
canChangeMode = true;
|
|
17
|
-
mode = "greg";
|
|
18
|
-
dir = "ltr";
|
|
19
|
-
locale = "en";
|
|
20
|
-
// Validation
|
|
21
|
-
futureValidation = true;
|
|
22
|
-
futureYearsLimit = 10;
|
|
23
|
-
isRequired = false;
|
|
24
|
-
minDate; // Minimum selectable date
|
|
25
|
-
maxDate; // Maximum selectable date
|
|
26
|
-
// Selection
|
|
27
|
-
multiple = false;
|
|
28
|
-
showConfirmButton = false;
|
|
29
|
-
initialSelectedDate; // For single selection mode - bind initial date
|
|
30
|
-
initialSelectedDates; // For multiple selection mode - bind initial dates
|
|
31
|
-
// Labels
|
|
32
|
-
submitTextButton = "Submit";
|
|
33
|
-
todaysDateText = "Today";
|
|
34
|
-
ummAlQuraDateText = "Umm Al-Qura Calendar";
|
|
35
|
-
yearSelectLabel = "Year";
|
|
36
|
-
monthSelectLabel = "Month";
|
|
37
|
-
// Display Options
|
|
38
|
-
todaysDateSection = true;
|
|
39
|
-
markToday = true;
|
|
40
|
-
disableYearPicker = false;
|
|
41
|
-
disableMonthPicker = false;
|
|
42
|
-
disableDayPicker = false;
|
|
43
|
-
// Styling
|
|
44
|
-
styles = {};
|
|
45
|
-
// Time Configuration
|
|
46
|
-
enableTime = false;
|
|
47
|
-
timeFormat = "24";
|
|
48
|
-
minuteStep = 1;
|
|
49
|
-
enableSeconds = false;
|
|
50
|
-
defaultTime;
|
|
51
|
-
// Outputs
|
|
52
|
-
dateSelected = new EventEmitter();
|
|
53
|
-
modeChanged = new EventEmitter();
|
|
54
|
-
// Internal State
|
|
55
|
-
currentYear = new Date().getFullYear();
|
|
56
|
-
currentMonth = new Date().getMonth();
|
|
57
|
-
currentHijriYear = 0;
|
|
58
|
-
currentHijriMonth = 0;
|
|
59
|
-
selectedDates = [];
|
|
60
|
-
calendarDays = [];
|
|
61
|
-
today = new Date();
|
|
62
|
-
years = [];
|
|
63
|
-
months = [];
|
|
64
|
-
weekdays = [];
|
|
65
|
-
// Time state
|
|
66
|
-
selectedTime = (() => {
|
|
67
|
-
const now = new Date();
|
|
68
|
-
return {
|
|
69
|
-
hours: now.getHours(),
|
|
70
|
-
minutes: now.getMinutes(),
|
|
71
|
-
seconds: now.getSeconds(),
|
|
72
|
-
};
|
|
73
|
-
})();
|
|
74
|
-
isPM = new Date().getHours() >= 12;
|
|
75
|
-
ngOnInit() {
|
|
76
|
-
this.initializeCalendar();
|
|
77
|
-
this.initializeSelectedDates();
|
|
78
|
-
this.initializeTime();
|
|
79
|
-
this.updateLocaleData();
|
|
80
|
-
this.generateYears();
|
|
81
|
-
this.generateCalendar();
|
|
82
|
-
this.submitTextButton = this.locale === "ar" ? "تأكيد" : "Submit";
|
|
83
|
-
this.todaysDateText = this.locale === "ar" ? "اليوم" : "Today";
|
|
84
|
-
this.ummAlQuraDateText =
|
|
85
|
-
this.locale === "ar" ? "تقويم أم القرى" : "Umm Al-Qura Calendar";
|
|
86
|
-
this.yearSelectLabel = this.locale === "ar" ? "السنة" : "Year";
|
|
87
|
-
this.monthSelectLabel = this.locale === "ar" ? "الشهر" : "Month";
|
|
88
|
-
}
|
|
89
|
-
ngOnChanges(changes) {
|
|
90
|
-
if (changes["mode"] || changes["locale"]) {
|
|
91
|
-
this.updateLocaleData();
|
|
92
|
-
this.generateCalendar();
|
|
93
|
-
}
|
|
94
|
-
// Handle changes to initial selected dates
|
|
95
|
-
if (changes["initialSelectedDate"] || changes["initialSelectedDates"]) {
|
|
96
|
-
this.initializeSelectedDates();
|
|
97
|
-
this.generateCalendar();
|
|
98
|
-
}
|
|
99
|
-
// Handle changes to minDate or maxDate
|
|
100
|
-
if (changes["minDate"] || changes["maxDate"]) {
|
|
101
|
-
this.generateYears();
|
|
102
|
-
this.generateCalendar();
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
initializeCalendar() {
|
|
106
|
-
// If initialSelectedDate is provided, use it to set the calendar month
|
|
107
|
-
let targetDate;
|
|
108
|
-
if (!this.multiple && this.initialSelectedDate) {
|
|
109
|
-
targetDate = this.initialSelectedDate;
|
|
110
|
-
}
|
|
111
|
-
else if (this.multiple &&
|
|
112
|
-
this.initialSelectedDates &&
|
|
113
|
-
this.initialSelectedDates.length > 0) {
|
|
114
|
-
targetDate = this.initialSelectedDates[0];
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
targetDate = new Date();
|
|
118
|
-
}
|
|
119
|
-
// Set Gregorian calendar to the target date's month
|
|
120
|
-
this.currentYear = targetDate.getFullYear();
|
|
121
|
-
this.currentMonth = targetDate.getMonth();
|
|
122
|
-
// Set Hijri calendar to the target date's month
|
|
123
|
-
const hijriDate = toHijri(targetDate);
|
|
124
|
-
this.currentHijriYear = hijriDate.getFullYear();
|
|
125
|
-
this.currentHijriMonth = hijriDate.getMonth();
|
|
126
|
-
}
|
|
127
|
-
initializeSelectedDates() {
|
|
128
|
-
// Handle single selection mode
|
|
129
|
-
if (!this.multiple && this.initialSelectedDate) {
|
|
130
|
-
this.selectedDates = [this.createSelectedDate(this.initialSelectedDate)];
|
|
131
|
-
}
|
|
132
|
-
// Handle multiple selection mode
|
|
133
|
-
if (this.multiple &&
|
|
134
|
-
this.initialSelectedDates &&
|
|
135
|
-
this.initialSelectedDates.length > 0) {
|
|
136
|
-
this.selectedDates = this.initialSelectedDates.map((date) => this.createSelectedDate(date));
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
initializeTime() {
|
|
140
|
-
if (!this.enableTime) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
// Set default time if provided
|
|
144
|
-
if (this.defaultTime) {
|
|
145
|
-
this.selectedTime = {
|
|
146
|
-
hours: this.defaultTime.hours,
|
|
147
|
-
minutes: this.defaultTime.minutes,
|
|
148
|
-
seconds: this.defaultTime.seconds || 0,
|
|
149
|
-
};
|
|
150
|
-
// Set AM/PM for 12-hour format
|
|
151
|
-
if (this.timeFormat === "12") {
|
|
152
|
-
this.isPM = this.selectedTime.hours >= 12;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
else {
|
|
156
|
-
// Default to current time
|
|
157
|
-
const now = new Date();
|
|
158
|
-
this.selectedTime = {
|
|
159
|
-
hours: now.getHours(),
|
|
160
|
-
minutes: now.getMinutes(),
|
|
161
|
-
seconds: now.getSeconds(),
|
|
162
|
-
};
|
|
163
|
-
this.isPM = this.selectedTime.hours >= 12;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
updateLocaleData() {
|
|
167
|
-
// Update weekday names
|
|
168
|
-
this.weekdays = this.locale === "ar" ? WEEKDAY_NAMES_AR : WEEKDAY_NAMES_EN;
|
|
169
|
-
// Update month names based on mode and locale
|
|
170
|
-
if (this.mode === "hijri") {
|
|
171
|
-
this.months = this.locale === "ar" ? HIJRI_MONTHS_AR : HIJRI_MONTHS_EN;
|
|
172
|
-
}
|
|
173
|
-
else {
|
|
174
|
-
this.months =
|
|
175
|
-
this.locale === "ar" ? GREGORIAN_MONTHS_AR : GREGORIAN_MONTHS_EN;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
generateYears() {
|
|
179
|
-
const currentYear = this.mode === "hijri" ? this.currentHijriYear : this.currentYear;
|
|
180
|
-
let startYear = currentYear - 100;
|
|
181
|
-
let endYear = currentYear + this.futureYearsLimit;
|
|
182
|
-
// Adjust year range based on minDate and maxDate
|
|
183
|
-
if (this.mode === "greg") {
|
|
184
|
-
if (this.minDate) {
|
|
185
|
-
startYear = Math.max(startYear, this.minDate.getFullYear());
|
|
186
|
-
}
|
|
187
|
-
if (this.maxDate) {
|
|
188
|
-
endYear = Math.min(endYear, this.maxDate.getFullYear());
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
else if (this.mode === "hijri") {
|
|
192
|
-
if (this.minDate) {
|
|
193
|
-
const minHijri = toHijri(this.minDate);
|
|
194
|
-
startYear = Math.max(startYear, minHijri.getFullYear());
|
|
195
|
-
}
|
|
196
|
-
if (this.maxDate) {
|
|
197
|
-
const maxHijri = toHijri(this.maxDate);
|
|
198
|
-
endYear = Math.min(endYear, maxHijri.getFullYear());
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
this.years = [];
|
|
202
|
-
for (let year = startYear; year <= endYear; year++) {
|
|
203
|
-
this.years.push(year);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
generateCalendar() {
|
|
207
|
-
this.calendarDays = [];
|
|
208
|
-
if (this.mode === "hijri") {
|
|
209
|
-
this.generateHijriCalendar();
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
this.generateGregorianCalendar();
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
generateGregorianCalendar() {
|
|
216
|
-
const firstDay = new Date(this.currentYear, this.currentMonth, 1);
|
|
217
|
-
const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
|
|
218
|
-
const startingDayOfWeek = firstDay.getDay();
|
|
219
|
-
const daysInMonth = lastDay.getDate();
|
|
220
|
-
// Add empty cells for days before the first day of the month
|
|
221
|
-
for (let i = 0; i < startingDayOfWeek; i++) {
|
|
222
|
-
this.calendarDays.push({ day: null, disabled: true });
|
|
223
|
-
}
|
|
224
|
-
// Add days of the month
|
|
225
|
-
for (let day = 1; day <= daysInMonth; day++) {
|
|
226
|
-
const date = new Date(this.currentYear, this.currentMonth, day);
|
|
227
|
-
const isToday = this.isSameDay(date, this.today);
|
|
228
|
-
const isDisabled = this.isDateDisabled(date);
|
|
229
|
-
const isSelected = this.isDateSelected(date);
|
|
230
|
-
this.calendarDays.push({
|
|
231
|
-
day,
|
|
232
|
-
date,
|
|
233
|
-
isToday,
|
|
234
|
-
isDisabled,
|
|
235
|
-
isSelected,
|
|
236
|
-
disabled: false,
|
|
237
|
-
});
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
generateHijriCalendar() {
|
|
241
|
-
const hijriDate = new HijriDate(this.currentHijriYear, this.currentHijriMonth, 1);
|
|
242
|
-
const gregorianDate = hijriDate.toGregorian();
|
|
243
|
-
const startingDayOfWeek = gregorianDate.getDay();
|
|
244
|
-
// Get days in Hijri month (typically 29 or 30)
|
|
245
|
-
const daysInMonth = this.getDaysInHijriMonth(this.currentHijriYear, this.currentHijriMonth);
|
|
246
|
-
// Add empty cells for days before the first day of the month
|
|
247
|
-
for (let i = 0; i < startingDayOfWeek; i++) {
|
|
248
|
-
this.calendarDays.push({ day: null, disabled: true });
|
|
249
|
-
}
|
|
250
|
-
// Add days of the month
|
|
251
|
-
for (let day = 1; day <= daysInMonth; day++) {
|
|
252
|
-
const hijriDay = new HijriDate(this.currentHijriYear, this.currentHijriMonth, day);
|
|
253
|
-
const gregorianDay = hijriDay.toGregorian();
|
|
254
|
-
const isToday = this.isSameDay(gregorianDay, this.today);
|
|
255
|
-
const isDisabled = this.isDateDisabled(gregorianDay);
|
|
256
|
-
const isSelected = this.isDateSelected(gregorianDay);
|
|
257
|
-
this.calendarDays.push({
|
|
258
|
-
day,
|
|
259
|
-
date: gregorianDay,
|
|
260
|
-
hijriDate: hijriDay,
|
|
261
|
-
isToday,
|
|
262
|
-
isDisabled,
|
|
263
|
-
isSelected,
|
|
264
|
-
disabled: false,
|
|
265
|
-
});
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
getDaysInHijriMonth(year, month) {
|
|
269
|
-
// Try to create the 30th day; if it fails, the month has 29 days
|
|
270
|
-
try {
|
|
271
|
-
new HijriDate(year, month, 30);
|
|
272
|
-
return 30;
|
|
273
|
-
}
|
|
274
|
-
catch {
|
|
275
|
-
return 29;
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
isSameDay(date1, date2) {
|
|
279
|
-
return (date1.getFullYear() === date2.getFullYear() &&
|
|
280
|
-
date1.getMonth() === date2.getMonth() &&
|
|
281
|
-
date1.getDate() === date2.getDate());
|
|
282
|
-
}
|
|
283
|
-
isDateDisabled(date) {
|
|
284
|
-
// Check minDate constraint
|
|
285
|
-
if (this.minDate) {
|
|
286
|
-
const minDateOnly = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate());
|
|
287
|
-
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
288
|
-
if (dateOnly < minDateOnly) {
|
|
289
|
-
return true;
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
// Check maxDate constraint
|
|
293
|
-
if (this.maxDate) {
|
|
294
|
-
const maxDateOnly = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate());
|
|
295
|
-
const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
296
|
-
if (dateOnly > maxDateOnly) {
|
|
297
|
-
return true;
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
// Check futureValidation constraint
|
|
301
|
-
if (this.futureValidation) {
|
|
302
|
-
const maxDate = new Date();
|
|
303
|
-
maxDate.setFullYear(maxDate.getFullYear() + this.futureYearsLimit);
|
|
304
|
-
return date > maxDate;
|
|
305
|
-
}
|
|
306
|
-
return false;
|
|
307
|
-
}
|
|
308
|
-
isDateSelected(date) {
|
|
309
|
-
return this.selectedDates.some((selected) => this.isSameDay(selected.gregorian, date));
|
|
310
|
-
}
|
|
311
|
-
onDayClick(dayInfo) {
|
|
312
|
-
if (dayInfo.disabled || dayInfo.isDisabled) {
|
|
313
|
-
return;
|
|
314
|
-
}
|
|
315
|
-
const selectedDate = this.createSelectedDate(dayInfo.date);
|
|
316
|
-
if (this.multiple) {
|
|
317
|
-
const index = this.selectedDates.findIndex((d) => this.isSameDay(d.gregorian, dayInfo.date));
|
|
318
|
-
if (index > -1) {
|
|
319
|
-
// Remove the clicked date if already selected
|
|
320
|
-
this.selectedDates.splice(index, 1);
|
|
321
|
-
}
|
|
322
|
-
else {
|
|
323
|
-
// If we already have 2 or more dates, clear and start new range
|
|
324
|
-
if (this.selectedDates.length >= 2) {
|
|
325
|
-
this.selectedDates = [selectedDate];
|
|
326
|
-
}
|
|
327
|
-
else {
|
|
328
|
-
this.selectedDates.push(selectedDate);
|
|
329
|
-
// Auto-fill range if exactly 2 dates are selected
|
|
330
|
-
if (this.selectedDates.length === 2) {
|
|
331
|
-
this.fillDateRange();
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
if (!this.showConfirmButton) {
|
|
336
|
-
this.dateSelected.emit([...this.selectedDates]);
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
else {
|
|
340
|
-
this.selectedDates = [selectedDate];
|
|
341
|
-
if (!this.showConfirmButton) {
|
|
342
|
-
this.dateSelected.emit(selectedDate);
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
this.generateCalendar();
|
|
346
|
-
}
|
|
347
|
-
fillDateRange() {
|
|
348
|
-
if (this.selectedDates.length !== 2)
|
|
349
|
-
return;
|
|
350
|
-
// Sort the two dates
|
|
351
|
-
const dates = [...this.selectedDates].sort((a, b) => a.gregorian.getTime() - b.gregorian.getTime());
|
|
352
|
-
const startDate = dates[0].gregorian;
|
|
353
|
-
const endDate = dates[1].gregorian;
|
|
354
|
-
// Clear current selection
|
|
355
|
-
this.selectedDates = [];
|
|
356
|
-
// Fill all dates between start and end (inclusive)
|
|
357
|
-
const currentDate = new Date(startDate);
|
|
358
|
-
while (currentDate <= endDate) {
|
|
359
|
-
const dateToAdd = new Date(currentDate);
|
|
360
|
-
this.selectedDates.push(this.createSelectedDate(dateToAdd));
|
|
361
|
-
currentDate.setDate(currentDate.getDate() + 1);
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
createSelectedDate(date) {
|
|
365
|
-
// Create a new Date object to avoid mutating the original
|
|
366
|
-
const dateObj = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
367
|
-
const hijriDate = toHijri(dateObj);
|
|
368
|
-
// If time is enabled, set the time on the date object
|
|
369
|
-
if (this.enableTime) {
|
|
370
|
-
let hours24 = this.selectedTime.hours;
|
|
371
|
-
if (this.timeFormat === "12") {
|
|
372
|
-
if (this.isPM && this.selectedTime.hours !== 12) {
|
|
373
|
-
hours24 = this.selectedTime.hours + 12;
|
|
374
|
-
}
|
|
375
|
-
else if (!this.isPM && this.selectedTime.hours === 12) {
|
|
376
|
-
hours24 = 0;
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
dateObj.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
|
|
380
|
-
}
|
|
381
|
-
return {
|
|
382
|
-
gregorian: dateObj,
|
|
383
|
-
hijri: {
|
|
384
|
-
year: hijriDate.getFullYear(),
|
|
385
|
-
month: hijriDate.getMonth(),
|
|
386
|
-
day: hijriDate.getDate(),
|
|
387
|
-
},
|
|
388
|
-
time: this.enableTime
|
|
389
|
-
? {
|
|
390
|
-
hours: dateObj.getHours(),
|
|
391
|
-
minutes: dateObj.getMinutes(),
|
|
392
|
-
seconds: dateObj.getSeconds(),
|
|
393
|
-
}
|
|
394
|
-
: undefined,
|
|
395
|
-
formatted: {
|
|
396
|
-
gregorian: this.formatGregorianDate(dateObj),
|
|
397
|
-
hijri: this.formatHijriDate(hijriDate),
|
|
398
|
-
time: this.enableTime
|
|
399
|
-
? this.formatTime(dateObj.getHours(), dateObj.getMinutes(), dateObj.getSeconds())
|
|
400
|
-
: undefined,
|
|
401
|
-
},
|
|
402
|
-
};
|
|
403
|
-
}
|
|
404
|
-
formatGregorianDate(date) {
|
|
405
|
-
const day = date.getDate();
|
|
406
|
-
const month = this.locale === "ar"
|
|
407
|
-
? GREGORIAN_MONTHS_AR[date.getMonth()]
|
|
408
|
-
: GREGORIAN_MONTHS_EN[date.getMonth()];
|
|
409
|
-
const year = date.getFullYear();
|
|
410
|
-
return this.locale === "ar"
|
|
411
|
-
? `${day} ${month} ${year}`
|
|
412
|
-
: `${month} ${day}, ${year}`;
|
|
413
|
-
}
|
|
414
|
-
formatHijriDate(hijriDate) {
|
|
415
|
-
const day = hijriDate.getDate();
|
|
416
|
-
const month = this.locale === "ar"
|
|
417
|
-
? HIJRI_MONTHS_AR[hijriDate.getMonth()]
|
|
418
|
-
: HIJRI_MONTHS_EN[hijriDate.getMonth()];
|
|
419
|
-
const year = hijriDate.getFullYear();
|
|
420
|
-
return this.locale === "ar"
|
|
421
|
-
? `${day} ${month} ${year} هـ`
|
|
422
|
-
: `${day} ${month} ${year} AH`;
|
|
423
|
-
}
|
|
424
|
-
onYearChange(event) {
|
|
425
|
-
const year = parseInt(event.target.value);
|
|
426
|
-
if (this.mode === "hijri") {
|
|
427
|
-
this.currentHijriYear = year;
|
|
428
|
-
}
|
|
429
|
-
else {
|
|
430
|
-
this.currentYear = year;
|
|
431
|
-
}
|
|
432
|
-
this.generateCalendar();
|
|
433
|
-
}
|
|
434
|
-
onMonthChange(event) {
|
|
435
|
-
const month = parseInt(event.target.value);
|
|
436
|
-
if (this.mode === "hijri") {
|
|
437
|
-
this.currentHijriMonth = month;
|
|
438
|
-
}
|
|
439
|
-
else {
|
|
440
|
-
this.currentMonth = month;
|
|
441
|
-
}
|
|
442
|
-
this.generateCalendar();
|
|
443
|
-
}
|
|
444
|
-
previousMonth() {
|
|
445
|
-
if (this.mode === "hijri") {
|
|
446
|
-
if (this.currentHijriMonth === 0) {
|
|
447
|
-
this.currentHijriMonth = 11;
|
|
448
|
-
this.currentHijriYear--;
|
|
449
|
-
}
|
|
450
|
-
else {
|
|
451
|
-
this.currentHijriMonth--;
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
else {
|
|
455
|
-
if (this.currentMonth === 0) {
|
|
456
|
-
this.currentMonth = 11;
|
|
457
|
-
this.currentYear--;
|
|
458
|
-
}
|
|
459
|
-
else {
|
|
460
|
-
this.currentMonth--;
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
this.generateCalendar();
|
|
464
|
-
}
|
|
465
|
-
nextMonth() {
|
|
466
|
-
if (this.mode === "hijri") {
|
|
467
|
-
if (this.currentHijriMonth === 11) {
|
|
468
|
-
this.currentHijriMonth = 0;
|
|
469
|
-
this.currentHijriYear++;
|
|
470
|
-
}
|
|
471
|
-
else {
|
|
472
|
-
this.currentHijriMonth++;
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
else {
|
|
476
|
-
if (this.currentMonth === 11) {
|
|
477
|
-
this.currentMonth = 0;
|
|
478
|
-
this.currentYear++;
|
|
479
|
-
}
|
|
480
|
-
else {
|
|
481
|
-
this.currentMonth++;
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
this.generateCalendar();
|
|
485
|
-
}
|
|
486
|
-
toggleMode() {
|
|
487
|
-
if (!this.canChangeMode) {
|
|
488
|
-
return;
|
|
489
|
-
}
|
|
490
|
-
this.mode = this.mode === "greg" ? "hijri" : "greg";
|
|
491
|
-
this.updateLocaleData();
|
|
492
|
-
this.generateYears();
|
|
493
|
-
this.generateCalendar();
|
|
494
|
-
this.modeChanged.emit(this.mode);
|
|
495
|
-
}
|
|
496
|
-
selectToday() {
|
|
497
|
-
const today = new Date();
|
|
498
|
-
this.onDayClick({ date: today, disabled: false, isDisabled: false });
|
|
499
|
-
}
|
|
500
|
-
onSubmit() {
|
|
501
|
-
if (this.isRequired && this.selectedDates.length === 0) {
|
|
502
|
-
return;
|
|
503
|
-
}
|
|
504
|
-
if (this.multiple) {
|
|
505
|
-
this.dateSelected.emit([...this.selectedDates]);
|
|
506
|
-
}
|
|
507
|
-
else if (this.selectedDates.length > 0) {
|
|
508
|
-
this.dateSelected.emit(this.selectedDates[0]);
|
|
509
|
-
}
|
|
510
|
-
}
|
|
511
|
-
// Time handling methods
|
|
512
|
-
incrementTime(type) {
|
|
513
|
-
if (type === "hours") {
|
|
514
|
-
const max = this.timeFormat === "12" ? 12 : 23;
|
|
515
|
-
const min = this.timeFormat === "12" ? 1 : 0;
|
|
516
|
-
this.selectedTime.hours =
|
|
517
|
-
this.selectedTime.hours >= max ? min : this.selectedTime.hours + 1;
|
|
518
|
-
}
|
|
519
|
-
else if (type === "minutes") {
|
|
520
|
-
this.selectedTime.minutes =
|
|
521
|
-
this.selectedTime.minutes + this.minuteStep > 59
|
|
522
|
-
? 0
|
|
523
|
-
: this.selectedTime.minutes + this.minuteStep;
|
|
524
|
-
}
|
|
525
|
-
else if (type === "seconds") {
|
|
526
|
-
this.selectedTime.seconds =
|
|
527
|
-
this.selectedTime.seconds + 1 > 59 ? 0 : this.selectedTime.seconds + 1;
|
|
528
|
-
}
|
|
529
|
-
this.updateSelectedDateTime();
|
|
530
|
-
}
|
|
531
|
-
decrementTime(type) {
|
|
532
|
-
if (type === "hours") {
|
|
533
|
-
const min = this.timeFormat === "12" ? 1 : 0;
|
|
534
|
-
const max = this.timeFormat === "12" ? 12 : 23;
|
|
535
|
-
this.selectedTime.hours =
|
|
536
|
-
this.selectedTime.hours - 1 < min ? max : this.selectedTime.hours - 1;
|
|
537
|
-
}
|
|
538
|
-
else if (type === "minutes") {
|
|
539
|
-
this.selectedTime.minutes =
|
|
540
|
-
this.selectedTime.minutes - this.minuteStep < 0
|
|
541
|
-
? 59
|
|
542
|
-
: this.selectedTime.minutes - this.minuteStep;
|
|
543
|
-
}
|
|
544
|
-
else if (type === "seconds") {
|
|
545
|
-
this.selectedTime.seconds =
|
|
546
|
-
this.selectedTime.seconds - 1 < 0 ? 59 : this.selectedTime.seconds - 1;
|
|
547
|
-
}
|
|
548
|
-
this.updateSelectedDateTime();
|
|
549
|
-
}
|
|
550
|
-
onTimeChange(type, event) {
|
|
551
|
-
const value = parseInt(event.target.value) || 0;
|
|
552
|
-
if (type === "hours") {
|
|
553
|
-
const min = this.timeFormat === "12" ? 1 : 0;
|
|
554
|
-
const max = this.timeFormat === "12" ? 12 : 23;
|
|
555
|
-
this.selectedTime.hours = Math.max(min, Math.min(max, value));
|
|
556
|
-
}
|
|
557
|
-
else if (type === "minutes") {
|
|
558
|
-
this.selectedTime.minutes = Math.max(0, Math.min(59, value));
|
|
559
|
-
}
|
|
560
|
-
else if (type === "seconds") {
|
|
561
|
-
this.selectedTime.seconds = Math.max(0, Math.min(59, value));
|
|
562
|
-
}
|
|
563
|
-
this.updateSelectedDateTime();
|
|
564
|
-
}
|
|
565
|
-
setAMPM(pm) {
|
|
566
|
-
this.isPM = pm;
|
|
567
|
-
this.updateSelectedDateTime();
|
|
568
|
-
}
|
|
569
|
-
formatTime(hours, minutes, seconds) {
|
|
570
|
-
if (this.timeFormat === "12") {
|
|
571
|
-
const displayHours = hours % 12 || 12;
|
|
572
|
-
const ampm = hours >= 12 ? "PM" : "AM";
|
|
573
|
-
const minutesStr = minutes.toString().padStart(2, "0");
|
|
574
|
-
if (this.enableSeconds) {
|
|
575
|
-
const secondsStr = seconds.toString().padStart(2, "0");
|
|
576
|
-
return `${displayHours}:${minutesStr}:${secondsStr} ${ampm}`;
|
|
577
|
-
}
|
|
578
|
-
return `${displayHours}:${minutesStr} ${ampm}`;
|
|
579
|
-
}
|
|
580
|
-
else {
|
|
581
|
-
const hoursStr = hours.toString().padStart(2, "0");
|
|
582
|
-
const minutesStr = minutes.toString().padStart(2, "0");
|
|
583
|
-
if (this.enableSeconds) {
|
|
584
|
-
const secondsStr = seconds.toString().padStart(2, "0");
|
|
585
|
-
return `${hoursStr}:${minutesStr}:${secondsStr}`;
|
|
586
|
-
}
|
|
587
|
-
return `${hoursStr}:${minutesStr}`;
|
|
588
|
-
}
|
|
589
|
-
}
|
|
590
|
-
updateSelectedDateTime() {
|
|
591
|
-
if (!this.enableTime || this.selectedDates.length === 0) {
|
|
592
|
-
return;
|
|
593
|
-
}
|
|
594
|
-
// Convert 12-hour to 24-hour if needed
|
|
595
|
-
let hours24 = this.selectedTime.hours;
|
|
596
|
-
if (this.timeFormat === "12") {
|
|
597
|
-
if (this.isPM && this.selectedTime.hours !== 12) {
|
|
598
|
-
hours24 = this.selectedTime.hours + 12;
|
|
599
|
-
}
|
|
600
|
-
else if (!this.isPM && this.selectedTime.hours === 12) {
|
|
601
|
-
hours24 = 0;
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
// Update all selected dates with new time
|
|
605
|
-
this.selectedDates = this.selectedDates.map((selectedDate) => {
|
|
606
|
-
const newDate = new Date(selectedDate.gregorian);
|
|
607
|
-
newDate.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
|
|
608
|
-
return {
|
|
609
|
-
...selectedDate,
|
|
610
|
-
gregorian: newDate,
|
|
611
|
-
time: {
|
|
612
|
-
hours: hours24,
|
|
613
|
-
minutes: this.selectedTime.minutes,
|
|
614
|
-
seconds: this.selectedTime.seconds,
|
|
615
|
-
},
|
|
616
|
-
formatted: {
|
|
617
|
-
...selectedDate.formatted,
|
|
618
|
-
time: this.formatTime(hours24, this.selectedTime.minutes, this.selectedTime.seconds),
|
|
619
|
-
},
|
|
620
|
-
};
|
|
621
|
-
});
|
|
622
|
-
}
|
|
623
|
-
getCustomStyles() {
|
|
624
|
-
return {
|
|
625
|
-
"--primary-color": this.styles.primaryColor || "#4f46e5",
|
|
626
|
-
"--secondary-color": this.styles.secondaryColor || "#818cf8",
|
|
627
|
-
"--background-color": this.styles.backgroundColor || "#ffffff",
|
|
628
|
-
"--text-color": this.styles.textColor || "#1f2937",
|
|
629
|
-
"--selected-date-color": this.styles.selectedDateColor || "#ffffff",
|
|
630
|
-
"--selected-date-background": this.styles.selectedDateBackground || "#4f46e5",
|
|
631
|
-
"--today-color": this.styles.todayColor || "#10b981",
|
|
632
|
-
"--disabled-color": this.styles.disabledColor || "#d1d5db",
|
|
633
|
-
"--border-color": this.styles.borderColor || "#e5e7eb",
|
|
634
|
-
"--hover-color": this.styles.hoverColor || "#f3f4f6",
|
|
635
|
-
"--font-family": this.styles.fontFamily || "system-ui, -apple-system, sans-serif",
|
|
636
|
-
"--font-size": this.styles.fontSize || "14px",
|
|
637
|
-
"--border-radius": this.styles.borderRadius || "8px",
|
|
638
|
-
};
|
|
639
|
-
}
|
|
640
|
-
};
|
|
641
|
-
__decorate([
|
|
642
|
-
Input(),
|
|
643
|
-
__metadata("design:type", Boolean)
|
|
644
|
-
], HijriDatePickerComponent.prototype, "canChangeMode", void 0);
|
|
645
|
-
__decorate([
|
|
646
|
-
Input(),
|
|
647
|
-
__metadata("design:type", String)
|
|
648
|
-
], HijriDatePickerComponent.prototype, "mode", void 0);
|
|
649
|
-
__decorate([
|
|
650
|
-
Input(),
|
|
651
|
-
__metadata("design:type", String)
|
|
652
|
-
], HijriDatePickerComponent.prototype, "dir", void 0);
|
|
653
|
-
__decorate([
|
|
654
|
-
Input(),
|
|
655
|
-
__metadata("design:type", String)
|
|
656
|
-
], HijriDatePickerComponent.prototype, "locale", void 0);
|
|
657
|
-
__decorate([
|
|
658
|
-
Input(),
|
|
659
|
-
__metadata("design:type", Boolean)
|
|
660
|
-
], HijriDatePickerComponent.prototype, "futureValidation", void 0);
|
|
661
|
-
__decorate([
|
|
662
|
-
Input(),
|
|
663
|
-
__metadata("design:type", Number)
|
|
664
|
-
], HijriDatePickerComponent.prototype, "futureYearsLimit", void 0);
|
|
665
|
-
__decorate([
|
|
666
|
-
Input(),
|
|
667
|
-
__metadata("design:type", Boolean)
|
|
668
|
-
], HijriDatePickerComponent.prototype, "isRequired", void 0);
|
|
669
|
-
__decorate([
|
|
670
|
-
Input(),
|
|
671
|
-
__metadata("design:type", Date)
|
|
672
|
-
], HijriDatePickerComponent.prototype, "minDate", void 0);
|
|
673
|
-
__decorate([
|
|
674
|
-
Input(),
|
|
675
|
-
__metadata("design:type", Date)
|
|
676
|
-
], HijriDatePickerComponent.prototype, "maxDate", void 0);
|
|
677
|
-
__decorate([
|
|
678
|
-
Input(),
|
|
679
|
-
__metadata("design:type", Boolean)
|
|
680
|
-
], HijriDatePickerComponent.prototype, "multiple", void 0);
|
|
681
|
-
__decorate([
|
|
682
|
-
Input(),
|
|
683
|
-
__metadata("design:type", Boolean)
|
|
684
|
-
], HijriDatePickerComponent.prototype, "showConfirmButton", void 0);
|
|
685
|
-
__decorate([
|
|
686
|
-
Input(),
|
|
687
|
-
__metadata("design:type", Date)
|
|
688
|
-
], HijriDatePickerComponent.prototype, "initialSelectedDate", void 0);
|
|
689
|
-
__decorate([
|
|
690
|
-
Input(),
|
|
691
|
-
__metadata("design:type", Array)
|
|
692
|
-
], HijriDatePickerComponent.prototype, "initialSelectedDates", void 0);
|
|
693
|
-
__decorate([
|
|
694
|
-
Input(),
|
|
695
|
-
__metadata("design:type", String)
|
|
696
|
-
], HijriDatePickerComponent.prototype, "submitTextButton", void 0);
|
|
697
|
-
__decorate([
|
|
698
|
-
Input(),
|
|
699
|
-
__metadata("design:type", String)
|
|
700
|
-
], HijriDatePickerComponent.prototype, "todaysDateText", void 0);
|
|
701
|
-
__decorate([
|
|
702
|
-
Input(),
|
|
703
|
-
__metadata("design:type", String)
|
|
704
|
-
], HijriDatePickerComponent.prototype, "ummAlQuraDateText", void 0);
|
|
705
|
-
__decorate([
|
|
706
|
-
Input(),
|
|
707
|
-
__metadata("design:type", String)
|
|
708
|
-
], HijriDatePickerComponent.prototype, "yearSelectLabel", void 0);
|
|
709
|
-
__decorate([
|
|
710
|
-
Input(),
|
|
711
|
-
__metadata("design:type", String)
|
|
712
|
-
], HijriDatePickerComponent.prototype, "monthSelectLabel", void 0);
|
|
713
|
-
__decorate([
|
|
714
|
-
Input(),
|
|
715
|
-
__metadata("design:type", Boolean)
|
|
716
|
-
], HijriDatePickerComponent.prototype, "todaysDateSection", void 0);
|
|
717
|
-
__decorate([
|
|
718
|
-
Input(),
|
|
719
|
-
__metadata("design:type", Boolean)
|
|
720
|
-
], HijriDatePickerComponent.prototype, "markToday", void 0);
|
|
721
|
-
__decorate([
|
|
722
|
-
Input(),
|
|
723
|
-
__metadata("design:type", Boolean)
|
|
724
|
-
], HijriDatePickerComponent.prototype, "disableYearPicker", void 0);
|
|
725
|
-
__decorate([
|
|
726
|
-
Input(),
|
|
727
|
-
__metadata("design:type", Boolean)
|
|
728
|
-
], HijriDatePickerComponent.prototype, "disableMonthPicker", void 0);
|
|
729
|
-
__decorate([
|
|
730
|
-
Input(),
|
|
731
|
-
__metadata("design:type", Boolean)
|
|
732
|
-
], HijriDatePickerComponent.prototype, "disableDayPicker", void 0);
|
|
733
|
-
__decorate([
|
|
734
|
-
Input(),
|
|
735
|
-
__metadata("design:type", Object)
|
|
736
|
-
], HijriDatePickerComponent.prototype, "styles", void 0);
|
|
737
|
-
__decorate([
|
|
738
|
-
Input(),
|
|
739
|
-
__metadata("design:type", Boolean)
|
|
740
|
-
], HijriDatePickerComponent.prototype, "enableTime", void 0);
|
|
741
|
-
__decorate([
|
|
742
|
-
Input(),
|
|
743
|
-
__metadata("design:type", String)
|
|
744
|
-
], HijriDatePickerComponent.prototype, "timeFormat", void 0);
|
|
745
|
-
__decorate([
|
|
746
|
-
Input(),
|
|
747
|
-
__metadata("design:type", Number)
|
|
748
|
-
], HijriDatePickerComponent.prototype, "minuteStep", void 0);
|
|
749
|
-
__decorate([
|
|
750
|
-
Input(),
|
|
751
|
-
__metadata("design:type", Boolean)
|
|
752
|
-
], HijriDatePickerComponent.prototype, "enableSeconds", void 0);
|
|
753
|
-
__decorate([
|
|
754
|
-
Input(),
|
|
755
|
-
__metadata("design:type", Object)
|
|
756
|
-
], HijriDatePickerComponent.prototype, "defaultTime", void 0);
|
|
757
|
-
__decorate([
|
|
758
|
-
Output(),
|
|
759
|
-
__metadata("design:type", Object)
|
|
760
|
-
], HijriDatePickerComponent.prototype, "dateSelected", void 0);
|
|
761
|
-
__decorate([
|
|
762
|
-
Output(),
|
|
763
|
-
__metadata("design:type", Object)
|
|
764
|
-
], HijriDatePickerComponent.prototype, "modeChanged", void 0);
|
|
765
|
-
HijriDatePickerComponent = __decorate([
|
|
766
|
-
Component({
|
|
767
|
-
selector: "hijri-date-picker",
|
|
768
|
-
standalone: true,
|
|
769
|
-
imports: [CommonModule],
|
|
770
|
-
templateUrl: "./hijri-date-picker.component.html",
|
|
771
|
-
styleUrls: ["./hijri-date-picker.component.css"],
|
|
772
|
-
})
|
|
773
|
-
], HijriDatePickerComponent);
|
|
774
|
-
export { HijriDatePickerComponent };
|