Persian Datepicker with jQuery – Behzadi Datapicker

Free jQuery plugin to select Persian (Jalali) date with select-able years and months. Behzadi Persian Datepicker comes with different themes and a number of customization options.

Plugin Overview

Plugin: persianDatepicker
Author: Mohammad Hasan Behzadi
Licence: MIT Licence
Published: March 1, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
and Font Awesome 4

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 583 KB

How to Use Persian Datepicker:

1. To getting started with Persian Datepicker, first of all load the jQuery and Font Awesome in your HTML document.

<!--jQuery-->
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
 
<!-- Font Awesome -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. After that, include the date picker’s JavaScript and CSS files into your page.

<!-- Persian Datepicker JS -->
<script src="js/persianDatepicker.js"></script>

<!-- Persian Datepicker CSS -->
<link rel="stylesheet" href="css/persianDatepicker-default.css" />

3. If you also want to implement one of built-in theme for datepicker, simply add the desired theme stylesheet.

<!-- Themes for Datepicker -->
<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" />

4. Create input element with a unique id.

<input type="text" placeholder="Pick a date" id="pdpDefault" />

5. Initialize the plugin in jQuery document ready function.

$(document).ready(function(){
  $("#pdpDefault").persianDatepicker();
});

6. All available options for Persian Datepicker are as follows:

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

For more advance usage, please visit the demo page.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...