Asp.Net Date Picker Control from the Text Box
Question
I have 2 Text box accepting date from the calender control. One is From & another is To. I would like take the date accordingly as follows.
On the 1st text box(from),It can only take the today & any other Previous date. But, the 2nd text box(To),It takes the today date & it should take the date not less than the date which is taken on the 1st text box.
how can i do this in .net. This is my code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!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>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtfrom").datepicker({ maxDate:0 });
});
</script>
<script type="text/javascript">
$(function () {
$("#txtto").datepicker({});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>From:</b> <asp:TextBox ID="txtfrom" runat="server" />
   
<b>To:</b><asp:TextBox ID="txtto" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
My first text box is working properly.But Can you help on the codeing of 2nd text box.
3 answers
solution1
1 2013-08-08 10:46:58
Set up your datepickers like this:
$("#txtFrom").datepicker({
onSelect: function (selectedDate) {
$("#txtTo").datepicker("option", "minDate", selectedDate);
}
});
$("#txtTo").datepicker({
onSelect: function (selectedDate) {
$("#txtFrom").datepicker("option", "maxDate", selectedDate);
}
});
What it effectively is doing is to change the option minDate and maxDate for txtFrom and txtTo respectively, when the date is selected in the datepicker.
solution2
0 2013-08-08 10:41:55
remove the {} in
$("#txtto").datepicker({});
I think.
solution3
0 2013-08-08 10:47:09
Just add a new rows as you have done for to date:
$(function () {
$('[id$=txtTo]').datepicker();
$('[id$=txtFrom]').datepicker();
});
And there is no need to Use {} if you want to add ranges then try the below code:
$('[id$=txtFrom]').datepicker({
onSelect: function (selectedDate) {
$('[id$=txtTo]').datepicker("option", "minDate", selectedDate);
}
});
$('[id$=txtFrom]').datepicker({
onSelect: function (selectedDate) {
$('[id$=txtFrom]').datepicker("option", "maxDate", selectedDate);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.