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中，这些日期选择器声明如下：

 <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（结帐字段）中的值不会设置为所选值：

我正在尝试将datetimepicker1的值复制到函数setDates（）中的datetimepicker2。我尝试了多种方法都没有用。这可能是因为我需要在其他功能函数中声明它吗？

Answer 1

问题是您要设置ID为datetimepicker2的元素的值，但这只是div元素。在进一步审核时，您的datetimepicker1似乎也会遇到同样的问题。据我所知，您在jQuery中使用datepicker函数时使用的ID应该是input个元素。

您的代码中可能存在一些错误的位置，这就是为什么使用您无法开始工作的代码提供示例是一种很好的调试方法。我在这里创建了一个工作示例：https://jsfiddle.net/ve0b6fkt/

另请注意设置您需要使用datepicker方法的jQuery 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);
    }

作为第一个datepicker的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>

在选择不起作用时将一个datepicker值复制到另一个

2 个答案: