javascript - 如何在 jQuery datepicker 中仅验证一年的日期

Question

我想在一年内验证月份和日期，并且我创建了只允许一年的日期，但它没有经过验证。

例如

我在一年内创建，当前日期是 2019 年 7 月 11 日，我可以允许选择 2020 年 7 月 11 日之前的日期，这就是我创建的工作正常.. 但如果我手动输入某个日期，则允许。例如：如果我输入（手动输入）2022 年 1 月 1 日，它允许..我不想允许超过 1 年的日期..如何验证这一点？

希望我的问题是理解..

示例小提琴在这里..

小提琴在这里..

示例代码在这里..

$(document).ready(function() {
  $('#vochDate, #refdate').datepicker({
    dateFormat: "dd/mm/yy",
    maxDate: '1y',
    minDate: "-10m"
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<div class="form-group col-4 rfdate">
  <label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
  <div class="input-group vcdate datepic" id="vocdate">
    <input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
    <span class="input-group-addon">
       <i class="glyphicon glyphicon-calendar"></i>
     </span>
  </div>
</div>

标签： javascriptjquery

Answer 1

我对您的代码进行了更改，请参见下面的答案。

$(document).ready(function() {
  $('#vochDate, #refdate').datepicker({
    dateFormat: "dd/mm/yy",
    maxDate: '1y',
    minDate: "-10m"
  });
    
  $(document).on( ' input change', '#vochDate', function(){
      $('.err').remove();
     	const nr_years = 1;
     	var maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + nr_years));
        var curDate = $(this).datepicker("getDate");
        if (curDate > maxDate) {
            //alert("invalid date");
            $('#vochDate').after('<span class="err"> Invalid Date </span>');
            $(this).datepicker("setDate",  new Date());
            
        }
         
   })
});

.err {
color : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<div class="form-group col-4 rfdate">
  <label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
  <div class="input-group vcdate datepic" id="vocdate">
    <input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-calendar"></i>
    </span>
  </div>
</div>