View Full Version : Ext.ux.JalaliDatePlugin - A Jalali calendar plugin for ExtJS's date components

22 Sep 2010, 3:18 AM

I've created a plugin for DatePicker, DateMenu and DateField components, which changes their calendar from Gregorian to Jalali (Khorshidi, Persian, Iranian or Shamsi). My company, Tosan Inc, agreed to open source this component and here it is. You can get the code from GitHub at http://github.com/Behrang/Ext.ux.JalaliDatePlugin. This is currently developed for ExtJS 3.2.1.

First you have to include these files in your html:

<script src="Jalali.js"></script>
<script src="JalaliDate.js"></script>
<script src="JalaliDatePlugin.js"></script>

If you want a Persian localization, you can include this one too:

<script src="JalaliDatePlugin-fa_IR.js"></script>

Then you can add JalaliDatePlugin as a plugin for DatePicker, DateMenu and DateField. Here is an example for a DatePicker:

var datePicker = new Ext.DatePicker({
plugins: [Ext.ux.JalaliDatePlugin]

Now your component, in this case datePicker, is working in Jalali calendar.

I have also included an example file which shows the three components in action.Please note that you can use other properties such as minDate, maxDate disabledDays, disabledDates and others just as expected.

Jalali.js contains conversion algorithm. This is the algorithm provided by farsiweb at http://www.farsiweb.ir/wiki/Iranian_Calendar for conversion between Gregorian calendar and Jalali calendar. I have changed it a little for better naming conventions and removed a function from it.

JalaliDate.js instruments JavaScript's Date object and adds Jalali functionality to it. Some methods are added to every instance of Date and we are able to use every instance of date as both Jalali and Gregorian. This simplifies things a lot. For example you can use the Date.format and Date.parse functions to display and parse strings. As I have used Ext.apply and Ext.override, you will need Ext for this. If you want to use it in other frameworks, you have to change a few lines.

JalaliDatePlugin.js is a plugin for Ext components. It supports all three date components (DatePicker, DateMenu and DateField). Just add this to the plugins property of those components.

JalaliDatePlugin-fa_IR.js is a localization for Persian language. You can use it if your application's locale is Persian. If you don't include it, everything will be in English.

example.html is an example for showing the usage in action.

Jalali.js was distributed under the terms of LGPL, so it is distributed under LGPL. Other files are distributed under the terms of MIT license.

Please feel free to use it and provide feedback.

22 Sep 2010, 4:44 AM
Awesome job, the code is well laid out, I especially like how you made it a plugin.

23 Sep 2010, 7:11 AM

1 Jul 2011, 11:18 PM
thanks for your plugin.
i`v using your plugin with bottom code.but after sumbit form, i`v received the date value, similar to

Thu Jul 07 2011 00:00:00 GMT 0430 (IRDT)
but i want receive that, similar to "1389/04/11"
my code:

xtype: 'datefield',
plugins: [Ext.ux.JalaliDatePlugin],
id: 'faktor_date',
name: 'faktor_date',
value: '<?php echo $shamsi_calender; ?>',
allowBlank: false

2 Jul 2011, 12:06 AM

var persian_date = Ext.getCmp('Jalali_cal').getRawValue();

3 Jul 2011, 12:47 AM

This plugin only changes the display of the date. Internally, it just adds some methods to the JavaScript date object to show and parse JalaliDate. When a Jalali date is selected, it is converted to a Gregorian date object.

So, if you want to use it, you have to get the Gregorian date object on the server and convert it to Jalali again. Although your solution is working, I don't know consequences of this usage. I suggest that you use the PHP version of Jalali conversion algorithm on the server side to convert Gregorian to Jalali. That code is here: http://www.farsiweb.info/jalali/jalali.phps

3 Jul 2011, 12:54 AM
If you don't want to change your server side code, you may also format the date value using Ext's date formatting functions with a format of 'Jalali' or one of these:

var d = new Date();
console.log(d.format('B/Q/R')); // 1389/06/14
console.log(d.format('b/q/r')); // 89/6/14
console.log(d.format('l, r e B')); // Sunday, 14 Shahrivar 1389

3 Jul 2011, 1:48 AM
ok thanks.
mamnoon az kare ba arzesheteoon.
komake bozorgi behem kard.

2 Jan 2013, 11:39 PM
Hi dear behrang

Good job broda'
But this plugin don't work with ExtJs 4.x

Please fix it and make me a happy man :)


5 Jan 2013, 6:41 AM
Ok, It will be updated soon.

6 Jan 2013, 8:48 PM
I'm wating anxiously, dude

1 Jun 2013, 3:47 AM

2 Jun 2013, 10:06 PM
It is now updated to work with v4.2.1.

7 Jun 2013, 9:32 PM
Hi Behrang
Is it possible to upload the Persian calendar here for public usage.
Amir Meysami

8 Jun 2013, 5:00 AM
Why don't you get it from GitHub?

It's open source and you can download it there:

24 Jul 2013, 3:00 AM
I'm working on an application that's written with Extjs 3.1.1 and I want to complete it's date and time setting. Could I use this plugin with Extjs 3.1.1? I received these errors when running app with this plugin:


Could you please help me?

24 Jul 2013, 8:13 AM
There is a branch for Ext js 3.2.1. It may work for you. Get it from GitHub.

25 Jul 2013, 1:27 AM
I used the calendar for extjs 3.2.1 and the errors occurred.

18 Oct 2013, 12:03 AM
Dear Behrang

I am new by extjs

i have a little problem .
i want to set mindate to 3 day after today date to disable the date picker for 3 day after today.

can you please help me?

20 Oct 2013, 1:29 AM
Use Ext.Date to add 3 days to a new Date object and set that as minValue for a DateField.

20 Oct 2013, 2:01 AM