Question

我需要将第二个日期字段值设置为从第一个日期字段值起7天之后。当我选择第一个日期字段时，应该会发生这种情况。这是我的代码。

<script type="text/javascript">
     function pageLoad() {

         $("[id$=txtToDate]").datepicker({
             'format': 'yyyy-mm-dd', autoclose: true, todayHighlight: true
         }).attr('readonly', 'readonly');
         $("[id$=txtFromDate]").datepicker({
             'format': 'yyyy-mm-dd', autoclose: true, todayHighlight: true
         }).attr('readonly', 'readonly');
     };

     </script>
    ////
     <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            <div class="row">
                              <div class="col-md-10">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">From Date :</label>
                                    <div class="col-sm-4">
                                        <asp:TextBox ID="txtFromDate" runat="server" CssClass="form-control" AutoPostBack="True"></asp:TextBox>
                                    </div>
                                    <label class="col-sm-2 control-label">To Date :</label>
                                    <div class="col-sm-4">
                                        <asp:TextBox ID="txtToDate" runat="server" CssClass="form-control" AutoPostBack="True"></asp:TextBox>
                                    </div>
                                </div> 
                             </div>
                          </div>


    </asp:UpdatePanel>

Answer 1

您可以从第一个日期选择器中将$("[id$=txtFromDate]").datepicker("getDate")事件与change事件一起使用来捕获值，并使用更新的日期值设置第二个日期选择器的minDate选项。以下是完成任务的示例：

$("[id$=txtFromDate]").datepicker({
   'format': 'yyyy-mm-dd', 
   autoclose: true, 
   todayHighlight: true,
}).attr('readonly', 'readonly').change(function() {
    var date2 = new Date($("[id$=txtFromDate]").datepicker("getDate"));
    date2.setDate(date2.getDate() + 7); // set 7 days ahead
    $('[id$=txtToDate]').datepicker("setDate", date2); // set date value of second datepicker
    $('[id$=txtToDate]').datepicker("option", "minDate", date2); // set minimum date of second datepicker
});

注意：您可以以txtToDate和date2.setDate(date2.getDate() - 7);为目标，对txtFromDate执行相反的操作，以便两个日期选择器都可以进行自我调整。

附加说明：：如果您在使用日期选择器而不是使用ClientIDMode="Static"时遇到问题，请将$("[id$=datepickerid]")替换为$('<%= datepickerid.ClientID %>')，如下例所示：

$("<%= txtFromDate.ClientID %>").datepicker({
   'format': 'yyyy-mm-dd', 
   autoclose: true, 
   todayHighlight: true,
}).attr('readonly', 'readonly').change(function() {
    var date2 = new Date($("<%= txtFromDate.ClientID %>").datepicker("getDate"));
    date2.setDate(date2.getDate() + 7); // set 7 days ahead
    $('<%= txtToDate.ClientID %>').datepicker("setDate", date2); // set date value of second datepicker
    $('<%= txtToDate.ClientID %>').datepicker("option", "minDate", date2); // set minimum date of second datepicker
});

工作示例：JSFiddle

将第二个日期字段值设置为距第一个选定日期字段值7天后

1 个答案: