Persian Date and Time Picker with jQuery and Bootstrap

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="۱۳۹۲/۰۱/۰۱"
       data-mddatetimepicker="true"  
       data-placement="right"
>

// or
$('#textbox').MdPersianDateTimePicker({ 
  // 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
$('#textbox').MdPersianDateTimePicker('getText');

// gets selected date
$('#textbox').MdPersianDateTimePicker('getDate');

// gets date range
$('#textbox').MdPersianDateTimePicker('getDateRange');

// 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
$('#textbox').MdPersianDateTimePicker('clearDate');

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

// hides the date time picker
$('#textbox').MdPersianDateTimePicker('hide');

// shows the date time picker
$('#textbox').MdPersianDateTimePicker('show');

// 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
$('#textbox').MdPersianDateTimePicker('destroy');

6. Trigger a function on view change.

$('#textbox').MdPersianDateTimePicker({ 
  calendarViewOnChange: function(selectedDateToShow){
    // do something
  }
});

7. Trigger a function when a date is clicked.

$('#textbox').MdPersianDateTimePicker({ 
  onDayClick: function(event){
    // do something
  }
});

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

See Demo And Download