Usage of the jQuery DateTime Picker in ASP.NET
By James H
This FAQ is based on the usage of the jQuery datetime picker in ASP.NET. jQuery Datetime picker is rich UI plugin where you can select the date with best options in it.
Now a days where ever we see in the web sites like in Registration Page, Online Reservation
Page, e.t.c. So it is mandatory to show the Calendar which has rich UI. For
using this jQuery DateTime Picker we need to download the jQuery UI plugin.
The code to use this plugin is given here
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DateTimePicker_UI.aspx.cs"
Inherits="DateTimePicker_UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="jquery-ui-1.8.14.custom/css/ui-lightness/jquery-ui-1.8.14.custom.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js">
</script>
<script src="jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.14.custom/development-bundle/ui/jquery.ui.datepicker.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//$('#iText1').datepicker();
$("#iText1").datepicker({ dateFormat: 'yy-dd-MM' });
$('#iText2').datepicker();
$('#btnGenerate').click(function () {
OnSelect();
});
});
function OnSelect() {
var txtbx1 = $('#iText1').val();
var txtbx2 = $('#iText2').val();
if (txtbx1 == '') {
alert('Please select From Date');
}
else if (txtbx2 == '') {
alert('Please select To Date');
}
if (txtbx1 != '' && txtbx2 != '') {
alert("Good you have selected both date's");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="datetimepicker" class="ui-datepicker-multi-2">
<table>
<tr>
<td>
From:
</td>
<td>
<input type="text" class="ui-datepicker-multi-2" id="iText1" />
</td>
</tr>
<tr>
<td>
To:
</td>
<td>
<input type="text" class="ui-datepicker-multi-2" id="iText2" />
</td>
</tr>
<tr>
<td colspan="2" >
<input type="button" id="btnGenerate" value="Generate" style="margin-left:50px"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
The different Options in using this plugin is given link DateTime Picker.
The Output screen shots is given below
Usage of the jQuery DateTime Picker in ASP.NET (733 Views)