JQuery datepicker yearrange

Question

I have 2 datepickers like this

<input type="text" class="datepicker" data-year-range="2010:2016"/>
<input type="text" class="datepicker" data-year-range="2000:2020"/>

I need to define yearRangefor 2 datepickers in the configuration. So, I liked it.

$('.datepicker').datepicker({
    changeYear: true,
    // $(this) isn't working here
    //yearRange : $(this).attr('data-year-range'),
    yearRange : $('.datepicker').attr('data-year-range')
});

But it only accepts 2010:2016for two datpikers. I do not understand why. The idea is to use different date ranges for datepickers. Is it possible, or do I need to define different datepikers?

Also, can datepickers be added yearRangeto html instead of datepicker configuration?

Here is the fiddle

Answer 1

You can do it as follows:

https://jsfiddle.net/m5fvc22f/16/

$(document).ready(function() {
     $('.datepicker').each(function() {
       $(this).datepicker({
         changeYear: true,
         yearRange: $(this).data('year-range'),
       });
     })
   })

Answer 2

: $(this) $('.datepicker')

$('.datepicker').each(function(){
    $(this).datepicker({
        changeYear: true,
        yearRange : $(this).data('year-range')
    });
});

JSFiddle Demo