hijri-date-time-picker 1.0.2 → 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/README.md +3 -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 +7 -9
- package/{dist/demo.js → src/demo.ts} +33 -36
- 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 -185
- package/dist/demo.d.ts +0 -12
- 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/fesm2022/hijri-date-time-picker.mjs +0 -634
- package/dist/fesm2022/hijri-date-time-picker.mjs.map +0 -1
- 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
- /package/{dist/index.d.ts → src/index.ts} +0 -0
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
<div class="hijri-date-picker" [dir]="dir" [style]="getCustomStyles()">
|
|
2
|
+
<!-- Header Section -->
|
|
3
|
+
<div class="picker-header">
|
|
4
|
+
<!-- Mode Toggle Button -->
|
|
5
|
+
<button
|
|
6
|
+
*ngIf="canChangeMode"
|
|
7
|
+
class="mode-toggle-btn"
|
|
8
|
+
(click)="toggleMode()"
|
|
9
|
+
[attr.aria-label]="
|
|
10
|
+
mode === 'greg' ? 'Switch to Hijri' : 'Switch to Gregorian'
|
|
11
|
+
"
|
|
12
|
+
>
|
|
13
|
+
{{
|
|
14
|
+
mode === "greg"
|
|
15
|
+
? locale === "ar"
|
|
16
|
+
? "تقويم هجري"
|
|
17
|
+
: "Hijri"
|
|
18
|
+
: locale === "ar"
|
|
19
|
+
? "تقويم ميلادي"
|
|
20
|
+
: "Gregorian"
|
|
21
|
+
}}
|
|
22
|
+
</button>
|
|
23
|
+
|
|
24
|
+
<!-- Today's Date Section -->
|
|
25
|
+
<div *ngIf="todaysDateSection" class="todays-date">
|
|
26
|
+
<button class="today-btn" (click)="selectToday()">
|
|
27
|
+
{{ todaysDateText }}
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- Calendar Controls -->
|
|
33
|
+
<div class="calendar-controls">
|
|
34
|
+
<!-- Year Picker -->
|
|
35
|
+
<div class="control-group" *ngIf="!disableYearPicker">
|
|
36
|
+
<label [attr.for]="'year-select'">{{ yearSelectLabel }}</label>
|
|
37
|
+
<select
|
|
38
|
+
id="year-select"
|
|
39
|
+
(change)="onYearChange($event)"
|
|
40
|
+
class="year-select"
|
|
41
|
+
>
|
|
42
|
+
<option
|
|
43
|
+
*ngFor="let year of years"
|
|
44
|
+
[value]="year"
|
|
45
|
+
[selected]="
|
|
46
|
+
year === (mode === 'hijri' ? currentHijriYear : currentYear)
|
|
47
|
+
"
|
|
48
|
+
>
|
|
49
|
+
{{ year }}
|
|
50
|
+
</option>
|
|
51
|
+
</select>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- Month Picker -->
|
|
55
|
+
<div class="control-group" *ngIf="!disableMonthPicker">
|
|
56
|
+
<label [attr.for]="'month-select'">{{ monthSelectLabel }}</label>
|
|
57
|
+
<select
|
|
58
|
+
id="month-select"
|
|
59
|
+
(change)="onMonthChange($event)"
|
|
60
|
+
class="month-select"
|
|
61
|
+
>
|
|
62
|
+
<option
|
|
63
|
+
*ngFor="let month of months; let i = index"
|
|
64
|
+
[value]="i"
|
|
65
|
+
[selected]="
|
|
66
|
+
i === (mode === 'hijri' ? currentHijriMonth : currentMonth)
|
|
67
|
+
"
|
|
68
|
+
>
|
|
69
|
+
{{ month }}
|
|
70
|
+
</option>
|
|
71
|
+
</select>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<!-- Navigation Buttons -->
|
|
75
|
+
<!-- <div class="navigation-buttons">
|
|
76
|
+
<button
|
|
77
|
+
class="nav-btn prev-btn"
|
|
78
|
+
(click)="previousMonth()"
|
|
79
|
+
[attr.aria-label]="locale === 'ar' ? 'الشهر السابق' : 'Previous Month'"
|
|
80
|
+
>
|
|
81
|
+
{{ dir === "rtl" ? "←" : "→" }}
|
|
82
|
+
</button>
|
|
83
|
+
<button
|
|
84
|
+
class="nav-btn next-btn"
|
|
85
|
+
(click)="nextMonth()"
|
|
86
|
+
[attr.aria-label]="locale === 'ar' ? 'الشهر التالي' : 'Next Month'"
|
|
87
|
+
>
|
|
88
|
+
{{ dir === "rtl" ? "→" : "←" }}
|
|
89
|
+
</button>
|
|
90
|
+
</div> -->
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<!-- Calendar Grid -->
|
|
94
|
+
<div class="calendar-grid" *ngIf="!disableDayPicker">
|
|
95
|
+
<!-- Weekday Headers -->
|
|
96
|
+
<div class="weekday-header">
|
|
97
|
+
<div class="weekday" *ngFor="let weekday of weekdays">
|
|
98
|
+
{{ weekday }}
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Calendar Days -->
|
|
103
|
+
<div class="calendar-days">
|
|
104
|
+
<div
|
|
105
|
+
*ngFor="let dayInfo of calendarDays"
|
|
106
|
+
class="day-cell"
|
|
107
|
+
[class.empty]="dayInfo.day === null"
|
|
108
|
+
[class.today]="markToday && dayInfo.isToday"
|
|
109
|
+
[class.selected]="dayInfo.isSelected"
|
|
110
|
+
[class.disabled]="dayInfo.isDisabled"
|
|
111
|
+
(click)="onDayClick(dayInfo)"
|
|
112
|
+
>
|
|
113
|
+
<span *ngIf="dayInfo.day !== null">{{ dayInfo.day }}</span>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<!-- Time Picker Section -->
|
|
119
|
+
<div class="time-picker" *ngIf="enableTime">
|
|
120
|
+
<!-- <div class="time-picker-label">
|
|
121
|
+
{{ locale === "ar" ? "الوقت" : "Time" }}
|
|
122
|
+
</div> -->
|
|
123
|
+
|
|
124
|
+
<div class="time-inputs">
|
|
125
|
+
<!-- Hours Display -->
|
|
126
|
+
<div class="time-input-group">
|
|
127
|
+
<div class="time-label">{{ locale === "ar" ? "س" : "H" }}</div>
|
|
128
|
+
<button class="time-btn" (click)="incrementTime('hours')">
|
|
129
|
+
<i class="ri-arrow-up-s-line"></i>
|
|
130
|
+
</button>
|
|
131
|
+
<div class="time-display">
|
|
132
|
+
{{
|
|
133
|
+
(timeFormat === "12"
|
|
134
|
+
? selectedTime.hours % 12 || 12
|
|
135
|
+
: selectedTime.hours
|
|
136
|
+
) | number : "2.0-0"
|
|
137
|
+
}}
|
|
138
|
+
</div>
|
|
139
|
+
<button class="time-btn" (click)="decrementTime('hours')">
|
|
140
|
+
<i class="ri-arrow-down-s-line"></i>
|
|
141
|
+
</button>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<span class="time-separator">:</span>
|
|
145
|
+
|
|
146
|
+
<!-- Minutes Display -->
|
|
147
|
+
<div class="time-input-group">
|
|
148
|
+
<div class="time-label">{{ locale === "ar" ? "د" : "M" }}</div>
|
|
149
|
+
<button class="time-btn" (click)="incrementTime('minutes')">
|
|
150
|
+
<i class="ri-arrow-up-s-line"></i>
|
|
151
|
+
</button>
|
|
152
|
+
<div class="time-display">
|
|
153
|
+
{{ selectedTime.minutes | number : "2.0-0" }}
|
|
154
|
+
</div>
|
|
155
|
+
<button class="time-btn" (click)="decrementTime('minutes')">
|
|
156
|
+
<i class="ri-arrow-down-s-line"></i>
|
|
157
|
+
</button>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<!-- Seconds Display (Optional) -->
|
|
161
|
+
<ng-container *ngIf="enableSeconds">
|
|
162
|
+
<span class="time-separator">:</span>
|
|
163
|
+
<div class="time-input-group">
|
|
164
|
+
<div class="time-label">{{ locale === "ar" ? "ث" : "S" }}</div>
|
|
165
|
+
<button class="time-btn" (click)="incrementTime('seconds')">
|
|
166
|
+
<i class="ri-arrow-up-s-line"></i>
|
|
167
|
+
</button>
|
|
168
|
+
<div class="time-display">
|
|
169
|
+
{{ selectedTime.seconds | number : "2.0-0" }}
|
|
170
|
+
</div>
|
|
171
|
+
<button class="time-btn" (click)="decrementTime('seconds')">
|
|
172
|
+
<i class="ri-arrow-down-s-line"></i>
|
|
173
|
+
</button>
|
|
174
|
+
</div>
|
|
175
|
+
</ng-container>
|
|
176
|
+
|
|
177
|
+
<!-- AM/PM Toggle (12-hour format) -->
|
|
178
|
+
<div class="ampm-toggle" *ngIf="timeFormat === '12'">
|
|
179
|
+
<button
|
|
180
|
+
class="ampm-btn"
|
|
181
|
+
[class.active]="!isPM"
|
|
182
|
+
(click)="setAMPM(false)"
|
|
183
|
+
>
|
|
184
|
+
AM
|
|
185
|
+
</button>
|
|
186
|
+
<button class="ampm-btn" [class.active]="isPM" (click)="setAMPM(true)">
|
|
187
|
+
PM
|
|
188
|
+
</button>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<!-- Selected Dates Display -->
|
|
194
|
+
<!-- <div class="selected-dates" *ngIf="selectedDates.length > 0">
|
|
195
|
+
<div class="selected-label">
|
|
196
|
+
{{ locale === "ar" ? "التواريخ المحددة:" : "Selected Dates:" }}
|
|
197
|
+
</div>
|
|
198
|
+
<div class="selected-list">
|
|
199
|
+
<div class="selected-item" *ngFor="let date of selectedDates">
|
|
200
|
+
<div class="selected-date-info">
|
|
201
|
+
<span class="date-text">
|
|
202
|
+
{{
|
|
203
|
+
mode === "hijri" ? date.formatted.hijri : date.formatted.gregorian
|
|
204
|
+
}}
|
|
205
|
+
</span>
|
|
206
|
+
<span class="time-text" *ngIf="enableTime && date.formatted.time">
|
|
207
|
+
{{ date.formatted.time }}
|
|
208
|
+
</span>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</div> -->
|
|
213
|
+
|
|
214
|
+
<!-- Submit Button -->
|
|
215
|
+
<div class="picker-footer" *ngIf="showConfirmButton">
|
|
216
|
+
<button
|
|
217
|
+
class="submit-btn"
|
|
218
|
+
(click)="onSubmit()"
|
|
219
|
+
[disabled]="isRequired && selectedDates.length === 0"
|
|
220
|
+
>
|
|
221
|
+
{{ submitTextButton }}
|
|
222
|
+
</button>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
<!-- Calendar Type Label -->
|
|
226
|
+
<div class="calendar-type" *ngIf="mode === 'hijri'">
|
|
227
|
+
<small>{{ ummAlQuraDateText }}</small>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|