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