1.1.2 • Published 6 years ago
az.bootstrappersiandatetimepicker v1.1.2
az.BootstrapPersianDateTimePicker
Persian And Gregorian Date Time Picker
This date-time picker is
- Responsive and smart-positioned thanks to bootstrap's Popovers
- Powerful thanks to Moment.js
- Accurate Jalaali calendar thanks to moment-jalaali
Minimal
Dependencies:
Install
npm install az.bootstrappersiandatetimepickerNow add these to your html:
<link href="/node_modules/az.bootstrappersiandatetimepicker/dist/az.bootstrappersiandatetimepicker.css" rel="stylesheet"/>
<script src="/node_modules/az.bootstrappersiandatetimepicker/dist/az.bootstrappersiandatetimepicker.js"></script>$('#id').azPersianDateTimePicker({
targetTextSelector: $('#inputDateVisible'),
targetDateSelector: $('#inputDateHidden'),
});Options:
Default values are indicated using [ ]
| Name | Values | Description | Sample |
|---|---|---|---|
| englishNumber | false, true | Switch between English number or Persian number | |
| placement | top, right, bottom, left | Position of date time picker | |
| trigger | click, mousedown, focus, ... | Event to show date time picker | |
| enableTimePicker | false, true | Time picker visibility | |
| targetTextSelector | String | CSS selector to show selected date as format property into it | '#TextBoxId' |
| targetDateSelector | String | CSS selector to save selected date into it | '#InputHiddenId' |
| toDate | false, true | When you want to set date picker as toDate to enable date range selecting | |
| fromDate | false, true | When you want to set date picker as fromDate to enable date range selecting | |
| groupId | String | When you want to use toDate, fromDate you have to enter a group id to specify date time pickers | 'dateRangeSelector1' |
| disabled | false, true | Disable date time picker | |
| textFormat | String | format of selected date to show into targetTextSelector | 'yyyy/MM/dd HH:mm:ss' |
| dateFormat | String | format of selected date to save into targetDateSelector | 'yyyy/MM/dd HH:mm:ss' |
| isGregorian | false, true | Is calendar Gregorian | |
| inLine | false, true | Is date time picker in line | |
| selectedDate | undefined, new Date() | Selected date as JavaScript Date object | new Date('2018/9/30') |
| 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 |
| yearOffset | Number | Number of years to select in year selector | 30 |
| holiDays | Array: Date[] | Array of holidays to show in date time picker as holiday | new Date(), new Date(2017, 3, 2) |
| disabledDates | Array: Date[] | Array of disabled dates to prevent user to select them | new Date(2017, 1, 1), new Date(2017, 1, 2) |
| disableBeforeToday | false, true | Disable days before today | |
| disableAfterToday | false, true | Disable days after today | |
| disableBeforeDate | Date | Disable days before this Date | new Date(2018, 11, 12) |
| disableAfterDate | Date | Disable days after this Date | new Date(2018, 12, 11) |
| rangeSelector | false, true | Enables rangeSelector feature on date time picker |
String format:
| Format | English Description | Persian Description |
|---|---|---|
| yyyy | Year, 4 digits | سال چهار رقمی |
| yy | Year, 2 digits | سال دو رقمی |
| MMMM | Month name | نام ماه |
| MM | Month, 2 digits | عدد دو رقمی ماه |
| M | Month, 1 digit | عدد تک رقمی ماه |
| dddd | Week day name | نام روز هفته |
| dd | Month's day, 2 digits | عدد دو رقمی روز |
| d | Month's day, 1 digit | عدد تک رقمی روز |
| HH | Hour, 2 digits - 0 - 24 | عدد دو رقمی ساعت با فرمت 0 تا 24 |
| H | Hour, 1 digit - 0 - 24 | عدد تک رقمی ساعت با فرمت 0 تا 24 |
| hh | Hour, 2 digits - 0 - 12 | عدد دو رقمی ساعت با فرمت 0 تا 12 |
| h | Hour, 1 digit - 0 - 12 | عدد تک رقمی ساعت با فرمت 0 تا 12 |
| mm | Minute, 2 digits | عدد دو رقمی دقیقه |
| m | Minute, 1 digit | عدد تک رقمی دقیقه |
| ss | Second, 2 digits | ثانیه دو رقمی |
| s | Second, 1 digit | ثانیه تک رقمی |
| tt | AM / PM | ب.ظ یا ق.ظ |
| t | A / P | حرف اول از ب.ظ یا ق.ظ |
Functions:
| Name | Return | Description | Sample |
|---|---|---|---|
| getText | string | Get selected date text | $('#id').azPersianDateTimePicker('getText'); |
| getDate | Date | Get selected date | $('#id').azPersianDateTimePicker('getDate'); |
| getDateRange | fromDate, toDate: Date[] | Get selected date range | $('#id').azPersianDateTimePicker('getDateRange'); |
| setDate | void | Set selected datetime with Date object argument | $('#id').azPersianDateTimePicker('setDate', new Date(2018, 11, 12)); |
| setDateRange | void | Set selected datetime range with Date object argument | $('#id').azPersianDateTimePicker('setDateRange', new Date(2018, 11, 01), new Date(2018, 11, 12)); |
| clearDate | void | clear selected date | $('#id').azPersianDateTimePicker('clearDate'); |
| setDatePersian | void | Set selected datetime with persian json argument | $('#id').azPersianDateTimePicker('setDatePersian', {year: 1397, month: 1, day: 1, hour: 0, minute: 0, second: 0}); |
| hide | void | Hide date time picker | $('#id').azPersianDateTimePicker('hide'); |
| show | void | Show date time picker | $('#id').azPersianDateTimePicker('show'); |
| disable | void | Disable or enable date time picker | $('#id').azPersianDateTimePicker('disable', /isDisable/ true); |
| changeType | void | Switch between Persian or Gregorian calendar | $('#id').azPersianDateTimePicker('changeType', /isGregorian/ true, / englishNumber / true); |
| setOption | void | Set an option | $('#id').azPersianDateTimePicker('setOption', 'yearOffset', 5); |
Events:
az.BootstrapPersianDateTimePicker uses Bootstrap's popover, so you can use popover events.
| Event Type | Description |
|---|---|
| show.bs.popover | This event fires immediately when the show instance method is called. |
| shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
| hide.bs.popover | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.popover | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
| inserted.bs.popover | This event is fired after the show.bs.popover event when the popover template has been added to the DOM. |
$('#date1').on('hidden.bs.popover', function () {
// do something…
})Originally forked from MD.BootstrapPersianDateTimePicker with the intention of leaving Jalaali date conversion to it's respected libraries and adding AngularJS wrapper for it plus some minor performance and appearance tweaks.