jQuery Persian Datepicker

 

View in GitHub

jQuery Persian Datepicker

A lightweight jQuery plugin that select persian(jalali) date with selectable years and months and other options.

- Usage


    <link rel="stylesheet" href="css/persianDatepicker-default.css" />
    <script src="js/jquery.min.js" ></script>
    <script src="js/persianDatepicker.min.js"></script>
    <script>
        $("#elementId, .elementClass").persianDatepicker();
    </script>

- New themes

                   

- Multi element : text, label, span, div, p, ...

a span

- All options


    $("jQuerySelectQuery").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 () {}
    });

- Customize the size

 

    $("#pdpBig").persianDatepicker({
        cellWidth: 78,
        cellHeight: 60,
        fontSize: 18,
    });
    $("#pdpSmall").persianDatepicker({
        cellWidth: 14,
        cellHeight: 12,
        fontSize: 8,
    });

- Format selected date & time




    $("#pdpF1").persianDatepicker({
        formatDate: "YYYY/MM/DD hh:mm:ss:ms"
    });
    $("#pdpF2").persianDatepicker({
        formatDate: "YYYY-0M-0D"
    });
    $("#pdpF3").persianDatepicker({
        formatDate: "YYYY-NM-DW|ND",
        isRTL:!0  //  isRTL:!0 => because of persian words direction
    });
    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
    0h    =>   hour with zero   : 0     -  23
    0m    =>   minute with zero : 0     -  59
    0s    =>   second with zero : 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      : جمعه-شنبه

- startDate & endDate


    $("#pdpStartEnd").persianDatepicker({
        startDate: "1394/11/12",
        endDate:"1395/5/5"
    });
    $("#pdpStartToday").persianDatepicker({
        startDate: "today",
        endDate:"1395/5/5"
    });
    $("#pdpEndToday").persianDatepicker({
        startDate: "1393/11/12",
        endDate:"today"
    });

- selectedDate & selectedBefore


    $("#pdpSelectedDate").persianDatepicker({
        selectedDate:"1395/5/5"
    });
    $("#pdpSelectedBefore").persianDatepicker({
        selectedBefore: !0
    });
    $("#pdpSelectedBoth").persianDatepicker({
        selectedBefore: !0,
        selectedDate:"1395/5/5"
    });

- data-jdate & data-gdate attributes


    $("#pdp-data-jdate").persianDatepicker({
        onSelect: function () {
            alert($("#pdp-data-jdate").attr("data-gdate"));
        }
    });
    $("#pdp-data-gdate").persianDatepicker({
        showGregorianDate: true,
        onSelect: function () {
            alert($("#pdp-data-gdate").attr("data-jdate"));
        }
    });

- Gregorian Date


    $("#pdpGregorian").persianDatepicker({ showGregorianDate: true });

- Work With Persian Date Functions


    var p = new persianDate();
    $("#pdpStartDateTommarrow").persianDatepicker({
        startDate: p.now().addDay(1).toString("YYYY/MM/DD"),
        endDate: p.now().addDay(4).toString("YYYY/MM/DD")
    });