angular-hijri-gregorian-date-time-picker 1.5.1 → 1.5.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.
package/README.md
CHANGED
|
@@ -1,249 +1,308 @@
|
|
|
1
|
-
# Angular Hijri Gregorian Date Time Picker
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
4
|
-
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
5
|
-
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
6
|
-
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
7
|
-
|
|
8
|
-
- Most accurate Hijri, Gregorian calendar(date-picker) on NPM with 100% accuracy percentage.
|
|
9
|
-
- Robust and tested code angular hijri/gregorian calendar/date-picker component for Angular 10 - 20+ projects.
|
|
10
|
-
- Ionic 3 - 4, 5, 6 + is supported, can be used in iOS and Android.
|
|
11
|
-
- `Zero` npm dependents package.
|
|
12
|
-
- 10 different `themes` and `layouts` already built in, you can also customize your own as well.
|
|
13
|
-
- **NEW:** Time picker with 12h/24h formats, Range selection, Beautiful custom selects, Bilingual typography
|
|
14
|
-
|
|
15
|
-
## Preview
|
|
16
|
-
|
|
17
|
-
<p>
|
|
18
|
-
<img src="https://github.com/hanygamal72/angular-hijri-gregorian-date-time-picker/blob/master/src/assets/imgs/themes_en.gif" width="40%"/>
|
|
19
|
-
<img src="https://github.com/hanygamal72/angular-hijri-gregorian-date-time-picker/blob/master/src/assets/imgs/themes_ar.gif" width="40%"/>
|
|
20
|
-
</p>
|
|
21
|
-
|
|
22
|
-
## ✨ What's New in v1.5.0
|
|
23
|
-
|
|
24
|
-
### 🎉 Major Features
|
|
25
|
-
- **⏰ Time Picker** - Full time selection with 12-hour/24-hour format support
|
|
26
|
-
- **📅 Range Selection** - Select date ranges with start and end dates
|
|
27
|
-
- **🎨 Beautiful Custom Selects** - Modern dropdown menus with smooth animations and Remix Icons
|
|
28
|
-
- **🌐 Bilingual Typography** - Google Fonts integration (Poppins for English, Zain for Arabic)
|
|
29
|
-
- **🎯 Initial Date Support** - Pre-select dates/ranges when calendar loads (`initialDate`, `initialRangeStart`, `initialRangeEnd`)
|
|
30
|
-
|
|
31
|
-
### 🚀 UI/UX Enhancements
|
|
32
|
-
- Redesigned year/month selectors with professional styling
|
|
33
|
-
- Enhanced RTL/LTR support with automatic font switching
|
|
34
|
-
- Improved accessibility with proper ARIA labels
|
|
35
|
-
- Smooth animations and transitions throughout
|
|
36
|
-
- Better mobile responsiveness
|
|
37
|
-
|
|
38
|
-
[See full CHANGELOG](https://github.com/hanygamal72/angular-hijri-gregorian-date-time-picker/blob/master/projects/hijri-gregorian-datepicker/CHANGELOG.md)
|
|
39
|
-
|
|
40
|
-
<br />
|
|
41
|
-
|
|
42
|
-
## Background
|
|
43
|
-
|
|
44
|
-
The Umm Al-Qura calendar is the lunar Hijri calendar officially adopted by Saudi Arabia for administrative purposes. It was originated from Umm Al-Qura newspaper, the official newspaper of government of Saudi Arabia. The newspaper is published weekly and its first issue was on Friday, 15 Jumada al-Ula 1343 AH (12 December 1924 CE). However, the calendar has been printed and distributed separately by the Saudi government since 1346 AH (1927 CE).
|
|
45
|
-
|
|
46
|
-
The calendar is widely used in Saudi Arabia, especially by the public sector. Official documents, political letters, health care records, and education certificates, are just examples of many other documents that are dated by the Hijri calendar.
|
|
47
|
-
|
|
48
|
-
However, the Gregorian calendar is the calendar used in most of the world, and it has been implemented as the default calendar in nearly every computer and database.
|
|
49
|
-
|
|
50
|
-
<b> Star it to inspire us to build the best component! </b>
|
|
51
|
-
|
|
52
|
-
## Features
|
|
53
|
-
|
|
54
|
-
- Can be used as a calendar or a datepicker with **time selection**.
|
|
55
|
-
- **RTL** and **LTR** support with **bilingual typography** (Poppins for English, Zain for Arabic)
|
|
56
|
-
- Easy to switch between **Gregorian** and **Hijri** calendars.
|
|
57
|
-
- Ability to specify the default calendar type either **Gregorian** or **Hijri**.
|
|
58
|
-
- Converting dates when changing type of calendar.
|
|
59
|
-
- Ability to specify min and max value for **Gregorian** and **Hijri**.
|
|
60
|
-
- Ability to make it required or readonly.
|
|
61
|
-
- Very easy to customize with **beautiful custom select dropdowns**.
|
|
62
|
-
- Can select **Single**, **Multiple** dates, or **Date Ranges**.
|
|
63
|
-
- **Time picker** with 12-hour/24-hour format support.
|
|
64
|
-
- **Initial date** and **initial range** support for pre-selecting dates.
|
|
65
|
-
- **Event listeners** for all datepicker events.
|
|
66
|
-
- Can customize future and past years number.
|
|
67
|
-
- **Responsive** design for web and mobile.
|
|
68
|
-
- **Modern UI** with Remix Icons and smooth animations.
|
|
69
|
-
- **Responsive** desing for web and mobile.
|
|
70
|
-
|
|
71
|
-
## Supported platforms
|
|
72
|
-
|
|
73
|
-
<b>Angular</b> 10 - 16, 18 +<br />
|
|
74
|
-
<b>Ionic</b> 3 - 4, 5, 6 +<br />
|
|
75
|
-
Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
|
|
76
|
-
Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
|
|
77
|
-
Other browsers: <b>Edge v.41 - 44</b> (without code hidden feature)
|
|
78
|
-
|
|
79
|
-
## Installation
|
|
80
|
-
|
|
81
|
-
$ npm install angular-hijri-gregorian-date-time-picker
|
|
82
|
-
|
|
83
|
-
## Usage
|
|
84
|
-
|
|
85
|
-
Import `HijriGregorianDatepickerModule` in your app module or page module:
|
|
86
|
-
|
|
87
|
-
```ts
|
|
88
|
-
import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-date-time-picker';
|
|
89
|
-
|
|
90
|
-
@NgModule({
|
|
91
|
-
imports: [
|
|
92
|
-
// ...
|
|
93
|
-
HijriGregorianDatepickerModule
|
|
94
|
-
]
|
|
95
|
-
})
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
[
|
|
105
|
-
[
|
|
106
|
-
[
|
|
107
|
-
[
|
|
108
|
-
[
|
|
109
|
-
[
|
|
110
|
-
[
|
|
111
|
-
[
|
|
112
|
-
[
|
|
113
|
-
[
|
|
114
|
-
[
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
|
191
|
-
|
|
|
192
|
-
| <b>`
|
|
193
|
-
| <b>`
|
|
194
|
-
| <b>`
|
|
195
|
-
| <b>`
|
|
196
|
-
| <b>`
|
|
197
|
-
| <b>`
|
|
198
|
-
| <b>`
|
|
199
|
-
| <b>`
|
|
200
|
-
| <b>`
|
|
201
|
-
| <b>`
|
|
202
|
-
| <b>`
|
|
203
|
-
| <b>`
|
|
204
|
-
| <b>`
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
| `
|
|
217
|
-
| `
|
|
218
|
-
| `
|
|
219
|
-
| `
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
|
233
|
-
|
|
|
234
|
-
| <b>`
|
|
235
|
-
| <b>`
|
|
236
|
-
| <b>`
|
|
237
|
-
| <b>`
|
|
238
|
-
| <b>`
|
|
239
|
-
| <b>`
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
1
|
+
# Angular Hijri Gregorian Date Time Picker
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
4
|
+
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
5
|
+
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
6
|
+
[](https://www.npmjs.com/package/angular-hijri-gregorian-date-time-picker)
|
|
7
|
+
|
|
8
|
+
- Most accurate Hijri, Gregorian calendar(date-picker) on NPM with 100% accuracy percentage.
|
|
9
|
+
- Robust and tested code angular hijri/gregorian calendar/date-picker component for Angular 10 - 20+ projects.
|
|
10
|
+
- Ionic 3 - 4, 5, 6 + is supported, can be used in iOS and Android.
|
|
11
|
+
- `Zero` npm dependents package.
|
|
12
|
+
- 10 different `themes` and `layouts` already built in, you can also customize your own as well.
|
|
13
|
+
- **NEW:** Time picker with 12h/24h formats, Range selection, Beautiful custom selects, Bilingual typography
|
|
14
|
+
|
|
15
|
+
## Preview
|
|
16
|
+
|
|
17
|
+
<p>
|
|
18
|
+
<img src="https://github.com/hanygamal72/angular-hijri-gregorian-date-time-picker/blob/master/src/assets/imgs/themes_en.gif" width="40%"/>
|
|
19
|
+
<img src="https://github.com/hanygamal72/angular-hijri-gregorian-date-time-picker/blob/master/src/assets/imgs/themes_ar.gif" width="40%"/>
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
## ✨ What's New in v1.5.0
|
|
23
|
+
|
|
24
|
+
### 🎉 Major Features
|
|
25
|
+
- **⏰ Time Picker** - Full time selection with 12-hour/24-hour format support
|
|
26
|
+
- **📅 Range Selection** - Select date ranges with start and end dates
|
|
27
|
+
- **🎨 Beautiful Custom Selects** - Modern dropdown menus with smooth animations and Remix Icons
|
|
28
|
+
- **🌐 Bilingual Typography** - Google Fonts integration (Poppins for English, Zain for Arabic)
|
|
29
|
+
- **🎯 Initial Date Support** - Pre-select dates/ranges when calendar loads (`initialDate`, `initialRangeStart`, `initialRangeEnd`)
|
|
30
|
+
|
|
31
|
+
### 🚀 UI/UX Enhancements
|
|
32
|
+
- Redesigned year/month selectors with professional styling
|
|
33
|
+
- Enhanced RTL/LTR support with automatic font switching
|
|
34
|
+
- Improved accessibility with proper ARIA labels
|
|
35
|
+
- Smooth animations and transitions throughout
|
|
36
|
+
- Better mobile responsiveness
|
|
37
|
+
|
|
38
|
+
[See full CHANGELOG](https://github.com/hanygamal72/angular-hijri-gregorian-date-time-picker/blob/master/projects/hijri-gregorian-datepicker/CHANGELOG.md)
|
|
39
|
+
|
|
40
|
+
<br />
|
|
41
|
+
|
|
42
|
+
## Background
|
|
43
|
+
|
|
44
|
+
The Umm Al-Qura calendar is the lunar Hijri calendar officially adopted by Saudi Arabia for administrative purposes. It was originated from Umm Al-Qura newspaper, the official newspaper of government of Saudi Arabia. The newspaper is published weekly and its first issue was on Friday, 15 Jumada al-Ula 1343 AH (12 December 1924 CE). However, the calendar has been printed and distributed separately by the Saudi government since 1346 AH (1927 CE).
|
|
45
|
+
|
|
46
|
+
The calendar is widely used in Saudi Arabia, especially by the public sector. Official documents, political letters, health care records, and education certificates, are just examples of many other documents that are dated by the Hijri calendar.
|
|
47
|
+
|
|
48
|
+
However, the Gregorian calendar is the calendar used in most of the world, and it has been implemented as the default calendar in nearly every computer and database.
|
|
49
|
+
|
|
50
|
+
<b> Star it to inspire us to build the best component! </b>
|
|
51
|
+
|
|
52
|
+
## Features
|
|
53
|
+
|
|
54
|
+
- Can be used as a calendar or a datepicker with **time selection**.
|
|
55
|
+
- **RTL** and **LTR** support with **bilingual typography** (Poppins for English, Zain for Arabic)
|
|
56
|
+
- Easy to switch between **Gregorian** and **Hijri** calendars.
|
|
57
|
+
- Ability to specify the default calendar type either **Gregorian** or **Hijri**.
|
|
58
|
+
- Converting dates when changing type of calendar.
|
|
59
|
+
- Ability to specify min and max value for **Gregorian** and **Hijri**.
|
|
60
|
+
- Ability to make it required or readonly.
|
|
61
|
+
- Very easy to customize with **beautiful custom select dropdowns**.
|
|
62
|
+
- Can select **Single**, **Multiple** dates, or **Date Ranges**.
|
|
63
|
+
- **Time picker** with 12-hour/24-hour format support.
|
|
64
|
+
- **Initial date** and **initial range** support for pre-selecting dates.
|
|
65
|
+
- **Event listeners** for all datepicker events.
|
|
66
|
+
- Can customize future and past years number.
|
|
67
|
+
- **Responsive** design for web and mobile.
|
|
68
|
+
- **Modern UI** with Remix Icons and smooth animations.
|
|
69
|
+
- **Responsive** desing for web and mobile.
|
|
70
|
+
|
|
71
|
+
## Supported platforms
|
|
72
|
+
|
|
73
|
+
<b>Angular</b> 10 - 16, 18 +<br />
|
|
74
|
+
<b>Ionic</b> 3 - 4, 5, 6 +<br />
|
|
75
|
+
Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
|
|
76
|
+
Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
|
|
77
|
+
Other browsers: <b>Edge v.41 - 44</b> (without code hidden feature)
|
|
78
|
+
|
|
79
|
+
## Installation
|
|
80
|
+
|
|
81
|
+
$ npm install angular-hijri-gregorian-date-time-picker
|
|
82
|
+
|
|
83
|
+
## Usage
|
|
84
|
+
|
|
85
|
+
Import `HijriGregorianDatepickerModule` in your app module or page module:
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-date-time-picker';
|
|
89
|
+
|
|
90
|
+
@NgModule({
|
|
91
|
+
imports: [
|
|
92
|
+
// ...
|
|
93
|
+
HijriGregorianDatepickerModule
|
|
94
|
+
]
|
|
95
|
+
})
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Option 1: DateTime Input Component (Recommended)
|
|
99
|
+
|
|
100
|
+
Use the `hijri-gregorian-datetime-input` component for a complete input field with dropdown calendar:
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<hijri-gregorian-datetime-input
|
|
104
|
+
[(ngModel)]="selectedDate"
|
|
105
|
+
[mode]="'greg'"
|
|
106
|
+
[locale]="'en'"
|
|
107
|
+
[dir]="'ltr'"
|
|
108
|
+
[enableTime]="true"
|
|
109
|
+
[selectionMode]="'single'"
|
|
110
|
+
[placeholder]="'Select date and time'"
|
|
111
|
+
[minDate]="minDate"
|
|
112
|
+
[maxDate]="maxDate"
|
|
113
|
+
[useMeridian]="true"
|
|
114
|
+
[styles]="stylesConfig"
|
|
115
|
+
(dateSelected)="onDateSelected($event)"
|
|
116
|
+
></hijri-gregorian-datetime-input>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**Features:**
|
|
120
|
+
- ✅ Form integration (works with `ngModel` and `formControlName`)
|
|
121
|
+
- ✅ Click-outside to close
|
|
122
|
+
- ✅ Keyboard support (Escape to close, Enter to open)
|
|
123
|
+
- ✅ Automatic date/time formatting in input field
|
|
124
|
+
- ✅ Clear button
|
|
125
|
+
- ✅ Remembers calendar mode and selected dates between open/close
|
|
126
|
+
- ✅ Supports all calendar features (time picker, range selection, etc.)
|
|
127
|
+
|
|
128
|
+
### Option 2: Calendar Component (Direct)
|
|
129
|
+
|
|
130
|
+
Use the `hijri-gregorian-datepicker` component directly for embedded calendars:
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<hijri-gregorian-datepicker
|
|
134
|
+
[canChangeMode]="true"
|
|
135
|
+
[todaysDateSection]="true"
|
|
136
|
+
[futureValidation]="true"
|
|
137
|
+
[disableYearPicker]="false"
|
|
138
|
+
[disableMonthPicker]="false"
|
|
139
|
+
[disableDayPicker]="false"
|
|
140
|
+
[isRequired]="false"
|
|
141
|
+
[showConfirmButton]="true"
|
|
142
|
+
[markToday]="true"
|
|
143
|
+
[mode]="'greg'"
|
|
144
|
+
[dir]="'ltr'"
|
|
145
|
+
[locale]="'en'"
|
|
146
|
+
[submitTextButton]="'Confirm'"
|
|
147
|
+
[todaysDateText]="'Today\'s Date'"
|
|
148
|
+
[ummAlQuraDateText]="'التاريخ الهجرى'"
|
|
149
|
+
[yearSelectLabel]="'Year'"
|
|
150
|
+
[monthSelectLabel]="'Month'"
|
|
151
|
+
[futureValidationMessageEn]="'Selected date cannot be in the future!'"
|
|
152
|
+
[futureValidationMessageAr]="
|
|
153
|
+
'التاريخ المحدد لا يمكن ان يكون في المستقبل!'
|
|
154
|
+
"
|
|
155
|
+
[pastYearsLimit]="90"
|
|
156
|
+
[futureYearsLimit]="0"
|
|
157
|
+
[theme]="'Midnight Blue'"
|
|
158
|
+
[styles]="stylesConfig"
|
|
159
|
+
(onSubmit)="onSubmit($event)"
|
|
160
|
+
(onDaySelect)="onChange($event)"
|
|
161
|
+
(onMonthChange)="onMonthChangeTest($event)"
|
|
162
|
+
(onYearChange)="onYearChangeTest($event)"
|
|
163
|
+
></hijri-gregorian-datepicker>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Inside your component.ts:
|
|
167
|
+
|
|
168
|
+
```ts
|
|
169
|
+
// this called every time when user confirms a selected date
|
|
170
|
+
onSubmitEvent(code: string) {
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// this called only every time the use selects a date
|
|
174
|
+
onChangeEvent(code: string) {
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// this called every time the month value channges
|
|
178
|
+
onMonthChangeEvent(code: string) {
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// this called every time the year value channges
|
|
182
|
+
onYearChangeEvent(code: string) {
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## @Inputs()
|
|
187
|
+
|
|
188
|
+
### DateTime Input Component
|
|
189
|
+
|
|
190
|
+
| Property | Type | Default | Description |
|
|
191
|
+
| ---------------------------------- | :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------- |
|
|
192
|
+
| <b>`placeholder`</b> | string | `Select date and time` | Placeholder text for the input field |
|
|
193
|
+
| <b>`disabled`</b> | boolean | `false` | When `true` the input is disabled |
|
|
194
|
+
| <b>`enableTime`</b> | boolean | `false` | When `true` enables time picker in the dropdown calendar |
|
|
195
|
+
| <b>`minDate`</b> | Date | `null` | Minimum selectable date |
|
|
196
|
+
| <b>`maxDate`</b> | Date | `null` | Maximum selectable date |
|
|
197
|
+
| <b>`initialDate`</b> | Date | `null` | Initial date to display when opening calendar |
|
|
198
|
+
| <b>`mode`</b> | string | `greg` | Calendar mode, either `ummAlQura` or `greg` |
|
|
199
|
+
| <b>`locale`</b> | string | `en` | The language, either `ar` or `en` |
|
|
200
|
+
| <b>`dir`</b> | string | `ltr` | Layout direction, either `ltr` or `rtl` |
|
|
201
|
+
| <b>`selectionMode`</b> | string | `single` | Date selection mode, either `single` or `range` |
|
|
202
|
+
| <b>`useMeridian`</b> | boolean | `false` | When `true` uses 12-hour format with AM/PM, if `false` uses 24-hour format |
|
|
203
|
+
| <b>`styles`</b> | object | `{}` | Styles configuration object |
|
|
204
|
+
| <b>`theme`</b> | string | `''` | Theme name (overrides styles) |
|
|
205
|
+
|
|
206
|
+
**DateTime Input Events:**
|
|
207
|
+
- `dateSelected` - Emitted when date is selected
|
|
208
|
+
- `dropdownOpened` - Emitted when dropdown opens
|
|
209
|
+
- `dropdownClosed` - Emitted when dropdown closes
|
|
210
|
+
|
|
211
|
+
### Calendar Component
|
|
212
|
+
|
|
213
|
+
| Property | Type | Default | Description |
|
|
214
|
+
| ---------------------------------- | :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------- |
|
|
215
|
+
| <b>`canChangeMode`</b> | boolean | `true` | When `true` the user can toggle calendar modes, if `false` the user has only one calendar mode |
|
|
216
|
+
| <b>`todaysDateSection`</b> | boolean | `true` | When `true` the section with current today date will be shown, if `false` it will be hidden |
|
|
217
|
+
| <b>`futureValidation`</b> | boolean | `true` | When `true` the user cannot choose any future dates, if `false` user can select future dates |
|
|
218
|
+
| <b>`disableYearPicker`</b> | boolean | `false` | When `true` the user cannot select different years, if `false` year select will be enabled |
|
|
219
|
+
| <b>`disableMonthPicker`</b> | boolean | `false` | When `true` the user cannot select different months, if `false` month select will be enabled |
|
|
220
|
+
| <b>`disableDayPicker`</b> | boolean | `false` | When `true` the user cannot select days, if `false` days select will be enabled |
|
|
221
|
+
| <b>`isRequired`</b> | boolean | `true` | When `true` the confirm button will be disabled until user selects a date, if `false` the button will be enabled |
|
|
222
|
+
| <b>`showConfirmButton`</b> | boolean | `true` | When `true` the confirm button will be displayed, if `false` it will be hidden |
|
|
223
|
+
| <b>`markToday`</b> | boolean | `true` | When `true` today date will be marked(bordered), if `false` it will not be marked |
|
|
224
|
+
| <b>`mode`</b> | string | `greg` | Calendar mode, either `ummAlQura` or `greg` |
|
|
225
|
+
| <b>`dir`</b> | string | `ltr` | Layout direction, either `ltr` or `rtl` |
|
|
226
|
+
| <b>`locale`</b> | string | `en` | The language of the calendar layout, either `ar` or `en` |
|
|
227
|
+
| <b>`submitTextButton`</b> | string | `Confirm` | Confirm button text value |
|
|
228
|
+
| <b>`todaysDateText`</b> | string | `Todays\'s Date` | Today's date text in `todaysDateSection` |
|
|
229
|
+
| <b>`ummAlQuraDateText`</b> | string | `التاريخ الهجرى` | Text next to checkbox to toggle date `todaysDateSection` |
|
|
230
|
+
| <b>`yearSelectLabel`</b> | string | `Year` | Label of the year select option |
|
|
231
|
+
| <b>`monthSelectLabel`</b> | string | `Month` | Label of the month select option |
|
|
232
|
+
| <b>`futureValidationMessageEn`</b> | string | `Selected date cannot be in the future!` | English future validation message if `futureValidation` is set to `true` |
|
|
233
|
+
| <b>`futureValidationMessageAr`</b> | string | `التاريخ المحدد لا يمكن ان يكون في المستقبل!` | Arabic future validation message if `futureValidation` is set to `true` |
|
|
234
|
+
| <b>`pastYearsLimit`</b> | number | `90` | indicates for the past years number you want to allow user to select from |
|
|
235
|
+
| <b>`futureYearsLimit`</b> | number | `0` | indicates for the future years number you want to allow user to select from |
|
|
236
|
+
| <b>`selectionMode`</b> | string | `single` | Date selection mode, either `single` for single date selection or `range` for date range selection |
|
|
237
|
+
| <b>`initialDate`</b> | Date | `null` | Initial date to be selected/highlighted when calendar opens (for single selection mode) |
|
|
238
|
+
| <b>`initialRangeStart`</b> | Date | `null` | Initial start date for range selection (for range selection mode) |
|
|
239
|
+
| <b>`initialRangeEnd`</b> | Date | `null` | Initial end date for range selection (for range selection mode) |
|
|
240
|
+
| <b>`minDate`</b> | Date | `null` | Minimum selectable date - dates before this will be disabled |
|
|
241
|
+
| <b>`maxDate`</b> | Date | `null` | Maximum selectable date - dates after this will be disabled |
|
|
242
|
+
| <b>`useMeridian`</b> | boolean | `true` | When `true` the time picker uses 12-hour format with AM/PM, if `false` uses 24-hour format |
|
|
243
|
+
| <b>`styles`</b> | object | `{}` | Styles for the calendar look and feel |
|
|
244
|
+
| <b>`theme`</b> | string | `Midnight Blue` | Different skins and themes for the calendar('Ocean Breeze', 'Lavender Dreams', 'Sunset Glow', 'Midnight Blue', 'Forest Canopy', 'Rosewood Elegance', 'Icy Mint', 'Golden Sand', 'Steel Grey', 'Coral Reef'), and it has priority over styles
|
|
245
|
+
|
|
246
|
+
## Styles
|
|
247
|
+
|
|
248
|
+
| Property | Type | Default | Description |
|
|
249
|
+
| ---------------------------- | :----: | :---------------: | -------------------------------------------------------------------- |
|
|
250
|
+
| <b>`backgroundColor`</b> | string | `#E3F6F5` | Background of the calendar |
|
|
251
|
+
| <b>`primaryColor`</b> | string | `#272343` | Color of the today's date, year and month texts |
|
|
252
|
+
| <b>`secondaryColor`</b> | string | `#272343` | Background of submit button and selected days in calendar |
|
|
253
|
+
| <b>`todaysDateBgColor`</b> | string | `#272343` | Background of "today's date" date section |
|
|
254
|
+
| <b>`todaysDateTextColor`</b> | string | `#fff` | Color of "today's date" date section text |
|
|
255
|
+
| <b>`confirmBtnTextColor`</b> | string | `#fff` | Color of "Confirm" button text |
|
|
256
|
+
| <b>`disabledDayColor`</b> | string | `#C0C0C0` | Disabled days text color |
|
|
257
|
+
| <b>`dayNameColor`</b> | string | `#0d7f91` | Day names text color |
|
|
258
|
+
| <b>`dayColor`</b> | string | `#000` | Enabled days text color |
|
|
259
|
+
| <b>`fontFamily`</b> | string | `Default-Regular` | Font family of the font used globally and pre defined within project |
|
|
260
|
+
| <b>`borderRadius`</b> | string | `8px` | Border radius of the each div and button in the calendar layout |
|
|
261
|
+
| <b>`timePickerBgColor`</b> | string | `#ffffff` | Background color for time input fields |
|
|
262
|
+
| <b>`timePickerTextColor`</b> | string | `#333` | Text color for time display |
|
|
263
|
+
| <b>`timePickerBorderColor`</b> | string | `#ddd` | Border color for time inputs |
|
|
264
|
+
| <b>`timePickerArrowColor`</b> | string | `#5b479c` | Color for up/down arrow icons |
|
|
265
|
+
| <b>`timePickerColonColor`</b> | string | `#5b479c` | Color for colon separator |
|
|
266
|
+
| <b>`meridianBgColor`</b> | string | `#ffffff` | Background color for AM/PM buttons |
|
|
267
|
+
| <b>`meridianTextColor`</b> | string | `#666` | Text color for AM/PM buttons |
|
|
268
|
+
| <b>`meridianActiveBgColor`</b> | string | `rgb(0, 77, 97)` | Background color for active AM/PM button |
|
|
269
|
+
| <b>`meridianActiveTextColor`</b> | string | `#ffffff` | Text color for active AM/PM button |
|
|
270
|
+
|
|
271
|
+
## @Outputs()
|
|
272
|
+
|
|
273
|
+
| Output | Description |
|
|
274
|
+
| --------------- | ------------------------------------------------------------- |
|
|
275
|
+
| `onSubmit` | Will be called every time when a user submits a selected date |
|
|
276
|
+
| `onDaySelect` | Will be called every time when a user selects new date |
|
|
277
|
+
| `onMonthChange` | Will be called every time the month value changes |
|
|
278
|
+
| `onYearChange` | Will be called every time the year value changes |
|
|
279
|
+
|
|
280
|
+
## Helper Functions
|
|
281
|
+
|
|
282
|
+
import { DateUtilitiesService } from '../_services/date-utilities.service';
|
|
283
|
+
|
|
284
|
+
```ts
|
|
285
|
+
constructor(private _dateUtils: DateUtilitiesService) {
|
|
286
|
+
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
| Output | Description |
|
|
292
|
+
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
293
|
+
| <b>`convertDate`</b> | Converts dates from Gregorian to Umm Al Qura and vice versa |
|
|
294
|
+
| <b>`checkPastOrFuture`</b> | Checks date whether it's future or past date('Future', 'Past', 'Today') |
|
|
295
|
+
| <b>`formatDate`</b> | Converts date from human-readable string representation(ex. Mon Sep 05 2023 15:30:45 GMT+0200) to separated "/" string(ex. 05/09/2023) |
|
|
296
|
+
| <b>`parseDate`</b> | The opposite of `formateDate` function |
|
|
297
|
+
| <b>`getGregorianMonthData`</b> | Generates an array of objects of Gregorian month passed to it |
|
|
298
|
+
| <b>`getUmAlQurraMonthData`</b> | Generates an array of objects of Umm Al Qura month passed to it |
|
|
299
|
+
|
|
300
|
+
## Contributing
|
|
301
|
+
|
|
302
|
+
Contributions are more than welcome!
|
|
303
|
+
|
|
304
|
+
## License
|
|
305
|
+
|
|
306
|
+
MIT License
|
|
307
|
+
|
|
308
|
+
Copyright (c) 2022 Muhammad Hanafi, Imad Khan
|