az.BootstrapPersianDateTimePicker

Persian And Gregorian Date Time Picker

CHECK OUT THE DEMO HERE

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:

• jQuery
• Bootstrap 4+
• MomentJS
• moment-jalaali

Install

npm install az.bootstrappersiandatetimepicker

Now 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.