Question

I’d like to use a “data-dateformat” attribute to set the dateformat option of a jQueryUI Datepicker

so I can do this on my page

<input name="t1" type="text" class="datepicker" data-dateformat="MM YY"> 
<input name="t2" type="text" class="datepicker" data-dateformat="DD MM y">

and the datepicker will use the correct format

I tried

 $( ".datepicker" ).datepicker({
                  dateFormat: $(self).attr('data-dateformat') 
               });

but that doesn’t work.

Is there some way to do that ?

Answer 1

Your self value will not have the proper scope for individual elements. You need to loop over each datepicker.

Try this:

$(".datepicker").each(function(){
    var $this = $(this);
    $this.datepicker({
       dateFormat: $this.attr('data-dateformat')
    });
});

You can also use the jQuery data method.

$(".datepicker").each(function(){
    var $this = $(this);
    $this.datepicker({
       dateFormat: $this.data('dateformat')
    });
});