Question

我有两个日期选择器，用于获取当前日期和日期之间的差异。我需要根据天数禁用当前日期和所选日期下拉值的日期。

假设

1）6天后，所有选项都将被禁用

2）当7天到来时，所有选项都被禁用，除了1周和

3）14天后，除1周和15天外，所有选项均被禁用。

$('.fromdate').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
  });

$('.todate').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
  });

$('.fromdate').datepicker().bind("change", function () {
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
$('.todate').datepicker("option", "minDate", minValue);
calculate();
  });

$('.todate').datepicker().bind("change", function () {
var maxValue = $(this).val();
maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
$('.fromdate').datepicker("option", "maxDate", maxValue);
calculate();
   });

function calculate() {
var d1 = $('.fromdate').datepicker('getDate');
var d2 = $('.todate').datepicker('getDate');
var oneDay = 24*60*60*1000;
var diff = 0;
if (d1 && d2) {

  diff = Math.round(Math.abs((d2.getTime() - d1.getTime())/(oneDay)));
}
var days = $('.calculated').val(diff);
if(days < 7){
$("select option:contains('1')").attr("disabled",true);
   }
   }

<input class='fromdate' /><br><br>
<input class='todate' /><br><br>
<input class='calculated' /><br><br>

<select class="selectpicker" data-style="btn btn-info btn-round" data-size="7" tabindex="-98">
      <option value="1">1 week </option>
      <option value="2">15 days</option>
      <option value="3">1 month</option>
      <option value="4">2 month</option>
</select>

https://jsfiddle.net/k6nvcr4f/

Answer 1

function calculate() {
  var d1 = $('.fromdate').datepicker('getDate');
  var d2 = $('.todate').datepicker('getDate');
  var oneDay = 24*60*60*1000;
  var diff = 0;
  if (d1 && d2) {

    diff = Math.round(Math.abs((d2.getTime() - d1.getTime())/(oneDay)));
  }
  var days = $('.calculated').val(diff);
  $(".selectpicker option").attr("disabled","disabled");

  if (diff >= 7) {
       $(".selectpicker option:contains('1 week')").removeAttr("disabled");
  }
  if (diff >= 14) {
       $(".selectpicker option:contains('15 days')").removeAttr("disabled");
  }     

}

https://jsfiddle.net/z1Lg1rz1/

Answer 2

以下是我所做的工作片段：
（参见JS代码中的一些注释）

＆＃13;

$('.fromdate, .todate').datepicker({ // Merged selector
  dateFormat: 'yy-mm-dd',
  changeMonth: true,
  changeYear: true,
});

$('.fromdate').datepicker().bind("change", function() {
  var minValue = $(this).val();
  minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
  $('.todate').datepicker("option", "minDate", minValue);
  calculate();
});

$('.todate').datepicker().bind("change", function() {
  var maxValue = $(this).val();
  maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
  $('.fromdate').datepicker("option", "maxDate", maxValue);
  calculate();
});

function calculate() {
  var d1 = $('.fromdate').datepicker('getDate');
  var d2 = $('.todate').datepicker('getDate');
  var oneDay = 24 * 60 * 60 * 1000;
  var diff = 0;
  if (d1 && d2)
    diff = Math.round(Math.abs((d2.getTime() - d1.getTime()) / (oneDay)));
  var days = $('.calculated').val(diff);

  // Disable all
  $(".selectpicker option").attr("disabled", true);
  // Re-enable one-by-one according to duration betwen the two dates
  if (diff >= 7)  $(".selectpicker option[value=1]").removeAttr("disabled");
  if (diff >= 14) $(".selectpicker option[value=2]").removeAttr("disabled");
  if (diff >= 28) $(".selectpicker option[value=3]").removeAttr("disabled");
  if (diff >= 56) $(".selectpicker option[value=4]").removeAttr("disabled");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<input class='fromdate' /><br><br>
<input class='todate' /><br><br>
<input class='calculated' /><br><br>

<select class="selectpicker" data-style="btn btn-info btn-round" data-size="7" tabindex="-98">
  <option value="1">1 week </option>
  <option value="2">15 days</option>
  <option value="3">1 month</option>
  <option value="4">2 month</option>
</select>

＆＃13;

希望它有所帮助！

使用jquery禁用基于天数的选择选项

2 个答案: