Shammer's Philosophy

My private adversaria

jQuery Calendar doesn't work if multi text boxes in same HTML are using them

I use jQuery calendar input with the way I wrote in this article. It works fine if calendar is used from only one text box, but multi text boxes use calendar input at the same time, only first one shows up the calendar, ant the other text boxes whose id is 'datapicker' don't show up the calendar.

This caused by script. If using multi calendar input in the same HTML, script section should be like below.

<script type="text/javascript">
$(function() {
    $('input').filter('.datepicker').datepicker({});
});
</script>

Then, text box should be like below.

<input type="text" id="DateID1" class="datepicker" name="Day1" />
<input type="text" id="DateID2" class="datepicker" name="Day2" />

It seems:

  • The ID of text box using calendar input should be different each other
  • Script can pick up the text box to use calendar by text box class attribute

The script in the article of my previous article is picking the text box by ID, so only first text box whose ID is "datepicker" was picked up. And the other text boxes don't show up calendar input.
It is likely better to use the way of this article.