MD.BootstrapPersianDateTimePicker

Bootstrap 5+ Persian And Gregorian Date Time Picker

Major changes:

1. Using Bootstrap 5
2. jQuery Removed
3. Rewrite all codes, better performance

Demo

NOTE:

Bootstrap 3 version https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs3 Bootstrap 4 version https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs4

Installing:

First you have to install Bootstrap 5 and link it to your html file.

Then you can install latest version of the library via npm:

npm install md.bootstrappersiandatetimepicker@latest

Now add these files to you html:

<link href="/dist/mds.bs.datetimepicker.style.css" rel="stylesheet"/>
<script src="/dist/mds.bs.datetimepicker.js"></script>

NOTE:

This library css file must be after bootstrap css file

I suggest to add scripts at the end of body tag and after bootstrap js file.

How to use:

const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById('dtp1'), {
  targetTextSelector: '[data-name="dtp1-text"]',
  targetDateSelector: '[data-name="dtp1-date"]',
});

Options:

Default values are into [ ]

Name | Values | Description | Sample ------------- | ------------- | ------------- |------------- placement | top, right, [bottom], left | Position of date time picker trigger | [click], mouse down, 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 modalMode | [false], true | Open in modal mode, suitable for smart phones selectedDate | [undefined], Date | Selected date as JavaScript Date object | new Date('2018/9/30') selectedDateToShow | [new Date()], Date | Selected date to start calendar from it as JavaScript Date object | new Date('2018/9/30') selectedRangeDate | Array: Date[] | Selected range date as JavaScript Date object | [new Date('2020/8/5'), new Date('2020/8/15')] 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)] specialDates | Array: Date[] | Array of dates to mark some dates as special | [new Date(2017, 2, 1), new Date(2017, 3, 2)] disabledDays | Array: number[] | Array of disabled week days to prevent user to select them | Disable all "Thursday", "Friday" in persian [ 5, 6 ] 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 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] persianNumber | [false], true | Convert numbers to persian characters | calendarViewOnChange(date) | function | Event fires on date picker's view change onDayClick(event) | function | Event fires on day cell click

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 Value | Description | Sample ------------- | ------------- | ------------- |------------- show | void | show date picker | dtp1Instance.show() hide | void | hide date picker | dtp1Instance.hide() toggle | void | show or hide date picker | dtp1Instance.toggle() enable | void | enable date picker | dtp1Instance.enable() disable | void | disable date picker | dtp1Instance.disable() updatePosition | void | update position of date picker | dtp1Instance.updatePosition() updateSelectedDateText | void | update targetTextSelector text | dtp1Instance.updateSelectedDateText() dispose | void | dispose date picker | dtp1Instance.dispose() getBsPopoverInstance | bootstrap.Popover | return instance of bootstrap popover | const bsPopover = dtp1Instance.getBsPopoverInstance() getBsModalInstance | bootstrap.Modal | return instance of bootstrap modal | const bsModal = dtp1Instance.getBsModalInstance() updateOption | void | update one option of date picker | dtp1Instance.updateOption('isGregorian', false) updateOptions | void | update one option of date picker | dtp1Instance.updateOptions({ isGregorian: false, inLine: false, ... }) getInstance | MdsPersianDateTimePicker | static method, get instance of MdsDatePicker by an element obj | const jalaliObj = mds.MdsPersianDateTimePicker.getInstance(document.getELementById('IdOfElement')); getText | string | Get selected date text | const txt = dtp1Instance.getText() getDate | Date | Get selected date | const dateObj = dtp1Instance.getDate() getDateRange | [fromDate, toDate]: Date[] | Get selected date range | dtp1Instance.getDateRange(); setDate | void | Set selected datetime with Date object argument | dtp1Instance.setDate(new Date('2021/09/22')); setDatePersian | void | Set selected datetime with Date object argument | dtp1Instance.setDatePersian(1400, 06, 31); setDateRange | void | Set selected datetime range with Date object argument | dtp1Instance.setDateRange(new Date('2021/09/04'), new Date('2021/09/22')); clearDate | void | clear selected date | dtp1Instance.clearDate(); convertDateToString | string | utility & static method, convert date object to string | const dateStr = mds.MdsPersianDateTimePicker.convertDateToString(date: new Date(), isGregorian: false, format: 'yyyy/MM/dd'); convertDateToJalali | json | utility & static method, convert date object to Jalali | const jalaliObj = mds.MdsPersianDateTimePicker.convertDateToJalali(new Date());

Events:

MD.BootstrapPersianDateTimePicker uses Bootstrap's popover and modals. so you can use popover or modal events.

https://getbootstrap.com/docs/5.1/components/popovers/#events https://getbootstrap.com/docs/5.1/components/modal/#events

Backend:

If you are using .net in your backend I suggest you https://github.com/Mds92/MD.PersianDateTime to handle PersianDateTime as easy as DateTime.