# 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 a label

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

(date & time) YYYY/MM/DD hh:mm:ss:ms
(day & month with zero) YYYY-0M-0D
(year & name of month & day of week & name of day) YYYY-NM-DW|ND

        $("#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
        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

from 1394/11/12 to 1395/5/5 from today to 1395/5/5 from 1394/11/12 to today

        $("#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

selected date is 1395/5/5 select today date before 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

so we have a data attr with jdate & gdate names..

        $("#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

show jalali, select gregorian date !

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

## - Work With Persian Date Functions

selected date is tomarrow(range of date is next 4 days)

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