1. #1
    Sencha User Behrang's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    2
    Behrang is on a distinguished road

      0  

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

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


    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:
    Code:
        <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:
    Code:
        <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:
    Code:
    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.
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,161
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Awesome job, the code is well laid out, I especially like how you made it a plugin.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User Behrang's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    2
    Behrang is on a distinguished road

      0  

    Default


    Thanks.

  4. #4
    Sencha User parsbin's Avatar
    Join Date
    Feb 2011
    Location
    Iran, Alborz, Karaj
    Posts
    123
    Vote Rating
    0
    parsbin is on a distinguished road

      0  

    Default


    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
    PHP Code:
    Thu Jul 07 2011 00:00:00 GMT 0430 (IRDT
    but i want receive that, similar to "1389/04/11"
    my code:

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

  5. #5
    Sencha User parsbin's Avatar
    Join Date
    Feb 2011
    Location
    Iran, Alborz, Karaj
    Posts
    123
    Vote Rating
    0
    parsbin is on a distinguished road

      0  

    Default


    Solved

    PHP Code:
    var persian_date Ext.getCmp('Jalali_cal').getRawValue(); 

  6. #6
    Sencha User Behrang's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    2
    Behrang is on a distinguished road

      0  

    Default Better solution is to convert Gregorian to Jalali on the server

    Better solution is to convert Gregorian to Jalali on the server


    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

  7. #7
    Sencha User Behrang's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    2
    Behrang is on a distinguished road

      0  

    Lightbulb Another solution is to format date using Jalali format

    Another solution is to format date using Jalali format


    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:
    Code:
     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

  8. #8
    Sencha User parsbin's Avatar
    Join Date
    Feb 2011
    Location
    Iran, Alborz, Karaj
    Posts
    123
    Vote Rating
    0
    parsbin is on a distinguished road

      0  

    Default


    ok thanks.
    --------
    mamnoon az kare ba arzesheteoon.
    komake bozorgi behem kard.
    interests: PHP-AJAX-Android
    Web Hosting Provider

  9. #9
    Sencha User
    Join Date
    May 2011
    Location
    IR Iran
    Posts
    2
    Vote Rating
    0
    gardeshgar is on a distinguished road

      0  

    Default Don't work with extjs 4.x

    Don't work with extjs 4.x


    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

  10. #10
    Sencha User Behrang's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    2
    Behrang is on a distinguished road

      0  

    Default Coming soon

    Coming soon


    Ok, It will be updated soon.

Similar Threads

  1. EXTJS calendar replaced by Jquery calendar
    By businessman332211 in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 11 Feb 2013, 12:37 AM
  2. Persian DatePicker (Jalali Date)
    By navaro_81 in forum Ext 3.x: User Extensions and Plugins
    Replies: 8
    Last Post: 7 Feb 2012, 9:16 PM
  3. (Persian or Jalali or Iranian) Date for Extjs
    By vahid4134 in forum Ext 3.x: User Extensions and Plugins
    Replies: 6
    Last Post: 7 Nov 2010, 3:57 AM
  4. Calendar Plugin
    By mclovin in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 10 Dec 2009, 2:17 PM

Thread Participants: 6

Tags for this Thread