Click here to Skip to main content
Click here to Skip to main content

Dojo Jalali (Persian) Calendar and DatePicker

, 18 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Jalali (Persian) calendar for Dojo.

Introduction 

The Iranian Calendar, also known as Persian Calendar or Jalali Calendar, is now the official calendar in Iran.  

Persians have been keen on the idea and importance of having a calendar system throughout their recorded history. They were among the first cultures to employ a solar calendar, and have long favored a solar approach rather than lunar or lunisolar models. In general, the sun has always had an important symbolic significance in the Iranian culture.

A Persian year is 365 days long through four seasons. The new year is the first day of the month of Farvardin (March 21 in Gregorian calendar), which is the first day of spring. The first six months in Persian calendar have 31 days. The next five months have 30 days, and the last month has 29 days, except in a leap year in which it becomes 30. 

Background 

I was working with Dojo in my project. I realized that dojox/date is not implemented for Persian calendar. There were other non-Gregorian calendars that supported dojo like Islamic (Hijri) calendar and Hebrew calendar, but not Persian calendar. So I decided to implement it by myself.

Using the code   

This example shows how to use the Dojo Jalali calendar or date picker.

First of all, you should add the required Dojo references.

dojo.require("dijit.dijit");
dojo.require("dojox.date.jalali");
dojo.require("dojox.date.jalali.Date");
dojo.require("dojox.date.jalali.locale");
dojo.require("dojo.parser");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.Calendar"); 

Then add this code where you want your date picker to appear: 

<input type="text" data-dojo-type="dijit.form.DateTextBox" 
    id="tbTest" datepackage="dojox.date.jalali"
    value="2012-03-24" constraints="{datePattern:'dd MMMM yyyy'}">

Also, to use the calendar widget, add the following tags: 

<div data-dojo-type="dijit.Calendar" 
  data-dojo-props="onChange:function(){dojo.byId('formatted').innerHTML=
    dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})}"></div>
<p id="formatted" datepackage="dojox.date.jalali"></p>

Implementation

I am using the Dojo Islamic calendar. But I needed to change some methods and variables.  

  • The number of days in month
  • First day of week
  • The leap year
  • Abbreviations for day and month names
  • Date formats, alternative ways to display a given date

And also added some methods:

  • ToGregorian(hshYear, hshMonth, hshDay) that gives the Jalali (Hijri Shamsi) date and returns Gregorian.
  • ToShamsi(grgYear, grgMonth, grgDay) that converts Gregorian date to Jalali date.

First of all, I needed to add dojo/cldr/nls/en/jalali.js and dojo/cldr/jalali.js and translate month names and day of week names to Persian.  

In dojo/dojox, I added a folder and named it jalali (copy of islamic) and changed some functions:

  • fromGregorian: I changed it with my function for calculating Jalali date from Gregorian date.
  • toGregorian: I also changed this method with my function too.
  • setDate: This function checks if the day is between 0 and day of month according to the current year, otherwise decreases or increases the month. There was a function GetDayInIslamicMonth. I changed it to my function and return the number of days in the month. If month is between 1 and 6, it returns 31 days, if between 7 and 12, it returns 30 days, and if month is 12, returns 30 or 29 days - this depends on if it is a leap year.

Points of Interest  

Dojo is very easy to work with. It is a simple and very easy to use library.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Azadeh Kianpour
Software Developer (Senior)
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided
Follow on   Google+

Comments and Discussions

 
Questionسوال Pinmember‫محم د‬‎10-Aug-14 2:35 
Questionwpf PinmemberMember 1072675329-Apr-14 3:11 
Answerbest calender PingroupPourdadDaneshmand26-Dec-13 0:41 
Questiondojo mobile Pinmemberh_ghare2-Jul-12 1:47 
SuggestionNice work PinmemberNikfazan25-Apr-12 22:52 
QuestionGreat job Pinmemberarmindoroudian19-Apr-12 2:00 
QuestionAlireza Pinmemberpatientcbbc17-Apr-12 18:37 
QuestionFormat Issue PinmemberVivek Krishnamurthy16-Apr-12 5:17 
AnswerRe: Format Issue PinmemberAzikian16-Apr-12 5:58 
AnswerRe: Format Issue PinmemberAzikian16-Apr-12 5:58 
QuestionCleanup your files PinmvpMehdi Gholam16-Apr-12 4:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141030.1 | Last Updated 18 Dec 2013
Article Copyright 2013 by Azadeh Kianpour
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid