Tiny Customizable Persian (Jalali) Date Picker In jQuery

A lightweight, customizable, user-friendly Persian (Jalali) date picker plugin allows users to select and format dates/months/years in the proper Persian format. 

Compatible with both Bootstrap 5 and Bootstrap 4. Whether your users are in Iran, Afghanistan, Tajikistan or beyond, this plugin provides the localized UX they expect.

How to use it:

1. Load the necessary jQuery, Moment.js, and Bootstrap framework in the document.

<!-- jQuery + Bootstrap 5 or Bootstrap 4 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Moment.js for parsing, formatting, and manipulating dates and times -->
<script src="/path/to/cdn/moment.min.js"></script>

<!-- jalali-moment.browser.js for handling Jalali (Persian) dates and times. -->
<script src="/path/to/cdn/jalali-moment.browser.js"></script>

2. Download and load the jQuery Jalali Date Picker's files.

<!-- Core -->
<script src="/dist/jalali-datepicker.js"></script>

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

<!-- Bootstrap 4 Theme -->
<script src="/dist/themes/bs4.js"></script>

3. Attach the Jalali Date Picker to the input field you specify.

<input id="example" />

$('#example').jdatepicker({
  theme: jdatepicker.theme.bs5,
}).on('jdp.change', (e, d) => {
  // get the selected date
  console.log(d);
});

4. Available options to customize the Jalali Date Picker.

$('#example').jdatepicker({
  date: moment(),
  format: 'jYYYY/jM/jD',
  lang: 'fa', // 'fa' for Persian
  theme: 'default',
  events: ['click'], // trigger event(s)
  container: 'body',
  prevMonthText: 'قبل',
  nextMonthText: 'بعد',
  dayNames: ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'],
  monthNames: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
  yearRange: [parseInt(_today.format('jYYYY')) - 100, parseInt(_today.format('jYYYY')) + 20],
  placement: 'bottom', // 'top', 'right', 'left'
  weekend: [6],
  theme: {},
  target: null,
  targetFormat: 'YYYY-MM-DD hh:mm:ss',
  minWidth: '260px',
  fullWidth: false,
  footer: true,
  today: true,
  year: true,
  month: true,
  dayOfWeek: (d) => {
    if (d > 5) {
      d = d - 5;
    } else {
      d = d + 2;
    }
    d = d - 1;
    return d;
  },
})

Changelog:

2024-01-20

• v1.0.3

---

This awesome jQuery plugin is developed by Rmanaf. For more Advanced Usages, please check the demo page or visit the official website.