Validation

Now, since the user can write free text in the txtBirthDate input we need to validate if the date he intered is in the correct format.
To do so i will use the RegulaExpressionValidator.
lets write some regular expression to validate that date is in the dd.MM.yyy format...
^(((0[1-9]|[12]\d|3[01])\.(0[13578]|1[02])\.((1[6-9]|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\.(0[13456789]|1[012])\.((1[6-9]|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\.02\.((1[6-9]|[2-9]\d)\d{2}))|(29\.02\.((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$


Oops! A little problem here: the validator functions are triggered by "onChange" event causing a bug

Frotunately there is a solution- The plugin have its own validator:

We have only to add two more js files:

<script src="/moia/jquery.datepick.package-3.5.2/jquery.validate.js" type="text/javascript"></script>

<script src="/moia/jquery.datepick.package-3.5.2/jquery.datepick-validation.js" type="text/javascript"></script>

{The order is important!}

and add to our code:

   23   $('#form1').validate({

   24   errorPlacement: $.datepick.errorPlacement,

   25   rules: {

   26       txtBirthDate: { dpMaxDate: [] }

   27   },

   28   messages: {

   29     txtBirthDate: '<span style="color:red">the date is incorrect or in future</span>'

   30   }

   31

   32   });


Now we almost got the thing working , only one imporatne thing left:
there must be the "name" attribute inside txtBirthDate control. (The name is not compatible tag for asp control so you will get warning)

<asp:TextBox ID="txtBirthDate" runat="server" Height="24px"  name="txtBirthDate">

Now the datepicker and validator should work.

Good

The ASP.NET project

Now we arte at the step of ASP.NET. Open the Visual Studio, New , WebSite.
Usualy there is already Default.aspx webpage in the site root folder.
I have added the txtVisa and  txtBirthDate textboxes to the page

Now lets drag the jquery.datepick.package-3.5.2 -  the folder containing the JqueryDatePicker Plugin, to the root  directory.

Now lets write the code that applying the datepicker on the txtBirthDate textbox:

 <script src="jquery.datepick.package-3.5.2/jquery.datepick-ru.js" type="text/javascript"></script>

 <script src="jquery.datepick.package-3.5.2/jquery.validate.js" type="text/javascript"></script>

 <script src="jquery.datepick.package-3.5.2/jquery.datepick-validation.pack.js" type="text/javascript"></script>

 <script type="text/javascript">

<script type="text/javascript">

$(function() {

    $('#txtBirthDate').datepick();

});

</script>

Adding smoothness.datepick.css to App_Themes>Theme1 folder, for styling the plugin and
adding the jquery.datepick-ru.js for russian localization, and here we are:

How to set range ?

Well now the control came alive and this is the time to do some modifications:
Firstly  we dont want the user to choose the date late than today aren't  we?
So this code will make it up for us:

$(function() {$('#txtBirthDate').datepick({maxDate: 0},yearRange:('-30:+0'));

});

The code yearRange:('-30:+0') is for make the dropdown years to be 30 years earlier than today

What is jquery?

Jquery its great invention in the world of javascript. Its an opensource js library that make you able to easily access all the dom elements and make many intreresting effects and manipulatiuons on HTML tags.  You can read about it in their site.
We need now to go to "Plugins" section and download the DatePicker plugin we want to implement. You can download it also from here:
http://plugins.jquery.com/project/datepick
There is sample datepickBasics.html  page in the package, but you have first to download the jquery library itsef to see the plugin in action. (You can download the newest version from the main page :http://jquery.com/)

Now you get it huh?
Note that all the plugin is pure javascript, no dlls, no server language...Isn't it grate thing?

Jquery Datepicker in ASP.net control

In this small project i want to do one simple thing:

To implement Jquery Datepicker on ASP.NET page.

My additional requirements are:

The datepicker must be attached to enabled free text insert textbox,

with russian localization and validator that validates the date format - dd.MM.yyy (for example : 31.12.2009)

Its sounds very simple and so it is - who said i must write in my blog only about  very complicate things?

So lets do it....