複製一個日期選擇器值到另一個選擇不工作

Question

我有以下對我的看法一個jQuery腳本代碼：

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
<script> 

$(document).ready(function() { 
    getTotal(); 
    setDates(); 
}); 

$("#form1").on("input", function() { 
    getTotal(); 
    CalculateDays(); 
    setDates(); 
}); 


function getTotal(){ 
var totalcart = 0; 
    $('#form1 > table').each(function() { 
     $(this).find("tr").each(function(){ 
      if(($(this).has(".inputdays").length > 0) && ($(this).has("#shoppingcart").length > 0)){ 
       var total = $(this).find(".inputquantity").find("input").val() * $(this).find(".hotelprice").html() * $(this).find(".inputdays").find("input").val(); 
       $(this).find("#hoteltotal").text(total); 
       console.log(total); 
       totalcart += parseInt(total); 
     } 
      else if(($(this).has("#shoppingcart").length > 0)){ 
       var total = $(this).find(".inputquantity").find("input").val() * $(this).find(".price").html(); 
       $(this).find("#carttotal").text(total); 
       totalcart += parseInt(total); 
       console.log(total); 
      } 
      console.log("total: " + totalcart); 
     }); 
    }); 
    $("#total").html(totalcart); 
} 

function CalculateDays() { 
    $('#form1 > table').each(function() { 
     $(this).find("tr").each(function() { 
      var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds 
      var firstDate = new Date($(this).find("#datetimepicker1").find("input").val()); 
      var secondDate = new Date($(this).find("#datetimepicker2").find("input").val()); 

      var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 

      if ((!isNaN(diffDays)) && (firstDate.getTime() < secondDate.getTime())) { 

       $(this).find(".inputdays").find("input").val(diffDays) 
       getTotal(); 
      } 
      else { 
       $(this).find(".inputdays").find("input").val("0"); 
      } 
     }); 
    }); 
} 
function setDates() { 
    $("#datetimepicker1").datepicker({ 
     dateFormat: 'yy-mm-dd', beforeShowDay: NotBeforeToday, 
     onSelect: function (dateStr) { 
      $("#datetimepicker2").val(dateStr); 
      $("#datetimepicker2").datepicker("option", { minDate: new Date(dateStr) }) 
     } 
    }); 
    $('#datetimepicker2').datepicker({ 

    }); 
} 

在我的html這些datepickers聲明如下：

<td id="shoppingcart"> 
    <div id='datetimepicker1'> 
    <input type='date' class="form-control" /> 
    </div> 
</td> 
<td id="shoppingcart"> 
    <div id='datetimepicker2'> 
     <input type='date' class="form-control" /> 
    </div> 
</td> 

我只想當前選擇的值datetimepicker1複製到的DateTimePicker 2，後來我想禁用所選日期之前來的日期。但是，該代碼似乎不起作用。這裏有什麼問題？

正如所看到的這張圖片上，選擇在datetimepicker1的日期時，在datetimepicker2（結賬場）的值未設置爲所選值：

我正在試圖複製函數setDates（）中的datetimepicker1到datetimepicker2的值。我嘗試過所有不起作用的多種方法。難道這是因爲我需要在我的其他功能函數中聲明它？

Answer 1

的問題是，您使用的ID設置元素的值datetimepicker2，但這只是一個div元素。進一步審查看來你的datetimepicker1也會遭受同樣的問題。就我所知，您使用jQuery中的datepicker函數的ID應爲input元素。

在您的代碼中有幾處可能出現錯誤的地方，這就是爲什麼使用您無法工作的代碼進行示例是調試的好方法。我已經在這裏創造一個工作示例：https://jsfiddle.net/ve0b6fkt/

還要注意設置了jQuery的價值datepicker您需要使用setDate方法：http://api.jqueryui.com/datepicker/#method-setDate

HTML：

<table> 
    <tr> 
    <td> 
     <div> 
     <input id='datetimepicker1' class="form-control" /> 
     </div> 
    </td> 
    <td> 
     <div> 
     <input id='datetimepicker2' class="form-control" /> 
     </div> 
    </td> 
    </tr> 
</table> 

JS：

jQuery(function($) { 
    $("#datetimepicker1").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    onSelect: function(dateStr) { 
     $("#datetimepicker2").datepicker('setDate', dateStr); 
     $("#datetimepicker2").datepicker("option", { 
     minDate: new Date(dateStr) 
     }) 
    } 
    }); 
    $('#datetimepicker2').datepicker({dateFormat: 'yy-mm-dd'}); 
}); 

jQuery的堅如磐石的文檔：https://jqueryui.com/datepicker/

Answer 2

您應該使用

onSelect: function() { 
     $('#datepicker2').val(this.value); 
    } 

關於你的第一個日期選擇器功能ONSELECT。 這裏是一個工作演示：http://jsfiddle.net/j08691/xyp7khfe/

念及我的評論，這裏要說的是，你應該使用html代碼：

<td> 
    <div> 
    <input id='datetimepicker1' type='date' class="form-control" /> 
    </div> 
</td> 
<td> 
    <div> 
     <input id='datetimepicker2' type='date' class="form-control" /> 
    </div> 
</td>