JQuery - Timepicker & Datepicker

Timepicker & Datepicker

I took a component from http://trentrichardson.com/examples/timepicker/ to display a calendar that used Jquery.

The steps to install the JQuery plugin

1) Include in your file the following files, this can be done downloading the files or doing the references.

Downloading the Files.
    <script src="../Scripts/Mail/jquery-2.0.2.min.js"></script>
    <script src="../Scripts/Mail/jquery-ui.min.js"></script>
    <link href="../Content/jquery-ui.css" rel="stylesheet" />    
    <script src="../Scripts/Mail/jquery-ui-timepicker-addon.js"></script>

Includinf the references.
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/hot-    sneaks/jquery-ui.css" />
    <script src="pathtojs/jquery-ui-timepicker-addon.js"></script>

2) For this plugin additionally request include the following style.

.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

3) Include the following function in your file
<script type="text/javascript">
   $(function() { $('#selectedDateTime').datetimepicker(); });
</script>

4) Finally include the element.
<input type="text" id="selectedDateTime" />

5) Optionally if you want to customize the format include in the script section
$('#selectedDateTimeWithFormat').datetimepicker({ dateFormat: 'dd-mm-yy', timeFormat: 'hh:mm:ss' });

JQuery Validator plugin

1) This line include JQuery to your project
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2..2/jquery.min.js"></script>

2) This line include JQuery Validator to your project in .Net
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>

3) In your .aspx file write the next jscript code to validate the empty fields
   #ctl01 is the Id Form
   #MainContent_btn222  is the Id Button


$(document).ready(function () {
    // Initialize validation on the entire ASP.NET form

    $("#ctl01").validate({
        // This prevents validation from running on every
        //  form submission by default.
        onsubmit: false
    });

    $("#MainContent_btn222").click(function (evt) {
        // Validate the form and retain the result.
        var isValid = $("#ctl01").valid();

        // If the form didn't validate, prevent the
        //  form submission.
        if (!isValid)
            evt.preventDefault();
    });
});

4) In your fields add the tag CssClass with the value required

<asp:TextBox ID="To" runat="server" Width="350px" CssClass="required"/>

Regular Expression - Multiple Mails

This expression validated many emails like in Cc.

(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*[\s,;]*)*