Skip to content
A lightweight jQuery plugin that select persian(jalali) date with selectable years and months and other options.
CSS JavaScript HTML Batchfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css fix z-index isuss CSS May 25, 2016
js fix showGregorianDate problem Apr 15, 2019
LICENSE Initial commit Dec 11, 2013
README.md added onRender function Feb 11, 2019
index.html fix leapyear bug Feb 11, 2019
persianDatepicker.jquery.json Update persianDatepicker.jquery.json Nov 8, 2017

README.md

Demos and information

About

persianDatepicker is A lightweight jQuery plugin that select persian(jalali) date.

  • Browsers: >IE8, Chrome, Firefox, safari, opera
  • Light weight: ~14k minified
  • Beautiful themes: default, dark, latoja(new), lightorang(new), melon(new)
  • Size and font: set the size (width & height) and fontsize for datepicker cells
  • Show persian numbers: (۰ - ۹)
  • Select gregorian date: (good way to convert jalali date to gregorian date)
  • Multi formatting date: like ("YYYY/0M/DD hh:ss") becomes like 1392/07/22 16:45
  • Selectable months and years: [1, 3, 4, 12]
  • Set startDate and endDate(new) startDate: 1393/10/19, endDate: 1393/12/21

Usage

1- include jQuery & persianDatepicker.js & persianDatepicker.css

<link type="text/css" rel="stylesheet" href="css/persianDatepicker.css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/persianDatepicker.min.js"></script>

2- add your html element (input or span or etc)

<input type="text" id="input1" />
<span id="span1"></span>

3- call the persianDatepicker plugin

<script type="text/javascript">
    $(function() {
        $("#input1, #span1").persianDatepicker();       
    });
</script>

Options

To customize persian datepicker, simply pass in an options object: (defaults shown)

$("#input1").persianDatepicker({
     months: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"],
        dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
        shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
        showGregorianDate: !1,
        persianNumbers: !0,
        formatDate: "YYYY/MM/DD",
        selectedBefore: !1,
        selectedDate: null,
        startDate: null,
        endDate: null,
        prevArrow: '\u25c4',
        nextArrow: '\u25ba',
        theme: 'default',
        alwaysShow: !1,
        selectableYears: null,
        selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        cellWidth: 25, // by px
        cellHeight: 20, // by px
        fontSize: 13, // by px                
        isRTL: !1,
        calendarPosition: {
            x: 0,
            y: 0,
        },
        onShow: function () { },
        onHide: function () { },
        onSelect: function () { },
        onRender: function () { }
});

Credit

Created by @kharabati)

use, share , fork , enjoy! , ...

You can’t perform that action at this time.