Persian Date and Time Picker with jQuery and Bootstrap

MD.BootstrapPersianDateTimePicker uses Bootstrap Popovers and Bootstrap Modal. So it’s got the flexibility of popover’s popover. This is a great jQuery Date and Time plugin that enables you to select a date and/or Persian (Jalali) date range from a Bootstrap 4 based calendar window or Bootstrap 3 popup component.

datepicker persian example, persian datepicker, persian range datepicker, persian datepicker cdn, persian datetimepicker, persian timepicker

Simple and Lightweight Datetime Picker Component With JavaScript

How to make use of it:

1. Load jQuery JavaScript library and different required assets within the doc.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/jalaali.js"></script>

2. Load the jQuery MD.BootstrapPersianDateTimePicker plugin’s JS and CSS information within the doc.

<link rel="stylesheet" href="jquery.Bootstrap-PersianDateTimePicker.css">
<script src="jquery.Bootstrap-PersianDateTimePicker.js"></script>

3. Create a normal text input for the date time picker. Plugin’s choices will be passed through data attributes or JavaScript.

<input id="textbox" type="text" value="۱۳۹۲/۰۱/۰۱"
// or
  // options here

4. Full plugin options with default values.

// switches between English number or Persian number  
englishNumber: false,

// or top, right, left
placement: 'bottom',

// trigger event
trigger: 'click',

// enables time picker
enableTimePicker: false,

// text selector
targetTextSelector: '',

// date selector
targetDateSelector: '',

// enables date range selection
toDate: false,
fromDate: false,

// group ID
groupId: '',

// disables the date picker
disabled: false,

// text format
// yyyy/MM/dd HH:mm:ss
textFormat: '',

// date formart
// yyyy/MM/dd HH:mm:ss
dateFormat: '',

// is Gregorian
isGregorian: false,

// displays in line
inLine: false,

// selected date
// new Date('2018/9/30')
selectedDate: undefined,

// Selected range date as JavaScript Date object
selectedRangeDate: [],

// selected range date as JavaScript Date object
// [new Date('2020/8/5'), new Date('2020/8/15')]
selectedRangeDate: [],

// selected to show
selectedDateToShow: new Date(),

// Selected date to start calendar from it as JavaScript Date object
selectedDateToShow: new Date(),

// months to show
monthsToShow: [0, 0],

// year offset
yearOffset: 30,

// holidays
// [new Date(), new Date(2017, 3, 2)]
holiDays: [],

// disabled dates
disabledDates: [],

// disable days
disabledDays: [],

// special days
specialDates: [],

// disables days before/after today
disableBeforeToday: false,
disableAfterToday: false,

// disables days before/after date
disableBeforeDate: undefined,
disableAfterDate: undefined,

// enables range selecton
rangeSelector: false,
rangeSelectorStartDate: undefined,
rangeSelectorEndDate: undefined

// enables modal mode
modalMode: false

5. API strategies.

// gets selected date text

// gets selected date

// gets date range

// sets a new date
$('#textbox').MdPersianDateTimePicker('setDate', new Date(2018, 12, 24));

// sets a new date range
$('#textbox').MdPersianDateTimePicker('setDateRange', new Date(2018, 11, 30), new Date(2018, 12, 25));

// clears selected date

// sets persian date
$('#textbox').MdPersianDateTimePicker('setDatePersian', {year: 1397, month: 1, day: 1, hour: 0, minute: 0, second: 0});

// hides the date time picker

// shows the date time picker

// disables the date time picker
$('#textbox').MdPersianDateTimePicker('disable', /isDisable/ true);

// changes type
$('#textbox').MdPersianDateTimePicker('changeType', /isGregorian/ true, /* englishNumber */ true);

// sets new options
$('#textbox').MdPersianDateTimePicker('setOption', 'yearOffset', 5);

// destroy

6. Trigger a function on view change.

  calendarViewOnChange: function(selectedDateToShow){
    // do something

7. Trigger a function when a date is clicked.

  onDayClick: function(event){
    // do something

Pretty Persian Date Time Picker, MD.BootstrapPersianDateTimePicker Plugin/Github, blazor persian datepicker, vuetify persian datepicker

See Demo And Download

Official Website(Mds92): Click Here

This superior jQuery/javascript plugin is developed by Mds92. For extra Advanced Usages, please go to the official website.

Leave a Comment