时间戳

首页 > 解决方案 > 从日期选择器获取日期未按预期工作

javascript - 从日期选择器获取日期未按预期工作

问题描述

当有人选择过去的日期时，我试图显示警报：

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

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

我到底做错了什么？

标签： javascriptjquerydatepicker

解决方案

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

$(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" />

推荐阅读