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 ?

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 ?

• javascript
• jquery
• jquery-ui

• 1 What is self? Where do you assign it? Are you expecting it to be the input element? – loganfsmyth Commented Nov 2, 2012 at 4:13

2 Answers 2

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')
    });
});

you can try this may work

$( ".datepicker" ).datepicker({
              dateFormat: $(this).data('dateformat') 
});