Description:
In some scenario, we need to select date
with time.
Datetimepicker is used to open a calendar with
slider components that will used to select time zone.
Here, Datetimepicker plugin is used with
JqueryUI datepicker. So you need to download both JqueryUI and timepicker
plugins.
1. Download
JqueryUI from http://jqueryui.com/
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.js"></script>
<link href="jquery-ui-1.10.3.custom" rel="Stylesheet"
type="text/css"
/>
3. Download
Timepicker Plugin.
You can download
from https://github.com/trentrichardson/jQuery-Timepicker-Addon or
4. Extract it and include the files jquery-ui-timepicker-addon.js and jquery-ui-sliderAccess.js
5. Once the document is ready,
initialize datetimepicker widget with the textbox.
$(document).ready(function () {
$("#TextBox1").datetimepicker();
});
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="jquery-ui-sliderAccess.js" type="text/javascript"></script>
<style type="text/css">
.ui-datepicker
{
font-size: 10pt;
}
</style>
<script type="text/javascript">
$(function () {
$('#TextBox1').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
How to use Jquery Datetimepicker , How to add
DateTimepicker for input field using Jquery , Adding a TimePicker for
textbox, How to add DateTimePicker using Jquery . Add a DateTimePicker
for textbox
0 comments:
Post a Comment