简体   繁体   English

文本框中的Asp.Net日期选择器控件

[英]Asp.Net Date Picker Control from the Text Box

I have 2 Text box accepting date from the calender control. 我有2个文本框中的日历控件接受日期。 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. 但是,第二个文本框(To)的日期为今天,并且该日期应不小于第一个文本框的日期。

how can i do this in .net. 我该如何在.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" />
&nbsp &nbsp

<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. 我的第一个文本框运行正常。但是您能帮忙编写第二个文本框吗?

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. 它的有效作用是在日期选择器中选择日期时分别更改txtFromtxtTo的 minDatemaxDate option

remove the {} in 删除{}

$("#txtto").datepicker({});

I think. 我认为。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM