Question

我尝试使用jquery和bootstrap datepicker计算天差。我已经尝试了很多方法来计算它，但它仍然没有显示任何东西。我的代码中是否缺少某些内容？有人可以帮帮忙吗？我很难过。非常感谢任何帮助。

<div class="form-group">
  <label class="control-label col-sm-2">Date *</label>
  <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today">
    <input id="mcDateFrom" type="text" name="mcDateFrom" >
  </div>
  <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today">
    <input id="mcDateTo" type="text" name="mcDateTo">
  </div>
  <div class="form-group col-sm-4" id="daysCount">
    <label id="daysCount"> </label>
  </div>
</div>

$('#mcDateFrom').datepicker({
        format: "d-m-y",
        todayHighlight: 'TRUE',
        autoclose: true,
        minDate: 0,
        maxDate: '+1Y+6M'
    }).on('change', function (ev) {
        $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val());
    });
    $('#mcDateTo').datepicker({
        format: "d-m-y",
        todayHighlight: 'TRUE',
        autoclose: true,
        minDate: '0',
        maxDate: '+1Y+6M'
    }).on('change', function (ev) {
        var start = $("#mcDateFrom").val();
        var startD = new Date(start);
        var end = $("#mcDateTo").val();
        var endD = new Date(end);
        var diff = parseInt((endD.getTime() - startD.getTime()) / (24 * 3600 * 1000));
        $("#daysCount").append("<label> For " + diff + " Day(s) </label>");
});

Answer 1

有几个错误：

错误的日期格式，y显示为字母而非年份
new Date（）无法处理未定义的自定义格式，但Datepicker可以直接返回Date实例
追加onChange事件无法正常工作

以下是您的代码的修复版和工作版：

$('#mcDateFrom').datepicker({
    format: "dd-mm-yyyy",
    todayHighlight: 'TRUE',
    autoclose: true,
    minDate: 0,
    maxDate: '+1Y+6M'
}).on('change', function(ev) {
    $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val());
});
$('#mcDateTo').datepicker({
    format: "dd-mm-yyyy",
    todayHighlight: 'TRUE',
    autoclose: true,
    minDate: '0',
    maxDate: '+1Y+6M'
}).on('change', function(ev) {
    var start = $("#mcDateFrom").data('datepicker').viewDate;
    var end = $("#mcDateTo").data('datepicker').viewDate;
    var diff = parseInt((end.getTime() - start.getTime()) / (24 * 3600 * 1000));
    $("#daysCount").html("<label> For " + diff + " Day(s) </label>");
});

JSFiddle Demo

Answer 2

我修改了您的代码，现在它运行良好。您只需要更改格式，就可以根据需要获得输出。

＆＃13;

$('#mcDateFrom').datepicker({
    format: "dd-mm-yyyy",
    todayHighlight: 'TRUE',
    autoclose: true,
    minDate: 0,
    maxDate: '+1Y+6M'
}).on('change', function(ev) {
  	
    $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val());
});

$('#mcDateTo').datepicker({
    format: "dd-mm-yyyy",
    todayHighlight: 'TRUE',
    autoclose: true,
    minDate: '0',
    maxDate: '+1Y+6M'
}).on('change', function(ev) {

    var start = $("#mcDateFrom").data('datepicker').viewDate;
    var end = $("#mcDateTo").data('datepicker').viewDate;
    var diff = parseInt((end.getTime() - start.getTime()) / (24 * 3600 * 1000));
  
    $("#daysCount").html("<label> For " + diff + " Day(s) </label>");
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<div class="form-group">
    <label class="control-label col-sm-2">Date *</label>
    <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today">
        <input id="mcDateFrom" type="text" name="mcDateFrom">
    </div>
    <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today">
        <input id="mcDateTo" type="text" name="mcDateTo">
    </div>
    <div class="form-group col-sm-4" id="daysCount">
        <label id="daysCount"> </label>
    </div>
</div>

＆＃13;

Answer 3

您将错误的日期格式设置为“新日期”，因此它会在差异之前返回无效日期。

var dateFrom;

$('#mcDateFrom').datepicker({
   format: "d-m-yy",
   todayHighlight: 'TRUE',
   autoclose: true,
   minDate: 0,
   maxDate: '+1Y+6M'
}).on('change', function (ev) {
   dateFrom = $("#mcDateFrom").val();
   $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val());
});

$('#mcDateTo').datepicker({
    format: "d-m-yy",
    todayHighlight: 'TRUE',
    autoclose: true,
    minDate: '0',
    maxDate: '+1Y+6M'
}).on('change', function (ev) {
    startDP = dateFrom.split("-");
    var startD = new Date(startDP[2], (startDP[1]-1), startDP[0]);
    var end = $("#mcDateTo").val().split("-");
    var endD = new Date(end[2], (end[1]-1), end[0]);
    var diff = parseInt((endD.getTime() - startD.getTime()) / (24 * 3600 * 
1000));

   if( diff ) {
       $("#daysCount").append("<label> For " + diff + " Day(s) </label>");
   }
});

直播示例：https://jsfiddle.net/wdjqh8c9/3/

无法使用jquery计算与datepicker的天差

3 个答案: