从日期选择器获取日期未按预期工作答案

【问题标题】：Get date from datepicker not working as expected从日期选择器获取日期未按预期工作
【发布时间】：2019-11-26 02:10:52
【问题描述】：

我试图在有人选择过去的日期时显示提醒：

jQuery('#date').datepicker().change(evt => {

    var selectedDate = jQuery('#date').datepicker('getDate');
    var theSelectedDate = selectedDate.setHours(0,0,0,0);

    var now = new Date();
    var theNow = now.setHours(0,0,0,0);

    if (theSelectedDate > theNow) {
        // Date in in the future, all good
    } else {
        alert("Selected date is in the past");
    }
});

..还有日期字段...

<input type="date" id="date" name="date" />

问题在于，无论我使用日期选择器选择了哪个日期，移动设备上的警报始终是“所选日期已过去”。

我到底做错了什么？

【问题讨论】：

您检查过theSelectedDate 和theNow 的值吗？通过调试器或console.log 他们。这将告诉您这些值是否符合您的期望。如果它们看起来不错，请使用这些值更新您的问题。否则，找出它们不正确的原因。
这是用于 jQuery UI Datepicker 还是另一个 Datepicker？
直接比较两个对象在 Javascript 中是有问题的。见stackoverflow.com/questions/7606798/…

标签： javascript jquery datepicker

【解决方案1】：

我不确定您为什么不设置最小日期，以便用户无法选择过去的日期。

$(function() {
  $("#date").datepicker({
    minDate: "+1d"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="date"></p>

您可以使用0 表示今天或使用+1d 排除今天。

更新

对于原生 HTML5 日期选择器，您可以利用 min 属性。

您可以使用min 和max 属性来限制用户可以选择的日期。

$(function() {
  function nowStr() {
    var dt = new Date();
    var yy = dt.getFullYear();
    var m = (dt.getMonth() + 1);
    m = m < 10 ? "0" + m : m;
    var d = dt.getDate();
    d = d < 10 ? "0" + d : d;
    var s = yy + "-" + m + "-" + d;
    return s;
  }

  $("#date").attr("min", nowStr());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" name="date" min="2019-01-01" />

【讨论】：

这对于台式机来说很好，但在移动设备上它不起作用，所以我的想法是，如果他们选择了过去的日期，那么最好的办法就是发出警报。
忘记添加....在移动设备上，输入类型是date，这意味着只要您点击该字段，就会使用设备日期选择器和这种方法（以及其他所有我已研究）不起作用。
@user3256143 jQuery UI 日期选择器不适用于date 类型的输入。如果您的移动版本切换回text，它会工作。看看是否有办法处理日期类型。
@user3256143 HTML5日期有min和max可以使用的属性：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

【解决方案2】：

试试这个。我现在已移至所选日期上方

jQuery('#date').datepicker().change(evt => {
    var now = new Date();
    var selectedDate = jQuery('#date').datepicker('getDate');
    var theSelectedDate = selectedDate.setHours(0,0,0,0);
    var theNow = now.setHours(0,0,0,0);
 
   if (theSelectedDate >= theNow) {
   alert("Selected date is correct !!!!!!!");
        // Date in in the future, all good
    } else {
        alert("Selected date is in the past");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>

<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">

【讨论】：

这仍然无法在移动设备上运行。您的回答表明输入类型是text，如果用户在#date 字段中手动输入日期，这可能会起作用，但在移动设备上，输入类型是date，这意味着只要您点击该字段，使用设备日期选择器。

【解决方案3】：

您正在寻找onSelect 事件：

$("#date").datepicker({
    onSelect: function(dateText, inst) {
    var selectedDate = new Date(dateText);
    var theSelectedDate = selectedDate.setHours(0,0,0,0);

    var now = new Date();
    var theNow = now.setHours(0,0,0,0);

    if (theSelectedDate > theNow) {
        console.log(true);
        // Date in in the future, all good
    } else {
        console.log(false);
        alert("Selected date is in the past");
      }
    }
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<input type="date" id="date" name="date" />

See this answer

【讨论】：