I have a number of inputs on a page function as JQ UI datepicker. Each needs to have different settings. I want to minimize the JS so I save the settings as an attribute in each individual .

<input type="text" class="datepicker" name="dateofbirth" id="dateofbirth" size="20" value="" options="{ dateFormat: 'yy-mm-dd',changeYear: true,yearRange: '1920:2010'}" />

<input type="text" class="datepicker" name="expdate" id="expdate" size="20" value="" options="{ yearRange: '2011:2020'}" />

I use js to load the options dynamically as the settings.

    $(document).ready(function(){
 $(".datepicker").each(function(index){
  $(this).datepicker("option" , $(this).attr('options'));
 });
});

datepicker is not functioning. If I empty the parentheses after $this.datepicker it works fine.

I have also tried another way to assign settings. ("option",...) no dice.

I have a number of inputs on a page function as JQ UI datepicker. Each needs to have different settings. I want to minimize the JS so I save the settings as an attribute in each individual .

<input type="text" class="datepicker" name="dateofbirth" id="dateofbirth" size="20" value="" options="{ dateFormat: 'yy-mm-dd',changeYear: true,yearRange: '1920:2010'}" />

<input type="text" class="datepicker" name="expdate" id="expdate" size="20" value="" options="{ yearRange: '2011:2020'}" />

I use js to load the options dynamically as the settings.

    $(document).ready(function(){
 $(".datepicker").each(function(index){
  $(this).datepicker("option" , $(this).attr('options'));
 });
});

datepicker is not functioning. If I empty the parentheses after $this.datepicker it works fine.

I have also tried another way to assign settings. ("option",...) no dice.

• javascript
• jquery
• datepicker

Share Improve this question Follow edited Sep 15, 2017 at 12:18 anatol 78799 silver badges1616 bronze badges asked Jan 6, 2011 at 3:29 Desmond LiangDesmond Liang 2,31044 gold badges2626 silver badges3333 bronze badges 2

• In fact, the specification w3c attribute options do not exist, you tried to substitute other attributes, such as @ title or @ alt, which unfortunately is also not used in the tags input? – Zhasulan Berdibekov Commented Jan 6, 2011 at 3:56
• 1 man.. if it does not exist that doesnt mean you cant add it. adding the attr is perfectly fine there.. – Baz1nga Commented Jan 6, 2011 at 4:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Try this

$(this).datepicker(eval('(' + $(this).attr('options') + ')'));

Or use a json parser http://www.json/js.html

essentially your are doing this:

$(document).ready(function(){
    $(".datepicker").each(function(index){
        $(this).datepicker("option" , "{ dateFormat: 'yy-mm-dd',changeYear: true,yearRange: '1920:2010'}" );
    });
});

when you need to be doing either

$(document).ready(function(){
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd',changeYear: true,yearRange: '1920:2010'});
});

or this

$(document).ready(function(){
    $(".datepicker").datepicker();
    $(".datepicker").datepicker("option" , "dateFormat", 'yy-mm-dd');
    $(".datepicker").datepicker("option" , "changeYear", true);
    $(".datepicker").datepicker("option" , "yearRange", '1920:2010');
});

The first solution initiates the datepicker with a set of options, while the second solution initiates a datepicker, and then sets individual options. Your version was trying to be some hybrid of the two, and tried to use a string instead of an object literal encased in curly brackets.

Instead of using eval (which is evil, btw) you can use $.parseJSON like this:

$(this).datepicker( "option" , $.parseJSON( $(this).attr('options')) );

However, you should be careful to have valid JSON string.