jQuery Datepicker Plugin For Persian Date - persianDatepicker

PersianDatepicker is a jQuery datepicker plugin designed for Persian(Jalali) date that supports Persian numbers and Gregorian date.

Basic Usage:

1. Include the jQuery javascript library and jQuery PersianDatepicker's files on the web page.

<!-- Themes -->
<link rel="stylesheet" href="css/persianDatepicker-default.css" />
<link rel="stylesheet" href="css/persianDatepicker-dark.css" />
<link rel="stylesheet" href="css/persianDatepicker-latoja.css" />
<link rel="stylesheet" href="css/persianDatepicker-melon.css" />
<link rel="stylesheet" href="css/persianDatepicker-lightorang.css" />
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Main Script -->
<script src="js/persianDatePicker.js"></script>

2. Create an container for the datapicker plugin.

<input type="text" id="demo" placeholder="select date" />

3. Call the plugin with default options.

$(function() {
  $("#demo").persianDatepicker();
});

4. All the options to customize the persian date picker.

$("#demo").persianDatepicker({

  // month names
  months: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"],

  // week names
  dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],

  // short week names
  shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],

  // shows Gregorian date
  showGregorianDate: false,

  // persian numbers
  persianNumbers: true,
  /* 
  YYYY  =>   year             : 1394  -  ...
  MM    =>   month            : 1     -  12
  DD    =>   day              : 1     -  30|31
  0M    =>   month with zero  : 01    -  12
  0D    =>   day  with zero   : 01    -  30|31
  hh    =>   hour             : 0     -  23
  mm    =>   minute           : 0     -  59
  ss    =>   second           : 0     -  59
  ms    =>   milisecond       : 0     -  3 digit random time of cpu like 359
  NM    =>   name of month    : اسفند-فروردین
  DW    =>   day of week      : 0     -  6
  ND    =>   name of day      : جمعه-شنبه
  */
  formatDate: "YYYY/MM/DD",

  // selected before
  selectedBefore: false,

  // '1394/11/12'
  selectedDate: null, 

  // '1394/11/12'
  startDate: null, 

  // '1395/5/5'
  endDate: null, 

  // prev/next arrows
  prevArrow: '\u25c4',
  nextArrow: '\u25ba',

  // 'dark', 'latoja', 'lightorange', 'melon'
  theme: 'default', 

  // always show
  alwaysShow: !1,

  // selectable years
  selectableYears: null,

  // selectable months
  selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

  // in pixles
  cellWidth: 25, 
  cellHeight: 20, 
  fontSize: 13,  

  // RTL mode           
  isRTL: false,

  // close on blur
  closeOnBlur: true,

  // position of the calendar
  calendarPosition: {
    x: 0,
    y: 0,
  },

  // callback functions
  onShow: function () {
  },
  onHide: function () {
  },
  onSelect: function () {
  },
  onRender: function () {
  }

});

Changelog:

2021-05-06

• fix leapyear indexOf function

2019-09-24

• added new format 0h-0m-0s

2019-04-16

• fix showGregorianDate

2019-02-12

• fix leapyear bug
• added onRender function

2018-04-29

• JS updated.

2016-11-14

• fix z-index isuss CSS

2016-11-13

• Add onRender function listener

2016-08-02

• fix data-jdate attr

2016-06-16

• add data-gdate and data-jdate on select
• fix $().data issus

2016-05-26

• fix z-index isuss CSS

2016-05-03

• function ( $ ) (jQuery)

2015-11-15

• Added always show option

2015-07-26

• Added more options.

2015-02-09

• Added persianDatepicker-melon.css theme.
• Update persianDatepicker.min.js.

 

---

This awesome jQuery plugin is developed by behzadi. For more Advanced Usages, please check the demo page or visit the official website.