Question

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

我尝试使用警告按钮测试日期选择器，但这不起作用：

＆＃13;

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);
      }

    },
  });
});

＆＃13;

<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">

＆＃13;

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");
            }
        });
});

<强> Explanataion：

我们使用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

使用 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;
}

Answer 4

这不是太难。

new Date以毫秒为单位返回时间戳。日期功能非常聪明。您可以溢出月份和日期，并将其更正为日期：因此，作为月份的值14实际上将变为2月或3月。但你真的想远离日计算或减去月数，因为闰年，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-01-01开始计算的，以毫秒为单位，因此每当时间戳大于未来相对于比较时间戳的时间戳时。

Answer 5

我会根据时间值比较日期。这并非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 6

假设“少于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>

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

6 个答案: