Click here to Skip to main content
11,583,532 members (68,896 online)
Click here to Skip to main content

ASP.NET DatePicker User Control (Hijri / Gregorian) shows month and year as dropdowns

, 6 May 2013 CPOL 46K 5.5K 27
Rate this:
Please Sign up or sign in to vote.
ASP.NET Date Selector User Control based on calendar control.

You can try live demo here.

Introduction

I am developing an application that uses the date picker for date fields like date of birth and expiry date. Some fields should be entered in Hijri or Gregorian because here in Saudi Arabia the official calendar is the Hijri Calendar and many people know their dates in Hijri only. So I need a date picker control to allow the user to choose the calendar (Hijri or Gregorian) and finally fill both dates in textboxes.

I was looking for an AJAX or jQuery date picker that supports Hijri and Gregorian. Also show month and year as drop downs instead of the static month/year header to facilitate navigation through a large time frame. Unfortunately I did not find any control supporting Hijri, the AJAX one here has a bug in Hijri year navigation.

Introduction to the Islamic (Hijri) Calendar

The Islamic calendar, Muslim calendar, or Hijri calendar (AH) is a lunar calendar consisting of 12 months in a year of 354 or 355 days. Being a purely lunar calendar, it is not synchronized with the seasons. With an annual drift of 10 or 11 days, the seasonal relation repeats about every 33 Islamic years (every 32 solar years).

It is used to date events in many Muslim countries (concurrently with the Gregorian calendar), and is used by Muslims everywhere to determine the proper days on which to observe the annual fast (Ramadan), to attend Hajj, and to celebrate other Islamic holidays and festivals.

The first year was the Islamic year beginning in AD 622 during which the emigration of prophet Muhammad, peace be upon him, from Mecca to Medina, known as the Hijra, occurred. Each numbered year is designated either H for Hijra or AH for the Latin anno Hegirae (in the year of the Hijra) [3] hence Muslims typically call their calendar the Hijri calendar.

The current Islamic year is 1434 AH. In the Gregorian calendar 1434 AH runs from approximately 14 November 2012 to 4 November 2013.

Using the Code 

Simply drag and drop the user control into your ASPX page, add ScriptManger to your ASPX page, and calendar image to your solution. More information about including the user control in an ASP.NET web Page.

User Control Properties

The control exposes six properties: DefaultCalendarCulture, SelectedCalendareDate, getHijriDateText, getGregorianDateText, MinYearCountFromNow and MaxYearCountFromNow that can be used in the hosting page.

Expose default calendar culture and show the little Intellisense box pop up options (Higri, Gregorian).

Intellisense

//To set the default Calendar to Hijri 
<uc1:HijriGregDatePicker ID="HijriGregDatePicker1" 
  runat="server"  DefaultCalendarCulture="Arabic" >

//To set the default Calendar to Gregorian from Source
<uc1:HijriGregDatePicker ID="HijriGregDatePicker2" 
  runat="server"  DefaultCalendarCulture="English" >

//To set the default Calendar to Hijri from Code
HijriGregDatePicker1.DefaultCalendarCulture =DatePicker.DefaultCultureOption.Arabic;

//To set the default Calendar to Gregorian from Code
HijriGregDatePicker1.DefaultCalendarCulture =DatePicker.DefaultCultureOption.English;

//Note that if you have multiple instances from the userconrtrol
//you have to give all of instances the same default culture
//otherwise you will got inconvenient behaviour

You can get the Hijri selected date:

HijriGregDatePicker1.SelectedCalendareDate.ToString(strDateFormat, 
   new CultureInfo("ar-SA").DateTimeFormat); 

You can get the Gregorian selected date:

HijriGregDatePicker1.SelectedCalendareDate.ToString(strDateFormat, 
   new CultureInfo("en-US").DateTimeFormat);

You can set the date from the database:

if (!IsPostBack)
{
    DataView dvDataView = (DataView)SqlDataSource1.Select(DataSourceSelectArguments.Empty);
    HijriGregDatePicker1.SelectedCalendareDate = (DateTime)dvDataView[0][0];   
}

To get the Hijri date from the Hijri text box:

string strHijri = HijriGregDatePicker1.getHijriDateText; 

To get the Gregorian date from the Gregorian text box:

string strGreg = HijriGregDatePicker1.getGregorianDateText;

To set the minimum year allowed to be selected in the year dropdwon list:

//To set the minimum year to 2003
HijriGregDatePicker1.MinYearCountFromNow = -10;

To set the maximum year allowed to be selected on year dropdwon list:

//to set the maximum year to 2023
HijriGregDatePicker1.MaxYearCountFromNow = 10;
  1. DefaultCalendarCulture

  2. SelectedCalendareDate

  3. getHijriDateText

  4. getGregorianDateText

  5. MinYearCountFromNow

  6. MaxYearCountFromNow

The Solution

I depended on the ASPX calendar control to develop this solution and the main problem was that the calendar control loaded according to the page culture and there was no way to change the calendar culture without changing the page culture.

I created a usercontrol for this matter to behave like a date picker, toggling between cultures using a dropdown list that changed the page culture. Also I put this user control inside an UpdatePanel to partially update the calendar without affecting the current page.

In other words I can say since we cannot set two different cultures in a single page, this solution is a workaround to allow the user to use multiple calendars in the same page.

Multiple Instances from the User Control in the Same Page

It was a big challenge for me to allow multiple instances. Because I have to manage the post back and culture changing for all instances. For example if the post back is triggered from the culture dropdown list, year dropdown list, or month dropdown list, the calendar div will stay visible but if triggered by other controls the calendar div status will be changed to hidden.

//To get the potpack control name
private string getPostBackControlName()
{
    Control control = null;
    //first we will check the "__EVENTTARGET" because if post back made by the controls
    //which used "_doPostBack" function also available in Request.Form collection.
    string ctrlname = Page.Request.Params["__EVENTTARGET"];
    if (ctrlname != null && ctrlname != String.Empty)
    {
        control = Page.FindControl(ctrlname);
    }

    if (control == null)
    {
        return string.Empty;
    }
    else
    {
        //to catch the control name in case of multiple instances
        return control.UniqueID;
    }
}

User Control JavaScript

The JavaScript for this user control is very simple as below:

//To Show hide the div when user click on calendar image or any date text boxes
<script type="text/javascript">
    function showHide(div) {
        if (document.getElementById(div).style.display == "none") {
            document.getElementById(div).style.display = "block";
        }
        else { document.getElementById(div).style.display = "none"; }
    }
</script>
//to hide the date picker when user click outside the date picker box
<script type="text/javascript">
document.onclick = function (e) {
    e = e || event
    var target = e.target || e.srcElement
    var box = document.getElementById('<% =this.whole_calendar.ClientID %>')
    var imgCal = document.getElementById('<% =this.imgCalendar.ClientID %>')
    var txtHijri = document.getElementById('<% =this.txtHijri.ClientID %>')
    var txtGreg = document.getElementById('<% =this.txtGreg.ClientID %>')
    do {
        if (box == target | imgCal == target | txtHijri == target | txtGreg == target) {
            // Click occured inside the box, do nothing.
            return
        }
        target = target.parentNode
    }
    while (target)
    // Click was outside the box, hide it.
    box.style.display = "none"
}
</script>
  1. Show/hide the calendar date picker
  2. Hiding the date picker when the user clickd on any place outside date picker box

Points of Interest

Note that when you change the date picker culture (Hijri to Gregorian or vice versa), you change the page culture also. Therefore if you are using resource files (localization) I suggest you save the page culture in the hidden field when the page loads and retrieve it back when submitting, as below:

protected void Page_Load(object sender, EventArgs e)
{
    hidCulture.Value = CultureInfo.CurrentCulture.ToString();
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
    System.Globalization.CultureInfo culture = 
            System.Globalization.CultureInfo.CreateSpecificCulture(hidCulture.Value);
    System.Threading.Thread.CurrentThread.CurrentCulture = culture;
    System.Threading.Thread.CurrentThread.CurrentUICulture = culture;
}

Limitation

Note that you if you want to use the calendar for single culture only, then you can disable the dropdown list for changing culture. But if you have many cultures in your application, you cannot enforce the user to choose a date in a specific culture only, because the other user control instances will be affected and any change in page culture will affect the calendar.

Browser Compatibility

This control has been tested on the latest version of Firefox, Internet Explorer, Chrome and Safari

Finally

I tried my best to make this user control free of bugs. Any comments, ideas, and suggestions are most welcome for further improvement in this user control.

References

History

  • Version 1.0: 31/03/2013.

License

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

Share

About the Author

Yahya Mohammed Ammouri
Technical Lead Netways Arabia
Saudi Arabia Saudi Arabia
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionGood Article Pin
starmh8213-Jun-15 8:46
memberstarmh8213-Jun-15 8:46 
QuestionThank you , And I wonder Pin
mys-201019-Apr-15 20:45
membermys-201019-Apr-15 20:45 
AnswerRe: Thank you , And I wonder Pin
Yahya Mohammed Ammouri19-Apr-15 21:01
memberYahya Mohammed Ammouri19-Apr-15 21:01 
Questionsome issues Pin
Member 1134345512-Jan-15 4:12
memberMember 1134345512-Jan-15 4:12 
AnswerRe: some issues Pin
Yahya Mohammed Ammouri19-Apr-15 21:00
memberYahya Mohammed Ammouri19-Apr-15 21:00 
AnswerRe: some issues Pin
mys-201019-Apr-15 22:22
membermys-201019-Apr-15 22:22 
GeneralRe: some issues Pin
Yahya Mohammed Ammouri22-Apr-15 5:52
memberYahya Mohammed Ammouri22-Apr-15 5:52 
QuestionHow do i reset this control? Pin
Sangram Nandkhile17-Jul-14 8:37
memberSangram Nandkhile17-Jul-14 8:37 
AnswerRe: How do i reset this control? Pin
Sangram Nandkhile10-Aug-14 21:46
memberSangram Nandkhile10-Aug-14 21:46 
GeneralRe: How do i reset this control? Pin
Yahya Mohammed Ammouri10-Aug-14 21:52
memberYahya Mohammed Ammouri10-Aug-14 21:52 
GeneralRe: How do i reset this control? Pin
uzwa27-Oct-14 4:35
memberuzwa27-Oct-14 4:35 
GeneralRe: How do i reset this control? Pin
Yahya Mohammed Ammouri23-Dec-14 17:59
memberYahya Mohammed Ammouri23-Dec-14 17:59 
QuestionCAN YOU POST THE PROJECT TO GENERATE THE DLL CALENDARY? Pin
mandala863-Jun-14 2:58
membermandala863-Jun-14 2:58 
AnswerRe: CAN YOU POST THE PROJECT TO GENERATE THE DLL CALENDARY? Pin
Yahya Mohammed Ammouri3-Jun-14 4:49
memberYahya Mohammed Ammouri3-Jun-14 4:49 
GeneralRe: CAN YOU POST THE PROJECT TO GENERATE THE DLL CALENDARY? Pin
patrick colm21-Sep-14 22:20
memberpatrick colm21-Sep-14 22:20 
GeneralRe: CAN YOU POST THE PROJECT TO GENERATE THE DLL CALENDARY? Pin
Yahya Mohammed Ammouri23-Dec-14 18:02
memberYahya Mohammed Ammouri23-Dec-14 18:02 
QuestionSaving In Hijri Pin
Mansoor_Ahmed10-Feb-14 20:08
professionalMansoor_Ahmed10-Feb-14 20:08 
AnswerRe: Saving In Hijri Pin
Yahya Mohammed Ammouri11-Feb-14 7:46
memberYahya Mohammed Ammouri11-Feb-14 7:46 
QuestionAdding Hijri/Gregorian date on MyForm's text box on selecting the day from calender Pin
Abdul Aziz Majid29-Jan-14 20:27
memberAbdul Aziz Majid29-Jan-14 20:27 
AnswerRe: Adding Hijri/Gregorian date on MyForm's text box on selecting the day from calender Pin
Yahya Mohammed Ammouri29-Jan-14 21:13
memberYahya Mohammed Ammouri29-Jan-14 21:13 
GeneralRe: Adding Hijri/Gregorian date on MyForm's text box on selecting the day from calender Pin
Abdul Aziz Majid29-Jan-14 21:53
memberAbdul Aziz Majid29-Jan-14 21:53 
QuestionRequire Help Pin
Member 846316827-Jan-14 0:18
memberMember 846316827-Jan-14 0:18 
AnswerRe: Require Help Pin
Yahya Mohammed Ammouri27-Jan-14 3:25
memberYahya Mohammed Ammouri27-Jan-14 3:25 
AnswerRe: Require Help Pin
Mansoor_Ahmed27-Jan-14 18:59
professionalMansoor_Ahmed27-Jan-14 18:59 
QuestionI NEED CODE IN VB.NET Pin
Member 270341515-Jan-14 20:15
memberMember 270341515-Jan-14 20:15 
AnswerRe: I NEED CODE IN VB.NET Pin
Yahya Mohammed Ammouri15-Jan-14 21:40
memberYahya Mohammed Ammouri15-Jan-14 21:40 
GeneralThank you Pin
Member 83615454-Dec-13 20:59
memberMember 83615454-Dec-13 20:59 
QuestionException (StartIndex cannot be less than zero.) Pin
elbanna22-Jun-13 20:22
memberelbanna22-Jun-13 20:22 
BugProblem when selecting year Pin
Jamsheed Rahman15-May-13 19:51
memberJamsheed Rahman15-May-13 19:51 
GeneralRe: Problem when selecting year Pin
Yahya Mohammed Ammouri2-Apr-14 3:19
memberYahya Mohammed Ammouri2-Apr-14 3:19 
GeneralMy vote of 5 Pin
ahmed rageeb14-May-13 9:00
memberahmed rageeb14-May-13 9:00 
GeneralMy vote of 5 Pin
Mihai MOGA10-May-13 18:28
memberMihai MOGA10-May-13 18:28 
GeneralRe: My vote of 5 Pin
Yahya Mohammed Ammouri11-May-13 22:15
memberYahya Mohammed Ammouri11-May-13 22:15 
QuestionGreat !! Pin
MohamedKamalPharm6-May-13 16:54
professionalMohamedKamalPharm6-May-13 16:54 
Questionanother question Pin
M.Saied27-Apr-13 22:06
memberM.Saied27-Apr-13 22:06 
AnswerRe: another question Pin
Yahya Mohammed Ammouri27-Apr-13 22:19
memberYahya Mohammed Ammouri27-Apr-13 22:19 
GeneralRe: another question Pin
M.Saied27-Apr-13 22:49
memberM.Saied27-Apr-13 22:49 
GeneralRe: another question Pin
Yahya Mohammed Ammouri27-Apr-13 23:30
memberYahya Mohammed Ammouri27-Apr-13 23:30 
Questionnicely done Pin
M.Saied23-Apr-13 21:56
memberM.Saied23-Apr-13 21:56 
AnswerRe: nicely done Pin
Yahya Mohammed Ammouri24-Apr-13 0:26
memberYahya Mohammed Ammouri24-Apr-13 0:26 
GeneralRe: nicely done Pin
M.Saied24-Apr-13 0:59
memberM.Saied24-Apr-13 0:59 
GeneralRe: nicely done Pin
Yahya Mohammed Ammouri24-Apr-13 1:45
memberYahya Mohammed Ammouri24-Apr-13 1:45 
GeneralRe: nicely done Pin
M.Saied24-Apr-13 3:01
memberM.Saied24-Apr-13 3:01 
GeneralRe: nicely done Pin
Yahya Mohammed Ammouri24-Apr-13 3:37
memberYahya Mohammed Ammouri24-Apr-13 3:37 
GeneralRe: nicely done Pin
M.Saied24-Apr-13 4:56
memberM.Saied24-Apr-13 4:56 
QuestionNeed Help. I'm new to this Pin
Member 795714210-Apr-13 12:10
memberMember 795714210-Apr-13 12:10 
AnswerRe: Need Help. I'm new to this Pin
Yahya Mohammed Ammouri13-Apr-13 21:25
memberYahya Mohammed Ammouri13-Apr-13 21:25 
GeneralRe: Need Help. I'm new to this Pin
Member 795714216-Apr-13 6:28
memberMember 795714216-Apr-13 6:28 
GeneralRe: Need Help. I'm new to this Pin
Yahya Mohammed Ammouri16-Apr-13 19:32
memberYahya Mohammed Ammouri16-Apr-13 19:32 
GeneralMy vote of 5 Pin
the algabban9-Apr-13 19:30
memberthe algabban9-Apr-13 19:30 

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.150603.1 | Last Updated 6 May 2013
Article Copyright 2013 by Yahya Mohammed Ammouri
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid