如果输入日期少于 4 个月，则禁用按钮

Question

我想在输入日期小于 4 个月时禁用下一个按钮。获取当前日期并检查当前日期是否小于 4 个月。如果它较小，请禁用下一步按钮并发出警报。

我尝试使用警告按钮来测试日期选择器，但没有奏效：

jQuery(document).ready(function($) {
  $('#input_18_104').datepicker({
    onSelect: function() {
      var date = $(this).datepicker('getDate');
      var today = new Date();
      if ((new Date(today.getFullYear(), today.getMonth(), today.getDate() + 120)) < date) {
        //Do somthing here..
        alert(123);
      }

    },
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />

<input name="input_104" id="input_18_104" type="text" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="72" placeholder="Date?"> Next button:

<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

Answer 1

您的实际情况是错误的today.getDate()+120 会给您一个高于120 的数字，这将导致错误的date 那么您的比较不会总是正确的。

您需要分别比较month 的值，您可以这样做：

$(document).ready(function () {
    $('#input_18_104').datepicker()
        .on("input change", function (e) {
            var date = $(this).datepicker('getDate');
            var today = new Date();

            if ((today.getMonth() + 11) - (date.getMonth() + 11) > 4) {
                alert("The date is wrong");
            } else if (((today.getMonth() + 11) - (date.getMonth() + 11) == 4) && (today.getDate() > date.getDate())) {
                alert("The date is wrong");
            } else {
                console.log("Date is fine");
            }
        });
});

解释：

• 我们使用date.getMonth() + 11 来确保我们不会得到否定 值，所以我们将 11 添加到 2 个 months 值中，所以它不会影响 测试。
• 然后我们检查这两个值之间的差异是否不大于4，那么选择的日期就可以了。

演示：

$(document).ready(function() {
      $('#input_18_104').datepicker()
        .on("input change", function(e) {
            var date = $(this).datepicker('getDate');
            var today = new Date();
            
            if ((today.getMonth() + 11) - (date.getMonth() + 11) > 4) {
              alert("The date is wrong");
            } else if (((today.getMonth() + 11) - (date.getMonth() + 11) == 4) && (today.getDate() > date.getDate())) {
                alert("The date is wrong");
              } else {
                console.log("Date is fine");
              }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />

<input name="input_104" id="input_18_104" type="text" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="72" placeholder="Date?"> Next button:

<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

Answer 2

以下方法可行

jQuery(document).ready(function($) {
  $("#input_18_104").datepicker({
dateFormat: 'dd/mm/yy'}).on("changeDate", function (e) {
alert("Working");});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />

<input name="input_104" id="input_18_104" type="text" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="72" placeholder="Date?"> Next button:

<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

Answer 3

这并不难。

new Date 以毫秒为单位返回时间戳。日期功能非常聪明。您可以溢出月份和日期，它会将其更正为日期：因此月份的值 14 实际上将变为二月或三月。但是，由于闰年、30 天和 31 天等原因，您真的希望远离日期计算或减去月份。比较时间戳更安全。

new Date(date)

只需添加 4 个月：

//remember month is zero based, so correct with +1 to give correct date input.
future = new Date(today.getFullyear()+"-"+(today.getMonth()+1+4)+"-"+today.getDate())

现在比较：

future < new Date(date);

当所选日期大于未来 4 个月的日期时，它将超过 4 个月。 JavaScript 会比较从 1970 年 1 月 1 日开始以毫秒为单位的时间戳，因此每当一个时间戳大于另一个时间戳时，它都是相对于比较时间戳的未来。

Answer 4

我会根据时间值比较日期。这不是 100% 准确的，因为并非所有月份都有 30 天，但没关系。这是一个快速尝试

jQuery(document).ready(function ($) {
    $('#input_18_104').datepicker({
    onSelect: function(){
             var date = $(this).datepicker('getDate');
             var today = new Date();
             var threshold = 10368000000; // 120d in ms = 4*30*24*60*60*1000
             var d = today.getTime()-date.getTime();
             //console.log(d, d > threshold)
             
             // be optimistic...
             $('#next_button_18_94').attr('disabled', false);
             
             if (d < 0) {
                 // selected date is in the future => everything ok
                 return;
             }
             if (d > threshold) {
                 // oops, selected date more than 4 months in the past
                 $('#next_button_18_94').attr('disabled', true);
                 return;
             }
             
        },
    });
});

#next_button_18_94[disabled]{
  border: 2px solid red;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<input name="input_104" id="input_18_104" type="text" tabindex="72" >
<input type="button" id="next_button_18_94" class="form_next_button button" value="Next" tabindex="76">

Answer 5

假设“小于 4 个月”的意思是输入日期在今天之前小于 4 个月，那么一个简单的方法是在输入日期上加上 4 个月，看看是否小于今天，然后启用或禁用根据需要按钮，例如

function checkDate(input) {
  var form = input.form;
  var now = new Date();
  var then = parseDate(input.value);
  addMonths(then, 4);
  form.actionButton.disabled = now > then;
}

function parseDate(s) {
  var b = s.split(/\D/)
  return new Date(b[0], b[1]-1, b[2]);
}

function addMonths(date, months) {
  var d = date.getDate();
  date.setMonth(date.getMonth() + +months);
  if (date.getDate() != d) date.setDate(0);
  return date;
}

<form>
  Date (yyyy-mm-dd)<input type="text" value="2017-01-01" name="date" onblur="checkDate(this)"><br>
  <input type="button" name="actionButton" onclick="console.log(this.form.date.value)" value="Do stuff" disabled>

Answer 6

使用monthDiff函数

jQuery(document).ready(function ($) {
    $('#input_18_104').datepicker({
        onSelect: function () {
            var date = $(this).datepicker('getDate');
            var today = new Date();
            if (monthDiff(today, date) < 4) {
                //Do somthing here..
                alert(123);
            }

        },
    });
});

function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}