Question

实施开始日期和结束日期以查找日期差。如果我选择今天的开始日期和今天的结束日期，则差异显示为0，并且我也禁用了周末，尽管它也计算了周末。这是我的代码。我试图解决的问题：

当我选择同一天日期前：开始日期：16-08-2018结束日期：16-08-2018，它在日期差中显示0。但我需要显示1
禁用了周末，但是当我在开始日期和结束日期之间选择10天时，它的计算周末也将开始。我试图解决这两个问题，但没有发生

$("#startDate").datepicker({

  beforeShowDay: $.datepicker.noWeekends,
  changeMonth: true,
  todayHighlight: true,

  minDate: 0,
  numberOfMonths: 1,
  todayHighlight: true,
  weekStart: 1,
  weekEnd: 5,
  onSelect: function(dateStr) {
    var min = $(this).datepicker('getDate'); // Get selected date
    $("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
  }
});

$("#endDate").datepicker({

  beforeShowDay: $.datepicker.noWeekends,
  changeMonth: true,
  endDate: true,
  todayHighlight: true,
  minDate: 0,
  numberOfMonths: 1,
  weekStart: 1,
  weekEnd: 5,
  buttonImageOnly: true,
  onSelect: function(dateStr) {



    var max = $(this).datepicker('getDate'); // Get selected date
    $('#datepicker').datepicker('option', 'maxDate');
    var start = $("#startDate").datepicker("getDate");
    var end = $("#endDate").datepicker("getDate");
    var days = (end - start) / (1000 * 60 * 60 * 24);
    $("#noofDays").val(days);

  }
});

<link href="css/jquery.ui.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.validate.js"></script>
<div class="row">

  <div class="col-sm-12 col-md-4">
    <div class="form-group">
      <label class="control-label col-md-12" style="padding-top: 1px;">Start Date<span class="text" style="color: red;">*</span></label>
      <div class="col-sm-4 col-md-12">
        <input type="text" class="form-control" name="startDate" id="startDate" placeholder="Start Date" required/>
      </div>
    </div>
  </div>

  <div class="col-sm-12 col-md-4">
    <div class="form-group">
      <label class="control-label col-md-12" style="padding-top: 1px;">End Date<span class="text" style="color: red;">*</span></label>
      <div class="col-sm-4 col-md-12">
        <input type="text" class="form-control" name="endDate" id="endDate" placeholder="End Date" required/>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-4">
    <div class="form-group">
      <label class="control-label col-md-12" style="padding-top: 1px;"> No of Days<span class="text" style="color: red;">*</span></label>
      <div class="col-sm-4 col-md-12">
        <input type="text" class="form-control" name="noofDays" id="noofDays" placeholder="No of days" required/>
      </div>
    </div>
  </div>
</div>

Answer 1

如果要同时包含开始日期和结束日期，则应在days中添加一个，并且为了解决周末的问题，我对开始日期和结束日期之间的日期进行迭代，然后从天数（变量days）（如果当前日期是周末）。

$("#startDate").datepicker({

  beforeShowDay: $.datepicker.noWeekends,
  changeMonth: true,
  todayHighlight: true,

  minDate: 0,
  numberOfMonths: 1,
  todayHighlight: true,
  weekStart: 1,
  weekEnd: 5,
  onSelect: function(dateStr) {
    var min = $(this).datepicker('getDate'); // Get selected date
    $("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
  }
});

$("#endDate").datepicker({

  beforeShowDay: $.datepicker.noWeekends,
  changeMonth: true,
  endDate: true,
  todayHighlight: true,
  minDate: 0,
  numberOfMonths: 1,
  weekStart: 1,
  weekEnd: 5,
  buttonImageOnly: true,
  onSelect: function(dateStr) {



    var max = $(this).datepicker('getDate'); // Get selected date
    $('#datepicker').datepicker('option', 'maxDate');
    var start = $("#startDate").datepicker("getDate");
    var end = $("#endDate").datepicker("getDate");
    var days = ((end - start) / (1000 * 60 * 60 * 24)) + 1; // Add one to include the end day
    for (var dayBetween = start; dayBetween <= end; dayBetween.setDate(dayBetween.getDate() + 1)) {
      var dayOfWeek = dayBetween.getDay();
      if (0 === dayOfWeek || 6 === dayOfWeek) { // Weekend day
        days--;
      }
    }
    $("#noofDays").val(days);

  }
});

<link href="css/jquery.ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.validate.js"></script>
<div class="row">

  <div class="col-sm-12 col-md-4">
    <div class="form-group">
      <label class="control-label col-md-12" style="padding-top: 1px;">Start Date<span class="text" style="color: red;">*</span></label>
      <div class="col-sm-4 col-md-12">
        <input type="text" class="form-control" name="startDate" id="startDate" placeholder="Start Date" required/>
      </div>
    </div>
  </div>

  <div class="col-sm-12 col-md-4">
    <div class="form-group">
      <label class="control-label col-md-12" style="padding-top: 1px;">End Date<span class="text" style="color: red;">*</span></label>
      <div class="col-sm-4 col-md-12">
        <input type="text" class="form-control" name="endDate" id="endDate" placeholder="End Date" required/>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-4">
    <div class="form-group">
      <label class="control-label col-md-12" style="padding-top: 1px;"> No of Days<span class="text" style="color: red;">*</span></label>
      <div class="col-sm-4 col-md-12">
        <input type="text" class="form-control" name="noofDays" id="noofDays" placeholder="No of days" required/>
      </div>
    </div>
  </div>
</div>

尝试解决日期差异从零开始

1 个答案: