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

Time & Clock
BootstrapPersianDateTimePicker jQuery Plugin
File Size: 14.13 KB
Views Total: 1138 views
Last Update:April 16, 2024
Publish Date: October 05, 2015
Official Website: Go to website
License: MIT
Plugin Author: Mds92
Demo    Download

A Custom Persian Date Time Picker jQuery Plugin with Bootstrap is a powerful tool that allows users to select dates and times using the Persian calendar. This tool is ideal for websites or applications that require date and time input in the Persian language. it works seamlessly with the Bootstrap framework and The picker is designed to be fully responsive and easy to use. A user interface is clean and modern, making it easy for users to select dates and times with a few clicks. Overall, the Custom Persian Date Time Picker is an excellent solution for developers who want to add a user-friendly date and time picker to their website or application while supporting the Persian language.

Dependencies:

  • jQuery (Required for Bootstrap 4 & 3 versions)
  • Bootstrap 5, Bootstrap 4, or Bootstrap 3 framework
  • Jalaali JavaScript (Required For Bootstrap 3 version)

How to use :

Add jQuery JavaScript library and other required resources in the document.

<!-- 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>

Add the MD.BootstrapPersianDateTimePicker plugin’s JS and CSS files in the document.

<!-- 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>

Initialize the date picker on an input field you specify.

<!-- 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',
});

Full plugin options with default values.

// 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){
  // ...
},

API methods.

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

Trigger a function on view chage.

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

Trigger a function when a date is clicked.

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

Done

Thanks for make jQuery plugin is developed by Mds92 For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v4.2.4
  • v4.2.1
  • v4.2.0
  • v4.1.1
  • v4.1.0
  • v4.0.0
  • v3.11.5
  • v3.11.4
  • v3.11.0
  • v3.10.1
  • v3.10.0
  • v3.9.2
  • v3.9.1
  • v3.9.0
  • v3.7.4
  • v3.7.3
  • v3.7.2
  • v3.7.1
  • v3.7.0
  • v3.6.3
  • v3.6.2
  • v3.6.1
  • v3.5.0
  • v3.4.8
  • v3.4.7
  • v3.4.1
  • v3.4.0
  • v3.3.7
  • v3.3.6
  • v3.3.5

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.