Bootstrap Persian/Gregorian Date Time Picker

Overview

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.

Comments
  • نمایش روزهای انتخاب شده

    نمایش روزهای انتخاب شده

    اگه لطف بفرمایین و همانند تابع های disabledDates و روزهای تعطیل بشه آرایه ای فرستاد و اون روزها رو بصورت سبز رنگ نشون بده کاره منو راه انداختی و کاره چندین بیمارستان راه میفته و خدایی ثواب میبری منم دعات میکنم داداش خیلی گلی سپاس

    invalid 
    opened by mhmsignin 20
  • نحوه استفاده از تابع disabledDates

    نحوه استفاده از تابع disabledDates

    با سلام و خسته نباشد میشه یک مثال برای تابع disabledDates بزارین ؟ من تو تست مشکل دارم با این و disable نمیشه روزهایی که بهش دادم با سپاس

    var days = [new Date(2019, 7, 14), new Date(2019, 7, 16), new Date(2019, 7, 18), new Date(2019, 7, 19)]; $('#dates').MdPersianDateTimePicker({ inLine: true, disabledDates: days, });

    question 
    opened by mhmsignin 19
  • تعیین مقدار اولیه تاریخ

    تعیین مقدار اولیه تاریخ

    با سلام و تشکر آیا راهی هست که قبل از بارگذاری پلاگین، مقدار اولیه تاریخ را (مثلا با متغیری که از سرور ارسال میشود) ست کنیم به گونه ای که اولین نمایش با آن تاریخ باشد مثلا با اتریبیوتی بنام data-initdate='1/4/1397' چک کردم در موضوعات قبلی شما اشاره کرده بودید که کافیست مقدار value را ست کنیم ولی این مقدار نه در خود تگ و نه در ست کردن با جکوئری کار نکرد یعنی باعث نشد کل نمایش تقویم به آن تاریخ برود و همواره ماه و تاریخ جاری نمایش می یابد

    bug question 
    opened by smrfakhri 16
  • خطا در خروجی برای textformat

    خطا در خروجی برای textformat

    من برای textformat اومدم و فرمت زیر را اعمال کردم ولی خروجی بر حسب میلادی داده میشه

      $("#dt_class").MdPersianDateTimePicker({
                            targetDateSelector: "#date_class",
                            targetTextSelector: "#showDate_class",
                            textFormat : " dddd dd MMMM yyyy ",
                            isGregorian: false
                        });
    
    bug 
    opened by mmhashemi 14
  • کارنکردن دوبار کلیک

    کارنکردن دوبار کلیک

    سلام چرا من از این تابع استفاده میکنم $(document).on('dblclick', mdDatePickerContainerSelector + ' [data-day]', function (event) { alert('test') }); کار نمیکند

    question 
    opened by amir3164 11
  • نمایش چند روز در تقویم

    نمایش چند روز در تقویم

    با سلام وخسته نباشی من دنبال این ویژگی ها هستم حالا نمیدونم شما زحمتشو کشیدید وجود دارد یا خیر 1- انتخاب چند روز به طور همزمان. 2- افزودن دیکشنری دلخواه (https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/issues/113) با سپاس

    question 
    opened by amir3164 11
  • MdPersianDateTimePicker Uncaught TypeError: Cannot read property 'trigger' of undefined

    MdPersianDateTimePicker Uncaught TypeError: Cannot read property 'trigger' of undefined

    وقتی در به صورت دینامیک ادیتی برای تقویم میسازم با کلیک روی دکمه تقویم باز نمیشه و اگه از دستور زیر استفاده کنم $('#TSelL').MdPersianDateTimePicker('show'); ارورر میده MdPersianDateTimePicker Uncaught TypeError: Cannot read property 'trigger' of undefined

    البته id درست ست شده و تکراری نیست

    opened by kabiri 10
  • موقعیت مکانی هنگام ظاهر شدن

    موقعیت مکانی هنگام ظاهر شدن

    سلام. وقت بخیر راستش یک مشکلی هست توی نمایش دیت پیکر، اینکه وقتی تریگر نمایش دیت پیکر جایی نزدیک به انتهای محدوده نمایشگر باشه، مثلا گوشه ها باشه، دیت پیکر ابتدا خارج از محدوده نمایش ظاهر میشه. و با یک اسکرول هوشمند عمل میکنه و یه جایی داخل محدوده نمایش تغییر مکان میده

    مشکل در نمایش ابتدایی دیت پیکره اگر این رو در لیست رفع باگ ها قرار بدید ممنون میشم.

    question 
    opened by Ali-Azmoud 10
  • قرار دادن تاریخ انتخابی در value

    قرار دادن تاریخ انتخابی در value

    با سلام اول تشکر بابت زحمتتون یک مشکل هست و اون این هست که چطور میتونم تاریخ انتخابی به این فرمت 1395/05/23 به خاصیت value انتخابی قرار بدم روی input box و از اونجا در برنامه mvc خودم ارسال کنم به اکشن متد ؟ ممنونم

    help wanted 
    opened by Milad-Darvishi 10
  • بسته شدن تقویم در صورت کلیک بر روی ماه یا سال

    بسته شدن تقویم در صورت کلیک بر روی ماه یا سال

    سلام. وقت بخیر با تشکر از کار بسیار خوبتون. م یه مشلی دارم. من برای اولین بار روی تکست باکس تاریخ کلیک می کردم و تقویم باز شد، تاریخی رو انتخابکردم و تقویم رو بستم. خواستم تاریخ رو تغییر بدم، تقویم رو باز کزدم اما وقتی روی ماه یا سال یا آیکون های کناریش کلیک می کنم، تقویم بسته میشه

    ممنون میشم راهنمایی بفرمایید مشکل از کجا می تونه باشه

    question 
    opened by sara20189 9
  • مشکل santizeFn  برای datePicker در angular

    مشکل santizeFn برای datePicker در angular

    سلام . من موقع استفاده از datepicker در انگولار ۸ با خطای santizeFn
    مواجح میشم

    bootstrap version 4.3.1 jquery: 3.4.1

    ERROR Error: TOOLTIP: Option "sanitizeFn" provided type "window" but expected type "(null|function)". at Object.typeCheckConfig (bootstrap.bundle.min.js:6) at i.t._getConfig (bootstrap.bundle.min.js:6) at i (bootstrap.bundle.min.js:6) at new i (bootstrap.bundle.min.js:6) at HTMLInputElement. (bootstrap.bundle.min.js:6) at Function.each (jquery.min.js:2) at k.fn.init.each (jquery.min.js:2) at k.fn.init.i._jQueryInterface [as popover] (bootstrap.bundle.min.js:6) at HTMLInputElement. (jquery.md.bootstrap.datetimepicker.js:1968) at Function.each (jquery.min.js:2)

    question 
    opened by alirezabahary 9
  • جلوگیری از بسته شدن مودال بعد از انتخاب تاریخ

    جلوگیری از بسته شدن مودال بعد از انتخاب تاریخ

    سلام. من میخوام وقتی توی حالت مودال باز میشه . تا دکمه ای که تعیین کردم برای تایید و بستن مودال رو نزدم ، مودال بسته نشه و تاریخ توی اینپوت قرار نگیره . چطوری میتونم این رو هندل کنم ؟ ممنون از راهنماییتون

    opened by arbabi2010 3
  • خطا در انتخاب امروز

    خطا در انتخاب امروز

    سلام

    وقتی مودال باز میشه و یک تاریخی بجز تاریخ امروز انتخاب میشه و مودال بسته میشه و تاریخ انتخاب شده در اینپوت باکس قرار میگیره، و مجددا مودال رو جهت اصلاح تاریخ باز میکنیم، اگر روی "امروز" بزنیم، آخرین تاریخی که انتخاب کردیم بعنوان تاریخ امروز انتخاب میشه و نه تاریخ واقعی امروز!!

    ممنون اگه رفع بشه

    opened by Mr-Malekan 0
  • خطا در هنگام لود صفحه و کارنکردن تقویم

    خطا در هنگام لود صفحه و کارنکردن تقویم

    سلام و درود فایلهای css , js رو طبق تصاویر زیر اضافه کردم ولی خطای jQuery میده که اونهم اضافه کردم بدون استفاده از این پکیج کار میکنه نمیدونم مشکل از کجاست؟

    1

    2

    3

    opened by NZ62AN 5
  • مشکل عدم نمایش مودال و تاریخ انتخاب شده

    مشکل عدم نمایش مودال و تاریخ انتخاب شده

    سلام از اینکه این انتخاب کننده تاریخ و زمان فارسی رو درست کردید بسیار ممنونم. من با دوتا مشکل برخوردم:

    • یکی اینکه وقتی selectedDate رو مقدار دهی میکردم، تاریخ اولیه نمایش داده نمی شد. بعد به این راه حل رسیدم که بعد از تعریف لازمه که updateSelectedDateText رو اجرا کنم: dtp1Instance.updateSelectedDateText()
    • مشکل بعدی این بود که وقتی modalMode = true می شه، دیگه تقویم نمایش داده نمی شود. این مشکل با اضافه کردن this.element.addEventListener("click", this.showPopoverEvent, !0) به enableMainEvents حل شد.

    enableMainEvents() { if (!this.setting.inLine) if (null != this.bsPopover) this.element.addEventListener("shown.bs.popover", this.popoverOrModalShownEvent), this.element.addEventListener("hidden.bs.popover", this.popoverOrModalHiddenEvent), this.element.addEventListener("inserted.bs.popover", this.popoverInsertedEvent), this.element.addEventListener("click", this.showPopoverEvent, !0); else if (null != this.bsModal) { const e = this.getModal(); if (null == e) return void console.error("mds.bs.datetimepicker: `modalElement` not found!"); e.addEventListener("shown.bs.modal", this.popoverOrModalShownEvent), e.addEventListener("hidden.bs.modal", this.popoverOrModalHiddenEvent); this.element.addEventListener("click", this.showPopoverEvent, !0); } }

    opened by AdelZaghi 1
  • فیلد main در package.json

    فیلد main در package.json

    سلام و درود لطفا در فایل package.json فیلد "main": "dist/mds.bs.datetimepicker.js" رو قرار بدهید تا در لاراول بتونیم ازش استفاده کنیم من از نسخه 4 استفاده میکنم در صورت امکان در نسخه های دیگه هم قرار بدهید.. با تشکر

    opened by NZ62AN 0
Releases(v4.2.1)
Owner
Mohammad Dayyan
I'm a curious Full-Stack Developer That's it.
Mohammad Dayyan
A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

vanilla-datetimerange-picker Overview. A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js,

null 22 Dec 6, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Simple date and time picker in vanilla javascript

simplepicker Simple datetime picker in vanilla javascript. This project is mostly based on material-datetime-picker, but without it relying on externa

Priyank Patel 51 Jul 18, 2022
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin

Zebra Datepicker A super-lightweight, highly configurable, cross-browser date/time picker jQuery plugin Zebra_Datepicker is a small yet and highly con

Stefan Gabos 391 Dec 29, 2022
A simplified jQuery date and time picker

jSunPicker A simplified jQuery date and time picker Why another Date picker? There are numerous date, time pickers out there. However, each of those l

null 1 May 31, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Clock Timepicker Plugin for jQuery See a demo here A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plu

Andy 51 Dec 22, 2022
📆 The modern, open source "Airbnb style" date picker.

Date Picker A pretty, modern date picker. Coming soon. ?? Get Started wip wip ?? Testing pnpm test ?? Changelog Please see our releases page for more

Open Web Foundation 8 Oct 11, 2022
pre-calculated list of similar Persian words ordered by rating and best match

similar-persian-words pre-calculated list of similar Persian words ordered by rating and best match. Install npm: npm install similar-persian-words Us

peyman farahmand 6 May 29, 2022
List of ~240,000 Persian words

an-array-of-persian-words List of ~240,000 English words. Derived from the Dehkhoda dictionary. Install npm: npm install an-array-of-persian-words Use

peyman farahmand 3 Mar 16, 2022
🤝 A set of Persian Helpers for NodeJS to make your life easier

Persian Helpers Persian Helpers is a minimal NodeJS package with a set of helpers/tools specifically for the Persian/Farsi language. If you like the p

Kasra Ghoreyshi 11 Dec 22, 2022
A simple offline captcha in persian.

Nastaliq Captcha A simple offline captcha in persian. How to install npm install --save nastaliq-captcha How to use : const express = require("express

Alireza Keshvari 6 Nov 7, 2022
This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my initial appointment date. It doesn't handle rescheduling.

US-visa-appointment-notifier This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my in

Theophilus Omoregbee 13 Jan 4, 2023
Quick access to view the current time and date in Ethiopian calendar.

Ethiopian-Current-time-chrome-extension Quick access to view the current time and date in Ethiopian calendar. steps to follow:- Extract the zip folder

null 10 Aug 26, 2022
Um date time simples com frases do nosso Deus toguro 📅

toguro-datetime Um date time simples com frases do nosso Deus toguro ?? Como utilizar o pacote ? ?? Instale o pacote ?? npm -i toguro-datetime | ya

Paulo Henrique 7 Oct 23, 2022