Click here to Skip to main content
11,705,610 members (55,032 online)
Click here to Skip to main content

ASP.NET DatePicker (Persian/Gregorian)

, 28 Jul 2014 CPOL 34.9K 5.4K 10
Rate this:
Please Sign up or sign in to vote.
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.

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:

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

For showing the Gregorian Datepicker:

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

For getting selected date in postback event:

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

Example for OnUpdate:

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:

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:

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)

Share

About the Author

Ruhollah Heidarpour
Software Developer (Senior) Respina Network & Beyond IP Pool Tehran PoPSite
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionHold for select Years Pin
hassanlou5-Jun-15 18:48
memberhassanlou5-Jun-15 18:48 
Questionلینک دانلود Pin
Member 109949933-Jun-15 23:10
memberMember 109949933-Jun-15 23:10 
AnswerRe: لینک دانلود Pin
hassanlou5-Jun-15 18:50
memberhassanlou5-Jun-15 18:50 
Questionسوال Pin
‫محم د‬‎10-Aug-14 2:24
member‫محم د‬‎10-Aug-14 2:24 
AnswerRe: سوال Pin
Ruhollah Heidarpour10-Aug-14 23:42
memberRuhollah Heidarpour10-Aug-14 23:42 
GeneralRe: سوال Pin
‫محم د‬‎11-Aug-14 18:55
member‫محم د‬‎11-Aug-14 18:55 
GeneralRe: سوال Pin
‫محم د‬‎11-Aug-14 20:15
member‫محم د‬‎11-Aug-14 20:15 
Questionتشکر Pin
Hadi144222-Jul-14 22:32
memberHadi144222-Jul-14 22:32 
Questionپارتی بازی؟؟؟؟؟؟ Pin
noskhechi.ir30-Jun-14 0:41
membernoskhechi.ir30-Jun-14 0:41 
AnswerRe: پارتی بازی؟؟؟؟؟؟ Pin
Ruhollah Heidarpour30-Jun-14 1:06
memberRuhollah Heidarpour30-Jun-14 1:06 
Questionمشکل در استفاده از این کنترل Pin
Shaghayegh14418-Jun-14 0:17
memberShaghayegh14418-Jun-14 0:17 
AnswerRe: مشکل در استفاده از این کنترل Pin
Ruhollah Heidarpour18-Jun-14 0:27
memberRuhollah Heidarpour18-Jun-14 0:27 
GeneralRe: مشکل در استفاده از این کنترل Pin
noskhechi.ir30-Jun-14 0:39
membernoskhechi.ir30-Jun-14 0:39 
Questionسلام و بسیار ممنون Pin
A. Najafzadeh13-Jun-14 22:01
memberA. Najafzadeh13-Jun-14 22:01 
Questionمنتظر پاسخ شما هستم Pin
Member 1081158312-May-14 0:10
memberMember 1081158312-May-14 0:10 
Questionمشکل در popup Pin
noskhechi.ir5-May-14 3:02
membernoskhechi.ir5-May-14 3:02 
Questionرنگی کردن تعدادی روز Pin
Member 1074535112-Apr-14 23:19
memberMember 1074535112-Apr-14 23:19 
AnswerRe: رنگی کردن تعدادی روز Pin
Ruhollah Heidarpour13-Apr-14 0:11
memberRuhollah Heidarpour13-Apr-14 0:11 
GeneralRe: رنگی کردن تعدادی روز Pin
Member 1074535113-Apr-14 0:35
memberMember 1074535113-Apr-14 0:35 
AnswerRe: رنگی کردن تعدادی روز Pin
Ruhollah Heidarpour13-Apr-14 0:47
memberRuhollah Heidarpour13-Apr-14 0:47 
GeneralRe: رنگی کردن تعدادی روز Pin
Member 1074535113-Apr-14 19:52
memberMember 1074535113-Apr-14 19:52 
AnswerRe: رنگی کردن تعدادی روز Pin
Ruhollah Heidarpour13-Apr-14 20:14
memberRuhollah Heidarpour13-Apr-14 20:14 
QuestionValidator Pin
siminal10-Oct-13 4:58
membersiminal10-Oct-13 4:58 
BugMaster Page Pin
farid_t287-Jul-13 20:13
memberfarid_t287-Jul-13 20:13 
AnswerRe: Master Page Pin
Ruhollah Heidarpour7-Jul-13 20:36
memberRuhollah Heidarpour7-Jul-13 20:36 
Questionكند بودن در مرورگر chrome Pin
Member 872726716-Jun-13 21:44
memberMember 872726716-Jun-13 21:44 
AnswerRe: كند بودن در مرورگر chrome Pin
Ruhollah Heidarpour16-Jun-13 23:43
memberRuhollah Heidarpour16-Jun-13 23:43 
Questionتبدیل به میلادی و بالعکس Pin
Isan19846-May-13 10:55
memberIsan19846-May-13 10:55 
AnswerRe: تبدیل به میلادی و بالعکس Pin
Ruhollah Heidarpour6-May-13 18:04
memberRuhollah Heidarpour6-May-13 18:04 
GeneralRe: تبدیل به میلادی و بالعکس Pin
Isan19846-May-13 21:29
memberIsan19846-May-13 21:29 
GeneralRe: تبدیل به میلادی و بالعکس Pin
Ruhollah Heidarpour6-May-13 22:11
memberRuhollah Heidarpour6-May-13 22:11 
GeneralRe: تبدیل به میلادی و بالعکس Pin
Isan19846-May-13 23:18
memberIsan19846-May-13 23:18 
AnswerRe: تبدیل به میلادی و بالعکس Pin
Ruhollah Heidarpour7-May-13 0:16
memberRuhollah Heidarpour7-May-13 0:16 
Questionتشکر Pin
Senior Web Dveloper27-Apr-13 2:37
memberSenior Web Dveloper27-Apr-13 2:37 
AnswerRe: تشکر Pin
Ruhollah Heidarpour27-Apr-13 2:49
memberRuhollah Heidarpour27-Apr-13 2:49 
GeneralMy vote of 5 Pin
terma6612-Feb-13 0:20
memberterma6612-Feb-13 0:20 
Questionلطفا اگر ممکنه نحوه استفاده از این کد رو هم بزارید Pin
mohammadjoon211-Dec-12 4:30
membermohammadjoon211-Dec-12 4:30 
AnswerRe: لطفا اگر ممکنه نحوه استفاده از این کد رو هم بزارید Pin
Ruhollah Heidarpour14-Dec-12 7:07
memberRuhollah Heidarpour14-Dec-12 7:07 
Questionاستفاده در ام وی سی Pin
Mbahreini25-Nov-12 10:58
memberMbahreini25-Nov-12 10:58 
AnswerRe: استفاده در ام وی سی Pin
Ruhollah Heidarpour25-Nov-12 17:42
memberRuhollah Heidarpour25-Nov-12 17:42 
QuestionEnglish in comments Pin
Mika Wendelius12-Nov-12 20:13
mvpMika Wendelius12-Nov-12 20:13 
Questionسوال Pin
qweqweqwew12-Nov-12 2:57
memberqweqweqwew12-Nov-12 2:57 
AnswerRe: سوال Pin
Ruhollah Heidarpour12-Nov-12 18:51
memberRuhollah Heidarpour12-Nov-12 18:51 
GeneralMy vote of 5 Pin
ZRNCompany6-Nov-12 2:07
memberZRNCompany6-Nov-12 2:07 
Questionشناسایی با مرور گرها Pin
arh668-Oct-12 9:13
memberarh668-Oct-12 9:13 
AnswerRe: شناسایی با مرور گرها Pin
Ruhollah Heidarpour9-Oct-12 20:45
memberRuhollah Heidarpour9-Oct-12 20:45 
بله با تمام مرورگرها کار میکنه (با IE 9, Chrom 21, Firefox 15 تست کردم.)
البته در پروژه تست قبلی، استایل آن با استایل پروژه تست، تداخل ایجاد می کرد (در کروم، فایرفاکس) که مشکل در فایل جدید حل شد.

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
Web03 | 2.8.150819.1 | Last Updated 28 Jul 2014
Article Copyright 2012 by Ruhollah Heidarpour
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid