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' });