Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Tip/Trick

ASP.NET DatePicker (Persian/Gregorian)

Rate me:
Please Sign up or sign in to vote.
4.73/5 (19 votes)
28 Jul 2014CPOL2 min read 163.5K   8.5K   11   57
Just another ASP.NET Persian(Jalali/Shamsi/Solar) / Gregorian Datepicker

Introduction

This is just another DatePicker for ASP.NET that supports both Persian (Jalali/Shamsi/Solar) and Gregorian Calendar.

Image 1 Image 2
Image 3

Its JavaScript source code is taken from here.  

This version is not completed yet and I'm going to add more features to it in the near future! 

Properties

Version 1.1.1  (2012-11-13)  
  • Now it supports empty value.
Version 1.1  (2012-10-15)  
  • ReadOnly:  Indicates whether user can change the text or not.  
  • ShowWeekNumber: If "true", then the calendar will display week numbers. 
  • ShowOthers:  If set to "true", then days belonging to months overlapping with the currently displayed month will also be displayed in the calendar (but in a "faded-out" color). 
  • FirstDayOfWeek: Specifies which day is to be displayed as the first day of week. The end user can easily change this too, by clicking on the day name in the calendar header. 
  • OnSelect: function that gets called when a date is selected. You don't have to supply this (the default is generally okay). 
  • OnUpdate: If you supply a function handler here, it will be called right after the target field is updated with a new date. You can use this to chain 2 calendars, for instance to setup a default date in the second just after a date was selected in the first.  
  • OnClose: This handler will be called when the calendar needs to close. You don't need to provide one, but if you do, it's your responsibility to hide/destroy the calendar. You're on your own. 
Version 1.0  (2012-10-07) 
  • Text: Text that is shown in the textbox
  • Date: Selected Gregorian date
  • DatePersian: Selected Persian date
  • CalendarType: Indicates which calendar type (Persian/Gregorian) will be shown

Sample code

For showing the Persian Datepicker:

XML
<rhp:DatePicker ID="DatePicker1" runat="server" 
DatePersian="1391/07/14" CalendarType="Persian"></rhp:DatePicker>  

For showing the Gregorian Datepicker:

XML
<rhp:DatePicker ID="DatePicker2" runat="server" 
Date="2012-10-06" CalendarType="Gregorian"></rhp:DatePicker>  

For getting selected date in postback event:

C#
Label1.Text = "Text: " + DatePicker1.Text;
Label2.Text = "Date: " + DatePicker1.Date.ToString();
Label3.Text = "DatePersian: " + DatePicker1.DatePersian; 

Example for OnUpdate:

JavaScript
function onUpdate(calendar){
            var msg =
                    "<br/>Persian: Year: " + calendar.date.getJalaliFullYear() +
                    ", Month: " + (calendar.date.getJalaliMonth() + 1) +
                    ", Day: " + calendar.date.getJalaliDate() +
                    "<br/>Gregorian: Year: " + calendar.date.getFullYear() +
                    ", Month: " + calendar.date.getMonth() +
                    ", Day: " + calendar.date.getDate();

            logEvent("onUpdate Event: <br> Selected Date: " + 
            calendar.date.print('%Y/%m/%d', 'jalali') + msg);
        }; 

Example for OnSelect:

JavaScript
function onSelect(calendar, date) {
            // Beware that this function is called even if the end-user only
            // changed the month/year. In order to determine if a date was
            // clicked you can use the dateClicked property of the calendar:
            if (calendar.dateClicked) {
                var msg =
                        "<br/>Persian: Year: " + calendar.date.getJalaliFullYear() +
                        ", Month: " + (calendar.date.getJalaliMonth() + 1) +
                        ", Day: " + calendar.date.getJalaliDate() +
                        "<br/>Gregorian: Year: " + calendar.date.getFullYear() +
                        ", Month: " + calendar.date.getMonth() +
                        ", Day: " + calendar.date.getDate();

                $("#<%= DatePicker1.ClientID %>").val(date);
                logEvent("onSelect Event: <br> Selected Date: " + date + msg);
                calendar.hide();
                //calendar.callCloseHandler(); // this calls "onClose"
            }
        }; 

Example for OnClose:

JavaScript
function onClose(calendar) {
            logEvent("onClose Event");
            calendar.hide();
        }; 

License

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


Written By
Software Developer (Senior) Respina Network & Beyond IP Pool Tehran PoPSite
Iran (Islamic Republic of) Iran (Islamic Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
ahmad jafari 202319-Dec-23 2:18
ahmad jafari 202319-Dec-23 2:18 
Questionاضافه کردن ساعت Pin
hadi_zarrat10-Oct-22 4:00
hadi_zarrat10-Oct-22 4:00 
Questionنمایش همراه با زمان Pin
Member 99837589-Feb-19 5:40
Member 99837589-Feb-19 5:40 
Questionتشکر Pin
mohara21-Oct-18 2:57
mohara21-Oct-18 2:57 
Questionset kardan tarikhe emrooz Pin
Iman Seraji12-May-18 2:30
Iman Seraji12-May-18 2:30 
AnswerRe: set kardan tarikhe emrooz Pin
Member 1386638025-Jun-18 3:58
Member 1386638025-Jun-18 3:58 
Questionmvc Pin
Member 127310388-Mar-17 18:50
Member 127310388-Mar-17 18:50 
AnswerRe: mvc Pin
Ruhollah Heidarpour4-Apr-17 19:44
professionalRuhollah Heidarpour4-Apr-17 19:44 
QuestionBinding to Ko Pin
S.Mahdi Hossaini17-Sep-15 0:59
S.Mahdi Hossaini17-Sep-15 0:59 
AnswerRe: Binding to Ko Pin
Ruhollah Heidarpour19-Sep-15 19:02
professionalRuhollah Heidarpour19-Sep-15 19:02 
QuestionHold for select Years Pin
seesharpmind5-Jun-15 18:48
seesharpmind5-Jun-15 18:48 
Questionلینک دانلود Pin
Bouzarjmehr3-Jun-15 23:10
Bouzarjmehr3-Jun-15 23:10 
AnswerRe: لینک دانلود Pin
seesharpmind5-Jun-15 18:50
seesharpmind5-Jun-15 18:50 
Questionسوال Pin
‫محم د‬‎10-Aug-14 2:24
‫محم د‬‎10-Aug-14 2:24 
AnswerRe: سوال Pin
Ruhollah Heidarpour10-Aug-14 23:42
professionalRuhollah Heidarpour10-Aug-14 23:42 
GeneralRe: سوال Pin
‫محم د‬‎11-Aug-14 18:55
‫محم د‬‎11-Aug-14 18:55 
GeneralRe: سوال Pin
‫محم د‬‎11-Aug-14 20:15
‫محم د‬‎11-Aug-14 20:15 
Questionتشکر Pin
Hadi144222-Jul-14 22:32
Hadi144222-Jul-14 22:32 
Questionپارتی بازی؟؟؟؟؟؟ Pin
noskhechi.ir30-Jun-14 0:41
noskhechi.ir30-Jun-14 0:41 
AnswerRe: پارتی بازی؟؟؟؟؟؟ Pin
Ruhollah Heidarpour30-Jun-14 1:06
professionalRuhollah Heidarpour30-Jun-14 1:06 
Questionمشکل در استفاده از این کنترل Pin
Shaghayegh14418-Jun-14 0:17
Shaghayegh14418-Jun-14 0:17 
AnswerRe: مشکل در استفاده از این کنترل Pin
Ruhollah Heidarpour18-Jun-14 0:27
professionalRuhollah Heidarpour18-Jun-14 0:27 
GeneralRe: مشکل در استفاده از این کنترل Pin
noskhechi.ir30-Jun-14 0:39
noskhechi.ir30-Jun-14 0:39 
Questionسلام و بسیار ممنون Pin
A. Najafzadeh13-Jun-14 22:01
A. Najafzadeh13-Jun-14 22:01 
Questionمنتظر پاسخ شما هستم Pin
Member 1081158312-May-14 0:10
Member 1081158312-May-14 0:10 

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

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