Skip to content

Commit f609211

Browse files
committed
preparation
1 parent 29d109c commit f609211

6 files changed

Lines changed: 195 additions & 22 deletions

File tree

README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,133 @@ Major changes:
1616
##### NOTE:
1717
Bootstrap 3 version `https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs3`<br>
1818
Bootstrap 4 version `https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs4`
19+
20+
### Installing:
21+
First you have to install `Bootstrap 5` and link them to your html file.
22+
23+
Now add these files to you html:
24+
```html
25+
<link href="/dist/mds.bs.datetimepicker.style.css" rel="stylesheet"/>
26+
<script src="/dist/mds.bs.datetimepicker.js"></script>
27+
```
28+
I suggest to add scripts at the end of `body` tag and after `bootstrap` js file.
29+
### How to use:
30+
```javascript
31+
const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById('dtp1'), {
32+
targetTextSelector: '[data-name="dtp1-text"]',
33+
targetDateSelector: '[data-name="dtp1-date"]',
34+
});
35+
```
36+
37+
<hr>
38+
39+
### Options:
40+
Default values are into `[ ]`
41+
42+
Name | Values | Description | Sample
43+
------------- | ------------- | ------------- |-------------
44+
**placement** | top, right, [bottom], left | Position of date time picker
45+
**trigger** | [click], mouse down, focus, ... | Event to show date time picker
46+
**enableTimePicker** | [false], true | Time picker visibility
47+
**targetTextSelector** | String | CSS selector to show selected date as `format` property into it | '#TextBoxId'
48+
**targetDateSelector** | String | CSS selector to save selected date into it | '#InputHiddenId'
49+
**toDate** | [false], true | When you want to set date picker as `toDate` to enable date range selecting
50+
**fromDate** | [false], true | When you want to set date picker as `fromDate` to enable date range selecting
51+
**groupId** | String | When you want to use `toDate`, `fromDate` you have to enter a group id to specify date time pickers| 'dateRangeSelector1'
52+
**disabled** | [false], true | Disable date time picker
53+
**textFormat** | String | format of selected date to show into `targetTextSelector` | 'yyyy/MM/dd HH:mm:ss'
54+
**dateFormat** | String | format of selected date to save into `targetDateSelector` | 'yyyy/MM/dd HH:mm:ss'
55+
**isGregorian** | [false], true | Is calendar Gregorian
56+
**inLine** | [false], true | Is date time picker in line
57+
**modalMode** | [false], true | Open in modal mode, suitable for smart phones
58+
**selectedDate** | [undefined], Date | Selected date as JavaScript Date object | new Date('2018/9/30')
59+
**selectedDateToShow** | [new Date()], Date | Selected date to start calendar from it as JavaScript Date object | new Date('2018/9/30')
60+
**selectedRangeDate** | Array: Date[] | Selected range date as JavaScript Date object | [new Date('2020/8/5'), new Date('2020/8/15')]
61+
**yearOffset** | Number | Number of years to select in year selector | 30
62+
**holiDays** | Array: Date[] | Array of holidays to show in date time picker as holiday | [new Date(), new Date(2017, 3, 2)]
63+
**disabledDates** | Array: Date[] | Array of disabled dates to prevent user to select them | [new Date(2017, 1, 1), new Date(2017, 1, 2)]
64+
**specialDates** | Array: Date[] | Array of dates to mark some dates as special | [new Date(2017, 2, 1), new Date(2017, 3, 2)]
65+
**disabledDays** | Array: number[] | Array of disabled week days to prevent user to select them | Disable all "Thursday", "Friday" in persian [ 5, 6 ]
66+
**disableBeforeToday** | [false], true | Disable days before today
67+
**disableAfterToday** | [false], true | Disable days after today
68+
**disableBeforeDate** | Date | Disable days before this Date | new Date(2018, 11, 12)
69+
**disableAfterDate** | Date | Disable days after this Date | new Date(2018, 12, 11)
70+
**rangeSelector** | [false], true | Enables rangeSelector feature on date time picker
71+
**monthsToShow** | Numeric array with 2 items, [0 ,0] | To show, number of month before and after selected date in date time picker, first item is for before month, second item is for after month | [1, 1]
72+
**calendarViewOnChange(date)** | function | Event fires on date picker's view change
73+
**onDayClick(event)** | function | Event fires on day cell click
74+
75+
<hr>
76+
77+
### String format:
78+
79+
Format | English Description | Persian Description
80+
------------- | ------------- | -------------
81+
**yyyy** | Year, 4 digits | سال چهار رقمی
82+
**yy** | Year, 2 digits | سال دو رقمی
83+
**MMMM** | Month name | نام ماه
84+
**MM** | Month, 2 digits | عدد دو رقمی ماه
85+
**M** | Month, 1 digit | عدد تک رقمی ماه
86+
**dddd** | Week day name | نام روز هفته
87+
**dd** | Month's day, 2 digits | عدد دو رقمی روز
88+
**d** | Month's day, 1 digit | عدد تک رقمی روز
89+
**HH** | Hour, 2 digits - 0 - 24 | عدد دو رقمی ساعت با فرمت 0 تا 24
90+
**H** | Hour, 1 digit - 0 - 24 | عدد تک رقمی ساعت با فرمت 0 تا 24
91+
**hh** | Hour, 2 digits - 0 - 12 | عدد دو رقمی ساعت با فرمت 0 تا 12
92+
**h** | Hour, 1 digit - 0 - 12 | عدد تک رقمی ساعت با فرمت 0 تا 12
93+
**mm** | Minute, 2 digits | عدد دو رقمی دقیقه
94+
**m** | Minute, 1 digit | عدد تک رقمی دقیقه
95+
**ss** | Second, 2 digits | ثانیه دو رقمی
96+
**s** | Second, 1 digit | ثانیه تک رقمی
97+
**tt** | AM / PM | ب.ظ یا ق.ظ
98+
**t** | A / P | حرف اول از ب.ظ یا ق.ظ
99+
100+
<hr>
101+
102+
### Functions:
103+
104+
Name | Return Value | Description | Sample
105+
------------- | ------------- | ------------- |-------------
106+
**show** | void | show date picker | dtp1Instance.show()
107+
**hide** | void | hide date picker | dtp1Instance.hide()
108+
**toggle** | void | show or hide date picker | dtp1Instance.toggle()
109+
**enable** | void | enable date picker | dtp1Instance.enable()
110+
**disable** | void | disable date picker | dtp1Instance.disable()
111+
**updatePosition** | void | update position of date picker | dtp1Instance.updatePosition()
112+
**updateSelectedDateText** | void | update `targetTextSelector` text | dtp1Instance.updateSelectedDateText()
113+
**dispose** | void | dispose date picker | dtp1Instance.dispose()
114+
**getBsPopoverInstance** | bootstrap.Popover | return instance of bootstrap popover | const bsPopover = dtp1Instance.getBsPopoverInstance()
115+
**getBsModalInstance** | bootstrap.Modal | return instance of bootstrap modal | const bsModal = dtp1Instance.getBsModalInstance()
116+
**updateOption** | void | update one option of date picker | dtp1Instance.updateOption('isGregorian', false)
117+
**updateOptions** | void | update one option of date picker | dtp1Instance.updateOptions({ isGregorian: false, inLine: false, ... })
118+
**getInstance** | MdsPersianDateTimePicker | static method, get instance of MdsDatePicker by element | const jalaliObj = mds.MdsPersianDateTimePicker.dtp1Instance.getInstance(document.getELementById('IdOElement'));
119+
**getText** | string | Get selected date text | const txt = dtp1Instance.getText()
120+
**getDate** | Date | Get selected date | const dateObj = dtp1Instance.getDate()
121+
**getDateRange** | [fromDate, toDate]: Date[] | Get selected date range | dtp1Instance.getDateRange();
122+
**setDate** | void | Set selected datetime with Date object argument | dtp1Instance.setDate(new Date('2021/09/22'));
123+
**setDatePersian** | void | Set selected datetime with Date object argument | dtp1Instance.setDatePersian(1400, 06, 31);
124+
**setDateRange** | void | Set selected datetime range with Date object argument | dtp1Instance.setDateRange(new Date('2021/09/04'), new Date('2021/09/22'));
125+
**clearDate** | void | clear selected date | dtp1Instance.clearDate();
126+
**convertDateToString** | string | utility method, convert date object to string | const dateStr = dtp1Instance.convertDateToString(date: new Date(), isGregorian: false, format: 'yyyy/MM/dd');
127+
**convertDateToJalali** | MdsPersianDateTimePickerConvertedDateModel | utility method, convert date object to Jalali | const jalaliObj = dtp1Instance.convertDateToJalali(new Date());
128+
129+
<hr>
130+
131+
### Events:
132+
133+
`MD.BootstrapPersianDateTimePicker` uses Bootstrap's popover, and Bootstrap's modals. so you can use `popover` or `modal` events.
134+
135+
https://getbootstrap.com/docs/4.5/components/popovers/#events
136+
https://getbootstrap.com/docs/4.5/components/modal/#events
137+
138+
```javascript
139+
$('#date1').on('hidden.bs.popover', function () {
140+
// do something…
141+
})
142+
```
143+
144+
<hr>
145+
146+
### Backend:
147+
148+
If you are using .net in your backend I suggest you https://github.com/Mds92/MD.PersianDateTime to handle PersianDateTime as easy as DateTime.

dist/mds.bs.datetimepicker.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/mds.bs.datetimepicker.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"bootstrap": "^5.1.1"
2020
},
2121
"devDependencies": {
22-
"@types/bootstrap": "^5.1.4",
22+
"@types/bootstrap": "^5.1.6",
2323
"@types/jquery": "^3.5.6",
2424
"css-loader": "^5.2.7",
2525
"css-minimizer-webpack-plugin": "^3.0.2",
@@ -29,9 +29,9 @@
2929
"jshint-loader": "^0.8.4",
3030
"mini-css-extract-plugin": "^1.6.2",
3131
"style-loader": "^2.0.0",
32-
"ts-loader": "^9.2.4",
32+
"ts-loader": "^9.2.6",
3333
"typescript": "^4.4.3",
34-
"webpack": "^5.52.1",
34+
"webpack": "^5.53.0",
3535
"webpack-cli": "^4.8.0",
3636
"webpack-dev-server": "^3.11.2",
3737
"webpack-merge": "^5.8.0",

src/mds.bs.datetimepicker.ts

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2095,6 +2095,63 @@ data-bs-toggle="dropdown" aria-expanded="false">
20952095
getBsModalInstance(): Modal {
20962096
return this.bsModal;
20972097
}
2098+
/**
2099+
* دریافت متن تاریخ انتخاب شده
2100+
*/
2101+
getText(): string {
2102+
return MdsPersianDateTimePicker.getSelectedDateFormatted(this.setting);
2103+
}
2104+
/**
2105+
* دریافت آبجکت تاریخ انتخاب شده
2106+
*/
2107+
getDate(): Date {
2108+
return this.setting.selectedDate;
2109+
}
2110+
/**
2111+
* دریافت آبجکت های تاریخ های انتخاب شده در مد رنج سلکتور
2112+
*/
2113+
getDateRange(): Date[] {
2114+
return this.setting.selectedRangeDate;
2115+
}
2116+
/**
2117+
* بروز کردن تاریخ انتخاب شده
2118+
*/
2119+
setDate(date: Date): void {
2120+
this.updateOptions({
2121+
selectedDate: date,
2122+
selectedDateToShow: date
2123+
});
2124+
}
2125+
/**
2126+
* بروز کردن تاریخ انتخاب شده با استفاده از تاریخ شمسی
2127+
*/
2128+
setDatePersian(yearPersian: number, monthPersian: number, dayPersian: number): void {
2129+
const gregorianDateJson = MdsPersianDateTimePicker.toGregorian(yearPersian, monthPersian, dayPersian);
2130+
const date = new Date(gregorianDateJson.gy, gregorianDateJson.gm, gregorianDateJson.gd);
2131+
this.updateOptions({
2132+
selectedDate: date,
2133+
selectedDateToShow: date
2134+
});
2135+
}
2136+
/**
2137+
* بروز کردن رنج تاریخی انتخاب شده
2138+
*/
2139+
setDateRange(startDate: Date, endDate: Date): void {
2140+
this.updateOptions({
2141+
selectedDate: startDate,
2142+
selectedDateToShow: startDate,
2143+
selectedRangeDate: [startDate, endDate]
2144+
});
2145+
}
2146+
/**
2147+
* حذف تاریخ انتخاب شده
2148+
*/
2149+
clearDate(): void {
2150+
this.updateOptions({
2151+
selectedDate: null,
2152+
selectedDateToShow: new Date(),
2153+
});
2154+
}
20982155
/**
20992156
* بروز کردن تنظیمات تقویم
21002157
* @param optionName نام آپشن مورد نظر
@@ -2111,7 +2168,7 @@ data-bs-toggle="dropdown" aria-expanded="false">
21112168
* بروز کردن تنظیمات تقویم
21122169
* @param options تنظیمات مورد نظر
21132170
*/
2114-
updateOptions(options: MdsPersianDateTimePickerSetting): void {
2171+
updateOptions(options: any): void {
21152172
Object.keys(options).forEach((key) => {
21162173
(<any>this.setting)[key] = MdsPersianDateTimePicker.correctOptionValue(key, (<any>options)[key]);
21172174
});
@@ -2128,7 +2185,7 @@ data-bs-toggle="dropdown" aria-expanded="false">
21282185
return MdsPersianDateTimePicker.getDateTimeString(!isGregorian ? MdsPersianDateTimePicker.getDateTimeJsonPersian1(date) : MdsPersianDateTimePicker.getDateTimeJson1(date), format, isGregorian, isGregorian);
21292186
};
21302187
/**
2131-
* تبدیل آبجکت تاریخ به رشته
2188+
* تبدیل آبجکت تاریخ به شمسی
21322189
* @param date آبجکت تاریخ
21332190
*/
21342191
convertDateToJalali = (date: Date): MdsPersianDateTimePickerConvertedDateModel => {
@@ -2358,4 +2415,4 @@ var MdsPersianDateTimePickerData = {
23582415
}
23592416
MdsPersianDateTimePickerElementMap.delete(key);
23602417
}
2361-
};
2418+
};

src/sample.ts

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)