CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BillNathan
BillNathan

Reputation: 609

Amsul DatePicker - How to load number of years in a select option?

I'm using Amsul DatePicker: https://amsul.ca/pickadate.js/date/#selectors and I'm unable to find out how can I load the number of required years in the year drop down. By default, it's coming like half the years before the current year and half the year after the current year.

So what I want to achieve is I want to load 150 years back from the current year.

Looking for help.

Thanks

$('.datepicker').pickadate({
  selectYears: 100,
  selectMonths: true,
  min: true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input name="dob" type="text" class="form-control account-field-input datepicker">

Upvotes: 0

Views: 207

Answers (1)

Cray
Cray

Reputation: 2850

Change your initial settings to include min and max dates.

var maxDate = new Date();
var minDate = new Date();
minDate.setFullYear( minDate.getFullYear() - 150 );

$('.datepicker').pickadate({
  min: minDate,
  max: maxDate,
  selectYears: 150,
  selectMonths: true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input name="dob" type="text" class="form-control account-field-input datepicker">

Upvotes: 2

Related Questions