This article will show you how you can create a responsive jquery
datetime picker calendar with plush
& minus date changer in asp.net. In this calendar date and time change will
take place by plush and minus sign.
Some of my previous articles are as follows: Dynamic
Thumbnails Image Preview Slider With Zoom Effect Using jQuery In Asp.Net and
C#.Net, Sign
Up Form For Newsletter In Asp.Net Using C# and Css3, Facebook
Style Lightbox jQuery Plugin To Display Images Like Facebook In Asp.Net,
Webcam
Integration Using jQuery Webcam Plugin In Asp.Net, Asp.Net
Dynamic jQuery Photo Gallery Plugin With Zoom Effect Using Css, Three
Level Menus With Disable Menu Item Using jQuery In Asp.Net.
So for this article first we will create a new asp.net
application and add the below library refrance into the header of the page.
<script src="Js/jquery-1.11.0.min.js"
type="text/javascript"></script>
<script src="Js/DateTimePicker.js" type="text/javascript"></script>
<link href="Css/DateTimePicker.css" rel="stylesheet"
type="text/css"
/>
|
Now add the below jquery code to the header of the page.
<script type="text/javascript">
$(document).ready(function()
{
var objDateTime;
$("#dateTimeBox").DateTimePicker(
{
init:
function()
{
objDateTime
= this;
},
parentElement:
".cont-datetime",
});
objDateTime.setDateTimeStringInInputField($("#<%=txtDateTime.ClientID %>"), new
Date());
});
</script>
|
In above code I have shown the calendar on the click on
textbox. So here is the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1"
%>
<!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>jQuery
DateTime Picker Calendar With Plush & Minush Date Changer In Asp.Net
</title>
<script src="Js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="Js/DateTimePicker.js" type="text/javascript"></script>
<link href="Css/DateTimePicker.css" rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
$(document).ready(function()
{
var objDateTime;
$("#dateTimeBox").DateTimePicker(
{
init:
function()
{
objDateTime
= this;
},
parentElement:
".cont-datetime",
});
objDateTime.setDateTimeStringInInputField($("#<%=txtDateTime.ClientID %>"), new
Date());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="cont-datetime">
Date:
<asp:TextBox ID="txtDateTime" runat="server" data-field="datetime" ReadOnly
Width="200px"></asp:TextBox>
<div id="dateTimeBox">
</div>
</div>
</form>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view