Web User Control

Now  i want to make all the login form (with the datepicker enabled field) to be placed on the page as Web User Control.

Lets add to our project new web user control :
Right click on project->Add new item-> Web User Control
Lets call it DatePickerControl
copy  the markup code inside the

tag from the Default page (The page we worked on it in previous post)
and paste it inside the User Control markup
Now add a new webform and drag the  DatePickerControl.aspx into the new page.
Now you can compile and view this new page in browser.
Alas! Something got messed here...No more datepicker, no more validation.
The problem is that all the conrol attributes like id and name  changed.

<input name="DatePickerControl1$txtBirthDate" type="text" id="DatePickerControl1_txtBirthDate" name="txtBirthDate" style="height:24px;" />


One way to solve this problem is to register the javascript in the Load Page event of contol:

string script = "<script type=\"text/javascript\">$(function() {"+

        "$('#"+txtBirthDate.ClientID + "').datepick({maxDate: 0});"+

        "$('#form1').validate({" +

        "errorPlacement: $.datepick.errorPlacement," +

        "rules: {" +

         "txtBirthDate: { dpMaxDate: [] }" +

        "}," +

         "messages: {" +

          " txtBirthDate: '<span style=\"color:red\">The date is icorrent or later than now!</span>'" +

        " } " +

        "});" +

        "});</script>";

        Page.RegisterClientScriptBlock("datepickerfuncs",script);

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: