jQuery Jalali Date Picker Plugin

The jQuery Jalali Date Picker Plugin is a customizable date picker designed for Persian (Jalali) date selection in web applications. This lightweight and user-friendly plugin simplifies the process of capturing and formatting Persian dates, making it an ideal choice for projects targeting Persian-speaking users.

Installation

Before using the jQuery Jalali Date Picker Plugin, ensure you have the following dependencies installed:

• jQuery: A fast and feature-rich JavaScript library.
• Moment.js: A powerful library for parsing, formatting, and manipulating dates and times.
• Jalali Moment (jalali-moment.browser.js): A library for working with Jalali (Persian) dates and times.

You can include these dependencies in your project using script tags or package managers like npm or yarn.

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Include Jalali Moment -->
<script src="path/to/jalali-moment.browser.js"></script>

Install jalali-datepicker using npm:

npm install @rmanaf/jalali-datepicker

Usage

To use the jQuery Jalali Date Picker Plugin, follow these steps:

1. Include the required dependencies in your HTML file, as mentioned in the installation section.

2. Include the jQuery Jalali Date Picker Plugin script in your HTML file:

<!-- Include the jQuery Jalali Date Picker Plugin -->
<script src="./dist/jalali-datepicker.js"></script>

<!-- Theme -->
<script src="./dist/themes/bs5.js"></script>

3. Initialize the date picker on your input elements using jQuery. For example, if you have an input element with the ID "datepicker-input," you can initialize it like this:

$(document).ready(function() {
    $('#datepicker-input').jdatepicker({
        // Customize date picker options as needed
    });
});

Options

• date: The initial date to display in the date picker.
• format: The date format to use for display and input.
• lang: The language/locale for the date picker (default is 'fa' for Persian).
• theme: Custom CSS classes for styling the date picker. e.g. 'jdatepicker.theme.bs5'
• events: Events that trigger the date picker (e.g., 'click').
• container: The HTML element to which the date picker is appended.
• prevMonthText: Text for the "previous month" button.
• nextMonthText: Text for the "next month" button.
• dayNames: Names of days of the week.
• monthNames: Names of months.
• yearRange: Range of selectable years.
• placement: Position of the date picker relative to the input element.
• weekend: Days of the week that are considered weekends.
• minWidth: Minimum width of the date picker.
• fullWidth: Whether the date picker should expand to the full width of the input element.
• footer: Whether to display a footer with buttons.
• today: Whether to include a "Today" button.
• year: Whether to include a year selection dropdown.
• month: Whether to include a month selection dropdown.
• dayOfWeek: A function to customize the mapping of days of the week.
• filterDigits: A function to filter and replace digits in input.
• filterMonthName: A function to filter and replace month names in input.
• beforeHeader: A function to customize content before the date picker header.
• afterHeader: A function to customize content after the date picker header.
• beforeFooter: A function to customize content before the date picker footer.
• afterFooter: A function to customize content after the date picker footer.

Demo

See demo here