Pretty Persian Date Time Picker with Bootstrap 5/4/3

<!-- Bootstrap 5/4/3 -->
<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/bootstrap.bundle.min.js"></script>
<!-- Required For Bootstrap 4/3 -->
<script src="/path/to/jquery.min.js"></script>
<!-- Required For Bootstrap 3 -->
<script src="/path/to/jalaali.js"></script>

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="mds.bs.datetimepicker.style.css">
<script src="mds.bs.datetimepicker.js"></script>
<!-- Bootstrap 4/3 -->
<link rel="stylesheet" href="jquery.Bootstrap-PersianDateTimePicker.css">
<script src="jquery.Bootstrap-PersianDateTimePicker.js"></script>

<!-- Bootstrap 5 -->
<span id="dp-example" class="input-group-text cursor-pointer">ANY TRIGGER ICON</span> 
<input type="text" placeholder="Date Picker Text" data-name="dp-example-text" class="form-control"> 
<input type="text" placeholder="Date Picker Date" data-name="dp-example-date" class="form-control">
<!-- Bootstrap 4/3 -->
<div class="input-group-prepend">
  <span class="input-group-text cursor-pointer" id="dp-example">ANY TRIGGER ICON</span>
</div>
<input type="text" id="dp-example-text" class="form-control" placeholder="Persian Calendar Text" aria-label="date1" aria-describedby="date1">
<input type="text" id="dp-example-date" class="form-control" placeholder="Persian Calendar Date" aria-label="date11" aria-describedby="date11">

// Bootstrap 5
const dpInstance = new mds.MdsPersianDateTimePicker(document.getElementById('dp-example'), {
  targetTextSelector: '[data-name="dp-example-text"]',
  targetDateSelector: '[data-name="dp-example-date"]',
});

// Bootstrap 4/3
$('#dp-example').MdPersianDateTimePicker({
  targetTextSelector: '#dp-example-text',
  targetDateSelector: '#dp-example-date',
});

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

// "auto" | "top" | "bottom" | "left" | "right"
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,

// is persian number
persianNumber: false.

// displays in line
inLine: false,

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

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

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

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

// year offset
yearOffset: 15,

// 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,
rangeSelectorMonthsToShow: [0,0],

// enables modal mode
modalMode: false,

// on view change
calendarViewOnChange: function(date){
  // ...
},

// on day click
onDayClick: function(event){
  // ...
},

// For Bootstrap 5 version
// use instance.methodName();

// 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');

// toggles the date time picker
$('#textbox').MdPersianDateTimePicker('toggle');

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

// enables the date time picker
$('#textbox').MdPersianDateTimePicker('enable');

// update position
$('#textbox').MdPersianDateTimePicker('updatePosition');

// update selected date text
$('#textbox').MdPersianDateTimePicker('updateSelectedDateText');

// dispose date picker
$('#textbox').MdPersianDateTimePicker('dispose');

// gets popover instance
$('#textbox').MdPersianDateTimePicker('getBsPopoverInstance');

// gets modal instance
$('#textbox').MdPersianDateTimePicker('getBs<a href="https://www.jquerypost.com/tag/modal/">Modal</a>Instance');

// updates an option
$('#textbox').MdPersianDateTimePicker('updateOptions', option, value);

// updates options
$('#textbox').MdPersianDateTimePicker('updateOptions', {...});

// gets date picker instance
$('#textbox').MdPersianDateTimePicker('getInstance');

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

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

// destroy
$('#textbox').MdPersianDateTimePicker('destroy');

// convert Date To String  
$('#textbox').MdPersianDateTimePicker('convertDateToString', date: new Date(), isGregorian: false, format: 'yyyy/MM/dd');

// convert Date To Jalali
$('#textbox').MdPersianDateTimePicker('convertDateToJalali', new Date());

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

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