Установить второе значение поля даты через 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