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) {
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();
}
};
Example for OnClose
:
function onClose(calendar) {
logEvent("onClose Event");
calendar.hide();
};