Ext.ux.JalaliDatePlugin - A Jalali calendar plugin for ExtJS's date components

[Behrang]

Hi,

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.

Usage
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.

About
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.

License
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.

[evant]

Awesome job, the code is well laid out, I especially like how you made it a plugin.

[Behrang]

Thanks.

[parsbin]

Hi
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

[parsbin]

Solved

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

[Behrang]

Hi,

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

[Behrang]

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

[parsbin]

ok thanks.
--------
mamnoon az kare ba arzesheteoon.
komake bozorgi behem kard.

[gardeshgar]

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

Tnx

[Behrang]

Ok, It will be updated soon.