如何使 Jquery datepicker 验证适用于默认值答案

【问题标题】：how to make the Jquery datepicker validations to work on for default values如何使 Jquery datepicker 验证适用于默认值
【发布时间】：2017-08-07 03:36:43
【问题描述】：

我需要验证开始日期和结束日期，如下所示：问题是开始日期和结束日期在 html 本身具有默认日期，如下所示：

Start Date: <input type="text" id="startDate" value="2017-03-13"/>
End Date: <input type="text" id="endDate" value="2017-03-13"/>

当我为该开始日期和结束日期添加 datepicker 和一些验证时，验证不适用于 html 代码中给出的默认值，我怎样才能使开始日期和结束日期验证适用于日期在 html 值中也给出了。

$(document).ready(function() {

  $("#startDate").datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  }).bind("change", function() {
    var minValue = $(this).val();

    minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
    minValue.setDate(minValue.getDate() + 1);
    $("#endDate").datepicker("option", "minDate", minValue);

  });

  $("#endDate").datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true

  }).bind("change", function() {

    var maxValue = $(this).val();
    maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
    maxValue.setDate(maxValue.getDate() - 1);
    $("#startDate").datepicker("option", "maxDate", maxValue);

  });

  $(".ui-datepicker").css({
    "font-size": "12px"
  });

  $("#startDate").keydown(function(e) {
    e.preventDefault();
  });

  function validateQty(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode == 8 || event.keyCode == 46 ||
      event.keyCode == 37 || event.keyCode == 39) {
      return true;
    } else if (key < 48 || key > 57) {
      return false;
    } else return true;
  };

});

<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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


</head>
<body>
Start Date: <input type="text" id="startDate" value="2017-03-13"/>
End Date: <input type="text" id="endDate" value="2017-03-23" onkeypress='return validateQty(event);'/>
<input type="submit"/>
</body>
</html>

我已经添加了如下的jsfiddle代码：[在此处输入链接描述][1]

https://jsfiddle.net/Manishankarg/ncgg8t9x/1/

【问题讨论】：

您的链接将我带到jsfiddle.net的主页。
请立即查看。
所以，我删除了很多重复的代码，并同时应用了 prevent 默认值。那是你想要的吗？ jsfiddle.net/nfnneil/ncgg8t9x/4
太好了，您将我的代码减少了一半，谢谢，但我的问题是您提供的验证第一次不起作用，即..，每当您运行应用程序时，如果您检查开始日期，日期选择器应限制用户添加的时间不超过结束日期。

标签： jquery html validation jquery-ui datepicker

【解决方案1】：

所以，我发现了代码的问题。您没有检查页面首次加载的时间。我修复了选择区域的代码。所以，这是新版本。我在页面加载时调用了输入事件，这样我们就可以立即运行我们的验证脚本。

https://jsfiddle.net/nfnneil/ncgg8t9x/6/

$(document).ready(function() {

  $("#startDate, #endDate").datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  }).bind("change", function() {
    if ($(this).is("#startDate")) {
      var minValue = $(this).val();
      minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
      minValue.setDate(minValue.getDate() + 1);
      $("#endDate").datepicker("option", "minDate", minValue);
    } else {
      var maxValue = $(this).val();
      maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
      maxValue.setDate(maxValue.getDate() - 1);
      $("#startDate").datepicker("option", "maxDate", maxValue);
    }
  });

  $(".ui-datepicker").css({
    "font-size": "12px"
  });

  $("#startDate, #endDate").keydown(function(e) {
    e.preventDefault();
  });
  $("#startDate, #endDate").trigger("change");

});

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

Start Date: <input type="text" id="startDate" value="2017-03-13"/>
End Date: <input type="text" id="endDate" value="2017-03-23" onkeypress='return validateQty(event);'/>
<input type="submit"/>

【讨论】：

感谢您的帮助，您发送的代码运行良好。