views:

258

answers:

2

I have a rather frustrating problem where the maximum number of available DatePicker's on one page seems to be twenty. I can't find any documentation referring to this.

If I had a page with 100 text boxes, and did the following:

$(document).ready(function() {
    $(".datepicker").datepicker({ duration: '', dateFormat: 'dd/mm/yy' });
});

Then the first 20 text boxes have the DatePicker, however, when you select an input box after that the DatePicker pops up against the twentieth input box for a date.

This is being done under IE7. Any ideas?

+1  A: 

I tested the following code under Firefox 3 on Ubuntu, and all of the text boxes had a DatePicker associated with it. IMHO there shouldn't be any limit. Could you test my code on your setup and see if it works ?

<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='date.js'></script>
<script type='text/javascript' src='jquery.datePicker.js'></script>
<link rel='stylesheet' type='text/css' href='datePicker.css' />
</head>
<body>
<form>
<input type='text' class='asdf' name='test1' id='text1' />
<input type='text' class='asdf' name='test2' id='text2' />
<input type='text' class='asdf' name='test3' id='text3' />
<input type='text' class='asdf' name='test4' id='text4' />
<input type='text' class='asdf' name='test5' id='text5' />
<input type='text' class='asdf' name='test6' id='text6' />
<input type='text' class='asdf' name='test7' id='text7' />
<input type='text' class='asdf' name='test8' id='text8' />
<input type='text' class='asdf' name='test9' id='text9' />
<input type='text' class='asdf' name='test10' id='text10' />
<input type='text' class='asdf' name='test11' id='text11' />
<input type='text' class='asdf' name='test12' id='text12' />
<input type='text' class='asdf' name='test13' id='text13' />
<input type='text' class='asdf' name='test14' id='text14' />
<input type='text' class='asdf' name='test15' id='text15' />
<input type='text' class='asdf' name='test16' id='text16' />
<input type='text' class='asdf' name='test17' id='text17' />
<input type='text' class='asdf' name='test18' id='text18' />
<input type='text' class='asdf' name='test19' id='text19' />
<input type='text' class='asdf' name='test20' id='text20' />
<input type='text' class='asdf' name='test21' id='text21' />
<input type='text' class='asdf' name='test22' id='text22' />
</form>
<script type="text/javascript">

$(document).ready(function() {
    $(".asdf").datePicker({ duration: '', dateFormat: 'dd/mm/yy' });
});

</script>
</body>
</html>
Wookai
I doubt it's a problem under Firefox. Might be an IE7 issue, after all, the animation doesn't work correctly under IE7 for them anyway.
Kezzer
A: 

The code is subject to NDA (not as in secret service NDA, as in, it's work-related NDA ;) ) so I can't show the ACTUAL code, however I can say that it's part of an XSLT page which auto-generates the fields.

I have an input like so

<input class="datepicker" name="{UNIQUE}-date" type="text" />
<a href="javascript:MyFunctionCall('linktype', '{UNIQUE}')">go</a>

This way, on a form submit I know the unique field once I post-fix it with the "-date" identifier and can get the data back from the HTML input field. The MyFunctionCall just submits two form values, that way in my code I can check for a form value of "linktype", that way I know what to do with that form submit. It's a little hack to differentiate between different types of form submit within the same form.

As shown before:

$(document).ready(function() {
  $(".datepicker").datepicker({ duration: '', dateFormat: 'dd/mm/yy' });
});

This way it gets all of the inputs which have that class type.

EDIT As I say, this is against many fields, about 100 altogether.

Kezzer