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

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