hijri-date-time-picker 1.0.1 → 1.0.2

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/dist/lib/hijri-date-picker.component.d.ts +6 -5
  2. package/dist/lib/hijri-date-picker.component.js +195 -119
  3. package/dist/lib/hijri-date-picker.types.d.ts +4 -4
  4. package/dist/lib/hijri-date-picker.types.js +66 -10
  5. package/package.json +7 -6
package/dist/lib/hijri-date-picker.component.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
2
- import { DateMode, Direction, Locale, SelectedDate, DatePickerStyles, TimeFormat } from './hijri-date-picker.types';
1
+ import { EventEmitter, OnInit, OnChanges, SimpleChanges } from "@angular/core";
2
+ import { DateMode, Direction, Locale, SelectedDate, DatePickerStyles, TimeFormat } from "./hijri-date-picker.types";
3
3
  export declare class HijriDatePickerComponent implements OnInit, OnChanges {
4
4
  canChangeMode: boolean;
5
5
  mode: DateMode;
@@ -67,6 +67,7 @@ export declare class HijriDatePickerComponent implements OnInit, OnChanges {
67
67
  private isDateDisabled;
68
68
  private isDateSelected;
69
69
  onDayClick(dayInfo: any): void;
70
+ private fillDateRange;
70
71
  private createSelectedDate;
71
72
  private formatGregorianDate;
72
73
  private formatHijriDate;
@@ -77,9 +78,9 @@ export declare class HijriDatePickerComponent implements OnInit, OnChanges {
77
78
  toggleMode(): void;
78
79
  selectToday(): void;
79
80
  onSubmit(): void;
80
- incrementTime(type: 'hours' | 'minutes' | 'seconds'): void;
81
- decrementTime(type: 'hours' | 'minutes' | 'seconds'): void;
82
- onTimeChange(type: 'hours' | 'minutes' | 'seconds', event: any): void;
81
+ incrementTime(type: "hours" | "minutes" | "seconds"): void;
82
+ decrementTime(type: "hours" | "minutes" | "seconds"): void;
83
+ onTimeChange(type: "hours" | "minutes" | "seconds", event: any): void;
83
84
  setAMPM(pm: boolean): void;
84
85
  private formatTime;
85
86
  private updateSelectedDateTime;
package/dist/lib/hijri-date-picker.component.js CHANGED
@@ -7,16 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
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';
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
14
  let HijriDatePickerComponent = class HijriDatePickerComponent {
15
15
  // Mode & Configuration
16
16
  canChangeMode = true;
17
- mode = 'greg';
18
- dir = 'ltr';
19
- locale = 'en';
17
+ mode = "greg";
18
+ dir = "ltr";
19
+ locale = "en";
20
20
  // Validation
21
21
  futureValidation = true;
22
22
  futureYearsLimit = 10;
@@ -29,11 +29,11 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
29
29
  initialSelectedDate; // For single selection mode - bind initial date
30
30
  initialSelectedDates; // For multiple selection mode - bind initial dates
31
31
  // Labels
32
- submitTextButton = 'Submit';
33
- todaysDateText = 'Today';
34
- ummAlQuraDateText = 'Umm Al-Qura Calendar';
35
- yearSelectLabel = 'Year';
36
- monthSelectLabel = 'Month';
32
+ submitTextButton = "Submit";
33
+ todaysDateText = "Today";
34
+ ummAlQuraDateText = "Umm Al-Qura Calendar";
35
+ yearSelectLabel = "Year";
36
+ monthSelectLabel = "Month";
37
37
  // Display Options
38
38
  todaysDateSection = true;
39
39
  markToday = true;
@@ -44,7 +44,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
44
44
  styles = {};
45
45
  // Time Configuration
46
46
  enableTime = false;
47
- timeFormat = '24';
47
+ timeFormat = "24";
48
48
  minuteStep = 1;
49
49
  enableSeconds = false;
50
50
  defaultTime;
@@ -63,12 +63,15 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
63
63
  months = [];
64
64
  weekdays = [];
65
65
  // Time state
66
- selectedTime = {
67
- hours: 0,
68
- minutes: 0,
69
- seconds: 0
70
- };
71
- isPM = false;
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;
72
75
  ngOnInit() {
73
76
  this.initializeCalendar();
74
77
  this.initializeSelectedDates();
@@ -76,27 +79,50 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
76
79
  this.updateLocaleData();
77
80
  this.generateYears();
78
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";
79
88
  }
80
89
  ngOnChanges(changes) {
81
- if (changes['mode'] || changes['locale']) {
90
+ if (changes["mode"] || changes["locale"]) {
82
91
  this.updateLocaleData();
83
92
  this.generateCalendar();
84
93
  }
85
94
  // Handle changes to initial selected dates
86
- if (changes['initialSelectedDate'] || changes['initialSelectedDates']) {
95
+ if (changes["initialSelectedDate"] || changes["initialSelectedDates"]) {
87
96
  this.initializeSelectedDates();
88
97
  this.generateCalendar();
89
98
  }
90
99
  // Handle changes to minDate or maxDate
91
- if (changes['minDate'] || changes['maxDate']) {
100
+ if (changes["minDate"] || changes["maxDate"]) {
92
101
  this.generateYears();
93
102
  this.generateCalendar();
94
103
  }
95
104
  }
96
105
  initializeCalendar() {
97
- const hijriToday = new HijriDate();
98
- this.currentHijriYear = hijriToday.getFullYear();
99
- this.currentHijriMonth = hijriToday.getMonth();
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();
100
126
  }
101
127
  initializeSelectedDates() {
102
128
  // Handle single selection mode
@@ -104,8 +130,10 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
104
130
  this.selectedDates = [this.createSelectedDate(this.initialSelectedDate)];
105
131
  }
106
132
  // Handle multiple selection mode
107
- if (this.multiple && this.initialSelectedDates && this.initialSelectedDates.length > 0) {
108
- this.selectedDates = this.initialSelectedDates.map(date => this.createSelectedDate(date));
133
+ if (this.multiple &&
134
+ this.initialSelectedDates &&
135
+ this.initialSelectedDates.length > 0) {
136
+ this.selectedDates = this.initialSelectedDates.map((date) => this.createSelectedDate(date));
109
137
  }
110
138
  }
111
139
  initializeTime() {
@@ -117,10 +145,10 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
117
145
  this.selectedTime = {
118
146
  hours: this.defaultTime.hours,
119
147
  minutes: this.defaultTime.minutes,
120
- seconds: this.defaultTime.seconds || 0
148
+ seconds: this.defaultTime.seconds || 0,
121
149
  };
122
150
  // Set AM/PM for 12-hour format
123
- if (this.timeFormat === '12') {
151
+ if (this.timeFormat === "12") {
124
152
  this.isPM = this.selectedTime.hours >= 12;
125
153
  }
126
154
  }
@@ -130,28 +158,29 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
130
158
  this.selectedTime = {
131
159
  hours: now.getHours(),
132
160
  minutes: now.getMinutes(),
133
- seconds: now.getSeconds()
161
+ seconds: now.getSeconds(),
134
162
  };
135
163
  this.isPM = this.selectedTime.hours >= 12;
136
164
  }
137
165
  }
138
166
  updateLocaleData() {
139
167
  // Update weekday names
140
- this.weekdays = this.locale === 'ar' ? WEEKDAY_NAMES_AR : WEEKDAY_NAMES_EN;
168
+ this.weekdays = this.locale === "ar" ? WEEKDAY_NAMES_AR : WEEKDAY_NAMES_EN;
141
169
  // Update month names based on mode and locale
142
- if (this.mode === 'hijri') {
143
- this.months = this.locale === 'ar' ? HIJRI_MONTHS_AR : HIJRI_MONTHS_EN;
170
+ if (this.mode === "hijri") {
171
+ this.months = this.locale === "ar" ? HIJRI_MONTHS_AR : HIJRI_MONTHS_EN;
144
172
  }
145
173
  else {
146
- this.months = this.locale === 'ar' ? GREGORIAN_MONTHS_AR : GREGORIAN_MONTHS_EN;
174
+ this.months =
175
+ this.locale === "ar" ? GREGORIAN_MONTHS_AR : GREGORIAN_MONTHS_EN;
147
176
  }
148
177
  }
149
178
  generateYears() {
150
- const currentYear = this.mode === 'hijri' ? this.currentHijriYear : this.currentYear;
179
+ const currentYear = this.mode === "hijri" ? this.currentHijriYear : this.currentYear;
151
180
  let startYear = currentYear - 100;
152
181
  let endYear = currentYear + this.futureYearsLimit;
153
182
  // Adjust year range based on minDate and maxDate
154
- if (this.mode === 'greg') {
183
+ if (this.mode === "greg") {
155
184
  if (this.minDate) {
156
185
  startYear = Math.max(startYear, this.minDate.getFullYear());
157
186
  }
@@ -159,7 +188,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
159
188
  endYear = Math.min(endYear, this.maxDate.getFullYear());
160
189
  }
161
190
  }
162
- else if (this.mode === 'hijri') {
191
+ else if (this.mode === "hijri") {
163
192
  if (this.minDate) {
164
193
  const minHijri = toHijri(this.minDate);
165
194
  startYear = Math.max(startYear, minHijri.getFullYear());
@@ -176,7 +205,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
176
205
  }
177
206
  generateCalendar() {
178
207
  this.calendarDays = [];
179
- if (this.mode === 'hijri') {
208
+ if (this.mode === "hijri") {
180
209
  this.generateHijriCalendar();
181
210
  }
182
211
  else {
@@ -204,7 +233,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
204
233
  isToday,
205
234
  isDisabled,
206
235
  isSelected,
207
- disabled: false
236
+ disabled: false,
208
237
  });
209
238
  }
210
239
  }
@@ -232,7 +261,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
232
261
  isToday,
233
262
  isDisabled,
234
263
  isSelected,
235
- disabled: false
264
+ disabled: false,
236
265
  });
237
266
  }
238
267
  }
@@ -247,9 +276,9 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
247
276
  }
248
277
  }
249
278
  isSameDay(date1, date2) {
250
- return date1.getFullYear() === date2.getFullYear() &&
279
+ return (date1.getFullYear() === date2.getFullYear() &&
251
280
  date1.getMonth() === date2.getMonth() &&
252
- date1.getDate() === date2.getDate();
281
+ date1.getDate() === date2.getDate());
253
282
  }
254
283
  isDateDisabled(date) {
255
284
  // Check minDate constraint
@@ -277,7 +306,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
277
306
  return false;
278
307
  }
279
308
  isDateSelected(date) {
280
- return this.selectedDates.some(selected => this.isSameDay(selected.gregorian, date));
309
+ return this.selectedDates.some((selected) => this.isSameDay(selected.gregorian, date));
281
310
  }
282
311
  onDayClick(dayInfo) {
283
312
  if (dayInfo.disabled || dayInfo.isDisabled) {
@@ -285,12 +314,23 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
285
314
  }
286
315
  const selectedDate = this.createSelectedDate(dayInfo.date);
287
316
  if (this.multiple) {
288
- const index = this.selectedDates.findIndex(d => this.isSameDay(d.gregorian, dayInfo.date));
317
+ const index = this.selectedDates.findIndex((d) => this.isSameDay(d.gregorian, dayInfo.date));
289
318
  if (index > -1) {
319
+ // Remove the clicked date if already selected
290
320
  this.selectedDates.splice(index, 1);
291
321
  }
292
322
  else {
293
- this.selectedDates.push(selectedDate);
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
+ }
294
334
  }
295
335
  if (!this.showConfirmButton) {
296
336
  this.dateSelected.emit([...this.selectedDates]);
@@ -304,12 +344,31 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
304
344
  }
305
345
  this.generateCalendar();
306
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
+ }
307
364
  createSelectedDate(date) {
308
- const hijriDate = toHijri(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);
309
368
  // If time is enabled, set the time on the date object
310
369
  if (this.enableTime) {
311
370
  let hours24 = this.selectedTime.hours;
312
- if (this.timeFormat === '12') {
371
+ if (this.timeFormat === "12") {
313
372
  if (this.isPM && this.selectedTime.hours !== 12) {
314
373
  hours24 = this.selectedTime.hours + 12;
315
374
  }
@@ -317,48 +376,54 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
317
376
  hours24 = 0;
318
377
  }
319
378
  }
320
- date.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
379
+ dateObj.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
321
380
  }
322
381
  return {
323
- gregorian: date,
382
+ gregorian: dateObj,
324
383
  hijri: {
325
384
  year: hijriDate.getFullYear(),
326
385
  month: hijriDate.getMonth(),
327
- day: hijriDate.getDate()
386
+ day: hijriDate.getDate(),
328
387
  },
329
- time: this.enableTime ? {
330
- hours: date.getHours(),
331
- minutes: date.getMinutes(),
332
- seconds: date.getSeconds()
333
- } : undefined,
388
+ time: this.enableTime
389
+ ? {
390
+ hours: dateObj.getHours(),
391
+ minutes: dateObj.getMinutes(),
392
+ seconds: dateObj.getSeconds(),
393
+ }
394
+ : undefined,
334
395
  formatted: {
335
- gregorian: this.formatGregorianDate(date),
396
+ gregorian: this.formatGregorianDate(dateObj),
336
397
  hijri: this.formatHijriDate(hijriDate),
337
- time: this.enableTime ? this.formatTime(date.getHours(), date.getMinutes(), date.getSeconds()) : undefined
338
- }
398
+ time: this.enableTime
399
+ ? this.formatTime(dateObj.getHours(), dateObj.getMinutes(), dateObj.getSeconds())
400
+ : undefined,
401
+ },
339
402
  };
340
403
  }
341
404
  formatGregorianDate(date) {
342
405
  const day = date.getDate();
343
- const month = this.locale === 'ar' ? GREGORIAN_MONTHS_AR[date.getMonth()] : GREGORIAN_MONTHS_EN[date.getMonth()];
406
+ const month = this.locale === "ar"
407
+ ? GREGORIAN_MONTHS_AR[date.getMonth()]
408
+ : GREGORIAN_MONTHS_EN[date.getMonth()];
344
409
  const year = date.getFullYear();
345
- return this.locale === 'ar'
410
+ return this.locale === "ar"
346
411
  ? `${day} ${month} ${year}`
347
412
  : `${month} ${day}, ${year}`;
348
413
  }
349
414
  formatHijriDate(hijriDate) {
350
415
  const day = hijriDate.getDate();
351
- const month = this.locale === 'ar'
416
+ const month = this.locale === "ar"
352
417
  ? HIJRI_MONTHS_AR[hijriDate.getMonth()]
353
418
  : HIJRI_MONTHS_EN[hijriDate.getMonth()];
354
419
  const year = hijriDate.getFullYear();
355
- return this.locale === 'ar'
420
+ return this.locale === "ar"
356
421
  ? `${day} ${month} ${year} هـ`
357
422
  : `${day} ${month} ${year} AH`;
358
423
  }
359
424
  onYearChange(event) {
360
425
  const year = parseInt(event.target.value);
361
- if (this.mode === 'hijri') {
426
+ if (this.mode === "hijri") {
362
427
  this.currentHijriYear = year;
363
428
  }
364
429
  else {
@@ -368,7 +433,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
368
433
  }
369
434
  onMonthChange(event) {
370
435
  const month = parseInt(event.target.value);
371
- if (this.mode === 'hijri') {
436
+ if (this.mode === "hijri") {
372
437
  this.currentHijriMonth = month;
373
438
  }
374
439
  else {
@@ -377,7 +442,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
377
442
  this.generateCalendar();
378
443
  }
379
444
  previousMonth() {
380
- if (this.mode === 'hijri') {
445
+ if (this.mode === "hijri") {
381
446
  if (this.currentHijriMonth === 0) {
382
447
  this.currentHijriMonth = 11;
383
448
  this.currentHijriYear--;
@@ -398,7 +463,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
398
463
  this.generateCalendar();
399
464
  }
400
465
  nextMonth() {
401
- if (this.mode === 'hijri') {
466
+ if (this.mode === "hijri") {
402
467
  if (this.currentHijriMonth === 11) {
403
468
  this.currentHijriMonth = 0;
404
469
  this.currentHijriYear++;
@@ -422,7 +487,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
422
487
  if (!this.canChangeMode) {
423
488
  return;
424
489
  }
425
- this.mode = this.mode === 'greg' ? 'hijri' : 'greg';
490
+ this.mode = this.mode === "greg" ? "hijri" : "greg";
426
491
  this.updateLocaleData();
427
492
  this.generateYears();
428
493
  this.generateCalendar();
@@ -445,43 +510,54 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
445
510
  }
446
511
  // Time handling methods
447
512
  incrementTime(type) {
448
- if (type === 'hours') {
449
- const max = this.timeFormat === '12' ? 12 : 23;
450
- this.selectedTime.hours = (this.selectedTime.hours + 1) > max ? (this.timeFormat === '12' ? 1 : 0) : this.selectedTime.hours + 1;
451
- }
452
- else if (type === 'minutes') {
453
- this.selectedTime.minutes = (this.selectedTime.minutes + this.minuteStep) > 59 ? 0 : this.selectedTime.minutes + this.minuteStep;
454
- }
455
- else if (type === 'seconds') {
456
- this.selectedTime.seconds = (this.selectedTime.seconds + 1) > 59 ? 0 : this.selectedTime.seconds + 1;
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;
457
528
  }
458
529
  this.updateSelectedDateTime();
459
530
  }
460
531
  decrementTime(type) {
461
- if (type === 'hours') {
462
- const min = this.timeFormat === '12' ? 1 : 0;
463
- const max = this.timeFormat === '12' ? 12 : 23;
464
- this.selectedTime.hours = (this.selectedTime.hours - 1) < min ? max : this.selectedTime.hours - 1;
465
- }
466
- else if (type === 'minutes') {
467
- this.selectedTime.minutes = (this.selectedTime.minutes - this.minuteStep) < 0 ? 59 : this.selectedTime.minutes - this.minuteStep;
468
- }
469
- else if (type === 'seconds') {
470
- this.selectedTime.seconds = (this.selectedTime.seconds - 1) < 0 ? 59 : this.selectedTime.seconds - 1;
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;
471
547
  }
472
548
  this.updateSelectedDateTime();
473
549
  }
474
550
  onTimeChange(type, event) {
475
551
  const value = parseInt(event.target.value) || 0;
476
- if (type === 'hours') {
477
- const min = this.timeFormat === '12' ? 1 : 0;
478
- const max = this.timeFormat === '12' ? 12 : 23;
552
+ if (type === "hours") {
553
+ const min = this.timeFormat === "12" ? 1 : 0;
554
+ const max = this.timeFormat === "12" ? 12 : 23;
479
555
  this.selectedTime.hours = Math.max(min, Math.min(max, value));
480
556
  }
481
- else if (type === 'minutes') {
557
+ else if (type === "minutes") {
482
558
  this.selectedTime.minutes = Math.max(0, Math.min(59, value));
483
559
  }
484
- else if (type === 'seconds') {
560
+ else if (type === "seconds") {
485
561
  this.selectedTime.seconds = Math.max(0, Math.min(59, value));
486
562
  }
487
563
  this.updateSelectedDateTime();
@@ -491,21 +567,21 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
491
567
  this.updateSelectedDateTime();
492
568
  }
493
569
  formatTime(hours, minutes, seconds) {
494
- if (this.timeFormat === '12') {
570
+ if (this.timeFormat === "12") {
495
571
  const displayHours = hours % 12 || 12;
496
- const ampm = hours >= 12 ? 'PM' : 'AM';
497
- const minutesStr = minutes.toString().padStart(2, '0');
572
+ const ampm = hours >= 12 ? "PM" : "AM";
573
+ const minutesStr = minutes.toString().padStart(2, "0");
498
574
  if (this.enableSeconds) {
499
- const secondsStr = seconds.toString().padStart(2, '0');
575
+ const secondsStr = seconds.toString().padStart(2, "0");
500
576
  return `${displayHours}:${minutesStr}:${secondsStr} ${ampm}`;
501
577
  }
502
578
  return `${displayHours}:${minutesStr} ${ampm}`;
503
579
  }
504
580
  else {
505
- const hoursStr = hours.toString().padStart(2, '0');
506
- const minutesStr = minutes.toString().padStart(2, '0');
581
+ const hoursStr = hours.toString().padStart(2, "0");
582
+ const minutesStr = minutes.toString().padStart(2, "0");
507
583
  if (this.enableSeconds) {
508
- const secondsStr = seconds.toString().padStart(2, '0');
584
+ const secondsStr = seconds.toString().padStart(2, "0");
509
585
  return `${hoursStr}:${minutesStr}:${secondsStr}`;
510
586
  }
511
587
  return `${hoursStr}:${minutesStr}`;
@@ -517,7 +593,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
517
593
  }
518
594
  // Convert 12-hour to 24-hour if needed
519
595
  let hours24 = this.selectedTime.hours;
520
- if (this.timeFormat === '12') {
596
+ if (this.timeFormat === "12") {
521
597
  if (this.isPM && this.selectedTime.hours !== 12) {
522
598
  hours24 = this.selectedTime.hours + 12;
523
599
  }
@@ -526,7 +602,7 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
526
602
  }
527
603
  }
528
604
  // Update all selected dates with new time
529
- this.selectedDates = this.selectedDates.map(selectedDate => {
605
+ this.selectedDates = this.selectedDates.map((selectedDate) => {
530
606
  const newDate = new Date(selectedDate.gregorian);
531
607
  newDate.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
532
608
  return {
@@ -535,30 +611,30 @@ let HijriDatePickerComponent = class HijriDatePickerComponent {
535
611
  time: {
536
612
  hours: hours24,
537
613
  minutes: this.selectedTime.minutes,
538
- seconds: this.selectedTime.seconds
614
+ seconds: this.selectedTime.seconds,
539
615
  },
540
616
  formatted: {
541
617
  ...selectedDate.formatted,
542
- time: this.formatTime(hours24, this.selectedTime.minutes, this.selectedTime.seconds)
543
- }
618
+ time: this.formatTime(hours24, this.selectedTime.minutes, this.selectedTime.seconds),
619
+ },
544
620
  };
545
621
  });
546
622
  }
547
623
  getCustomStyles() {
548
624
  return {
549
- '--primary-color': this.styles.primaryColor || '#4f46e5',
550
- '--secondary-color': this.styles.secondaryColor || '#818cf8',
551
- '--background-color': this.styles.backgroundColor || '#ffffff',
552
- '--text-color': this.styles.textColor || '#1f2937',
553
- '--selected-date-color': this.styles.selectedDateColor || '#ffffff',
554
- '--selected-date-background': this.styles.selectedDateBackground || '#4f46e5',
555
- '--today-color': this.styles.todayColor || '#10b981',
556
- '--disabled-color': this.styles.disabledColor || '#d1d5db',
557
- '--border-color': this.styles.borderColor || '#e5e7eb',
558
- '--hover-color': this.styles.hoverColor || '#f3f4f6',
559
- '--font-family': this.styles.fontFamily || 'system-ui, -apple-system, sans-serif',
560
- '--font-size': this.styles.fontSize || '14px',
561
- '--border-radius': this.styles.borderRadius || '8px'
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",
562
638
  };
563
639
  }
564
640
  };
@@ -688,11 +764,11 @@ __decorate([
688
764
  ], HijriDatePickerComponent.prototype, "modeChanged", void 0);
689
765
  HijriDatePickerComponent = __decorate([
690
766
  Component({
691
- selector: 'hijri-date-picker',
767
+ selector: "hijri-date-picker",
692
768
  standalone: true,
693
769
  imports: [CommonModule],
694
- templateUrl: './hijri-date-picker.component.html',
695
- styleUrls: ['./hijri-date-picker.component.css']
770
+ templateUrl: "./hijri-date-picker.component.html",
771
+ styleUrls: ["./hijri-date-picker.component.css"],
696
772
  })
697
773
  ], HijriDatePickerComponent);
698
774
  export { HijriDatePickerComponent };
package/dist/lib/hijri-date-picker.types.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  /**
2
2
  * Date picker mode types
3
3
  */
4
- export type DateMode = 'greg' | 'hijri';
4
+ export type DateMode = "greg" | "hijri";
5
5
  /**
6
6
  * Text direction types
7
7
  */
8
- export type Direction = 'ltr' | 'rtl';
8
+ export type Direction = "ltr" | "rtl";
9
9
  /**
10
10
  * Locale types
11
11
  */
12
- export type Locale = 'en' | 'ar';
12
+ export type Locale = "en" | "ar";
13
13
  /**
14
14
  * Selected date information
15
15
  */
@@ -34,7 +34,7 @@ export interface SelectedDate {
34
34
  /**
35
35
  * Time format types
36
36
  */
37
- export type TimeFormat = '12' | '24';
37
+ export type TimeFormat = "12" | "24";
38
38
  /**
39
39
  * Custom styling configuration
40
40
  */
package/dist/lib/hijri-date-picker.types.js CHANGED
@@ -2,20 +2,76 @@
2
2
  * Month names in different locales
3
3
  */
4
4
  export const GREGORIAN_MONTHS_EN = [
5
- 'January', 'February', 'March', 'April', 'May', 'June',
6
- 'July', 'August', 'September', 'October', 'November', 'December'
5
+ "January",
6
+ "February",
7
+ "March",
8
+ "April",
9
+ "May",
10
+ "June",
11
+ "July",
12
+ "August",
13
+ "September",
14
+ "October",
15
+ "November",
16
+ "December",
7
17
  ];
8
18
  export const GREGORIAN_MONTHS_AR = [
9
- 'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
10
- 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
19
+ "يناير",
20
+ "فبراير",
21
+ "مارس",
22
+ "أبريل",
23
+ "مايو",
24
+ "يونيو",
25
+ "يوليو",
26
+ "أغسطس",
27
+ "سبتمبر",
28
+ "أكتوبر",
29
+ "نوفمبر",
30
+ "ديسمبر",
11
31
  ];
12
32
  export const HIJRI_MONTHS_EN = [
13
- 'Muharram', 'Safar', 'Rabi\' al-Awwal', 'Rabi\' al-Thani', 'Jumada al-Awwal', 'Jumada al-Thani',
14
- 'Rajab', 'Sha\'ban', 'Ramadan', 'Shawwal', 'Dhu al-Qi\'dah', 'Dhu al-Hijjah'
33
+ "Muharram",
34
+ "Safar",
35
+ "Rabi' al-Awwal",
36
+ "Rabi' al-Thani",
37
+ "Jumada al-Awwal",
38
+ "Jumada al-Thani",
39
+ "Rajab",
40
+ "Sha'ban",
41
+ "Ramadan",
42
+ "Shawwal",
43
+ "Dhu al-Qi'dah",
44
+ "Dhu al-Hijjah",
15
45
  ];
16
46
  export const HIJRI_MONTHS_AR = [
17
- 'محرم', 'صفر', 'ربيع الأول', 'ربيع الثاني', 'جمادى الأولى', 'جمادى الثانية',
18
- 'رجب', 'شعبان', 'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة'
47
+ "محرم",
48
+ "صفر",
49
+ "ربيع الأول",
50
+ "ربيع الثاني",
51
+ "جمادى الأولى",
52
+ "جمادى الثانية",
53
+ "رجب",
54
+ "شعبان",
55
+ "رمضان",
56
+ "شوال",
57
+ "ذو القعدة",
58
+ "ذو الحجة",
59
+ ];
60
+ export const WEEKDAY_NAMES_EN = [
61
+ "Sun",
62
+ "Mon",
63
+ "Tue",
64
+ "Wed",
65
+ "Thu",
66
+ "Fri",
67
+ "Sat",
68
+ ];
69
+ export const WEEKDAY_NAMES_AR = [
70
+ "الأحد",
71
+ "الإثنين",
72
+ "الثلاثاء",
73
+ "الأربعاء",
74
+ "الخميس",
75
+ "الجمعة",
76
+ "السبت",
19
77
  ];
20
- export const WEEKDAY_NAMES_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
21
- export const WEEKDAY_NAMES_AR = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hijri-date-time-picker",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Angular standalone component for dual-mode Gregorian and Hijri date selection",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -32,16 +32,17 @@
32
32
  "url": "git+https://github.com/hanygamal72/hijri-date-time-picker.git"
33
33
  },
34
34
  "peerDependencies": {
35
- "@angular/core": ">=15.0.0",
36
- "@angular/common": ">=15.0.0"
35
+ "@angular/common": ">=15.0.0",
36
+ "@angular/core": ">=15.0.0"
37
37
  },
38
38
  "dependencies": {
39
- "hijri-date": "^0.2.2"
39
+ "hijri-date": "^0.2.2",
40
+ "remixicon": "^4.7.0"
40
41
  },
41
42
  "devDependencies": {
42
- "@angular/core": "^17.0.0",
43
43
  "@angular/common": "^17.0.0",
44
+ "@angular/core": "^17.0.0",
44
45
  "@angular/platform-browser": "^17.0.0",
45
46
  "typescript": "^5.0.0"
46
47
  }
47
- }
48
+ }