Question

我需要验证开始日期和结束日期，如下所示：问题是开始日期和结束日期在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值中给出。

＆＃13;

$(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;
  };

});

＆＃13;

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

＆＃13;

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: