MD.BootstrapPersianDateTimePicker icon indicating copy to clipboard operation
MD.BootstrapPersianDateTimePicker copied to clipboard

Published 20 hours ago • verified publisher icon Mds92
→

Metadata

Bootstrap Persian/Gregorian Date Time Picker

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

MD.BootstrapPersianDateTimePicker Demo

MD.BootstrapPersianDateTimePicker MD.BootstrapPersianDateTimePicker

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.

← Metadata

344
Stars
105
Forks
Watchers

Owner

verified publisher icon Mds92

Metadata

Bootstrap Persian/Gregorian Date Time Picker

Back