I am trying to make a input field for the users birthday. For this I would like them to only select years in the past.

How do I achieve this? I tried entering a negative number in the selectYears property but no luck.

JSFIDDLE

HTML:

<div class="col s12">
   <label for="birthday">Birthday</label>
   <input id="birthday" value="{{ user.birthday }}" type="date" name="birthday" class="datepicker">
</div>

JavaScript:

$('.datepicker').pickadate(
{
   selectMonths: true,
   selectYears: -100
});

I am trying to make a input field for the users birthday. For this I would like them to only select years in the past.

How do I achieve this? I tried entering a negative number in the selectYears property but no luck.

JSFIDDLE

HTML:

<div class="col s12">
   <label for="birthday">Birthday</label>
   <input id="birthday" value="{{ user.birthday }}" type="date" name="birthday" class="datepicker">
</div>

JavaScript:

$('.datepicker').pickadate(
{
   selectMonths: true,
   selectYears: -100
});

• javascript
• html
• datepicker
• materialize

2 Answers 2

var d = new Date();
d.setFullYear( d.getFullYear() - 100 );
$('.datepicker').pickadate(
{
   selectMonths: true,
   selectYears: d,
   max: new Date()
});

This will actually give full list of 100 past years.

This is how you set the year:

var d = new Date();
d.setFullYear( d.getFullYear() - 100 );
$('.datepicker').pickadate(
{
   selectMonths: true,
   selectYears: true,
   min: d,
   max: new Date()
});

http://jsfiddle/rpu61tf2/3/

You set selectYears: true when you want to allow your users to select the years from a drop down