Monday, March 15, 2010

DatePicker Control SilverLight 3.0

During my work in silverlight project I have used datepicker control and found it different behavior and I would like to share with you ( many of you may know about it , but for those whose are beginner or didn't use the datePicker control yet.) . The problem is given blow.
When user enter some invalid text, or some other character using keyboard, then the text property doesn't show the user entered text which is invalid, But the arguments in the DateValidationError function does containt the invalid user input in the e.Text property, how do I get that invalid user input from the datepicker control text property ?
I have also post this problem ins stackoverflow and I have not get any answer till today date (15-Mar-2010). The reason to mention about stackoverflow here is to not link this post as answer to the that question if you find it on the stack over flow site.And I have not check the latest version of the silverlight which is release in beta mode(might be that behavior is fix by them).
The solution to to problem is very simple as I have created my own user control which will be used as datepicker control. which will consist of text box control and a datepicker control in silver light user control. Here is the main form of the example code which is consist of user control which I have created and the second one is the datepicker control of silver light. I have place both the control here so that you can see the behavior of both the control. The text property of the user control which I have created will also return invalid text which is entered by the user but in case of the silver light datepicker control it is empty string.

Here is the xaml for the custom datepicker which I have create. Here you can see that I have a textBox control and a DatePicker control. Both controls are positioned in such a way that they looks like the datepicker of the silverlight. I have set the width of the date picker control to 24 so that only the icon part of the date picker is shown and when user click on the calender button calender will be opened.

<TextBox x:Name="txtDateTimeValue" Grid.Column="0" MaxLength="10" BorderThickness="1" Height="23" Margin="0,0,26,0" LostFocus="txtDateTimeValue_LostFocus" GotFocus="txtDateTimeValue_GotFocus" />
<controls:DatePicker x:Name="dtpDatePicker" Grid.Column="1" Margin="4,4,2,4" Width="24" HorizontalAlignment="Right" SelectedDateChanged="dtpDatePicker_SelectedDateChanged" FirstDayOfWeek="Monday" BorderThickness="0" />
Two TextBox control are registered one for GotFocus and second one is the LostFocus these two events are used to display water mark in the text Box control same like the datePicker control has the water mark. Moreover I have also set the MaxLenght of the TextBox control to 10 so that user can 't enter more the 10 character in the textBox control when entering the date manually. As date consist of 2 digit for day , 2 digit for month and 4 digit for year and two (/) signs.And One SelectedDateChanged event for the datePicker control which is used to assign the selected date to the textBox control.
The important properties of the custom datepicker are as follow.
1- Text
The text property is used to get/ set the value of the text box which is either entered by user or by using the calender control.

2- IsTextReadOnly
IsTextReadOnly is the property which is used to make the text box readonly so that user can 't enter date by using keyboard, user can only entered date from the date picker control. I think sometimes we don't want user to enter date from the keyboard as we (developer) then has to check for the validity of the user input, that is why I have created this property.

3- IsValidDate
IsValidDate is the property which will validate user input when called. It will return boolean value true mean valid date and false mean invalid date. The border of the text box is also set to red to indicate invalid date.

Above are the some of the important properties, below is the private funtion which is used to convert the user input to the proper date format. Here you can see that I have placed the if condition to check the user input which should be greater then or equal to 8. Then in the next statement I have used the TryParse of integer type to convert the user input, If user entered only digits in the text box control the TryParse will be executed successfully and will return true value and the converted value is stored in the out paramenter which is intDateValue. Next I have place if conditio to check the intDateValue for its default value as if the TryParse fail then the out parameter will hold the previouse value.
private void ConvertToDate()
if (txtDateTimeValue.Text.Length >= 8)
Int32 intDateValue = 0;
int.TryParse(txtDateTimeValue.Text, out intDateValue);
if (intDateValue != 0)
DateTime dateTime = new DateTime();
string format = "ddMMyyyy";
CultureInfo provider = CultureInfo.InvariantCulture ;

dateTime = DateTime.ParseExact(txtDateTimeValue.Text, format, provider);
txtDateTimeValue.Text = dateTime.ToString(CustomFormat);

In the if condition I have declared and initialize the dateTime object and then a string variable to hold the format of the date and then I have declared teh CultureInfo object and initialized it in the next statement I have used the ParseExact of DateTime class which will converts the specified string representation of a date and time to its DateTime equivalent using the specified format and culture-specific format information. The format of the string representation must match the specified format exactly.The in the next statement I have used the ToString of the dateTime object and pass the format of the date time and assign it to the textBox control. Now if user enter 12122010 it will be converted to 12/12/2010.
Now if you entered invalid dates in both control then you can see that first one return value but the other one will return empty string. But as I have mentioned in my question that if you check the DateValidationError event handler of the datepicker control you can see the value in the parameter e, but not in the text property of the datepicker control.You can download the source code from here
All and any comments / bugs / suggestions are welcomed!


Anonymous said...


gud work

Mrinmoy Ganguly said...

I've opened this application in MS Blend 3. How do I run this in order to see the output? I've just started learning SilverLight with your examples!

Asim Sajjad said...

@Mrinmoy: In the Project Menu there is option of run Project or you can Press F5 to runt the application.

Mrinmoy Ganguly said...

It doesn't work. It opens up in IE with the URL: http://localhost:1859/Default.aspx and "The page cannot be displayed". Any guidance on how to get out of this?

Asim Sajjad said...

@Mrinmoy: Just open the SilverLight Date ControlTestPage.html file which is placed in the SilverLight Date Control.Web folder. it will show you the output

Asim Sajjad said...

@Mirnmoy: Just Right click on the Web project and set it as Startup project and then click on the SilverLight Date ControlTestPage.html page and set it Startup it will work.

Mrinmoy Ganguly said...

The URL this time changed to http://localhost:1859/SilverLight%20Date%20ControlTestPage.html but the same "The page cannot be displayed". Not sure whats gone wrong here. I set the Web project and the html page as Startups.

Mrinmoy Ganguly said...

It worked this time. I set the SilverLight Date ControlTestPage.aspx as the startup it displayed the aspx page on the browser. Thanks!

Asim Sajjad said...

@Mrinmoy: no problem happy to see that its work

Chamba Dharamjit said...

@Asim Sajjad : Hi Asim, thanks for the great works. I have a question as in normal DatePicker i can Bind the SelectedDate property. Which property i need to Bind in your control to to show date ???

Reid Paul said...

Thanks great blog