how to validate only one years of dates in jQuery datepicker

Question

I want to validate within one years months and dates, and i created to allow only one year of dates but its not validated.

For example

Im created with in one year, Current date is 7/11/2019, i can allowed to pick date upto 7/11/2020, thats im created working fine.. but if i enter some date in manually its allowed. example: if i enter (type manually) 1/1/2022 its allowed.. i dont want to allow overthan 1 year dates.. how to validate this??

hope my question is understand..

Example Fiddle here..

FIDDLE HERE..

Example code here..

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

try onchage as => stackoverflow.com/questions/11228689/… — Devsi Odedra
– Devsi Odedra, Commented Nov 7, 2019 at 6:06
@DevsiOdedra please check this, its not working maybe - jsfiddle.net/joelshah/s9a1qcLt — Joe
– Joe, Commented Nov 7, 2019 at 6:20
because maxDate is invalid thats why comparison doe not work — Devsi Odedra
– Devsi Odedra, Commented Nov 7, 2019 at 6:29

Devsi Odedra · Accepted Answer · 2019-11-07 07:35:53Z

1

I have change in your code, see below answer.

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

edited Nov 7, 2019 at 7:35

answered Nov 7, 2019 at 6:38

Devsi Odedra

5,3421 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Over a year ago

Great! how can i show error message in html like, invalide date please select valid date like..

Joe Over a year ago

if i select wrong data, error will come okay.. but why the maxDate showing in the field?

Devsi Odedra Over a year ago

if noe max date, then which date you want to put when someone enter wrong date ? And if it helpful then accept so someone who need can refer it.

Joe Over a year ago

if someone enter wrong date, show error and comes to current date

Devsi Odedra Over a year ago

ok , display error and make date field blank or any date to fill ?

Ashikur Rahman · Accepted Answer · 2019-11-07 06:24:11Z

0

Use change event to validate on change. Here you can have a look

$(document).ready(function() {
  $('#vochDate, #refdate').datepicker({
    dateFormat: "mm/dd/yy",
    maxDate: '1y',
    minDate: "-10m"
  });
  $("#vochDate").change(function(){
    if((new Date($("#vochDate").val()).getTime()-new Date().getTime())/(1000*3600*24)>365){
    alert("invalid")
    //
    }
  })
});

answered Nov 7, 2019 at 6:24

Ashikur Rahman

781 silver badge7 bronze badges

Collectives™ on Stack Overflow

how to validate only one years of dates in jQuery datepicker

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related