I am using multiple instances of the jquery datepicker on my form. Due to my CSS i could not use the icon trigger built-into jquery, it caused the icon to be displayed below the input field and i wanted it to be displayed next to the text. Below is the code for one of my input fields.
In order to overcome the icon issue i decided to have the datepicker trigger on a regular image tag.
<label for="received_date" class="date">Received Date <img src="scripts/calendar.gif" alt="Show Calendar" class="DP_img" id="received_date_cal_image" name="received_date_cal_image"/>
<cfinput type="text" name="received_date" id="received_date" class="date_field" onChange="valDate(this.name)" alt="Textbox to enter received date" tooltip="Textbox to enter received date"/> </label>
I have multiple date fields i want to use the datepicker with. The issues i am having are; 1. when i click on the icon to display the datepicker, the picker is displayed, but it displays on the wrong icon. No matter what icon i click on it always gets displayed on only one and it is always the same one. Each field has its own unique name and id the only thing that each field shares is a class. I can't seem to figure out how to fix this. My other issue is that when i click on the icon the page scrolls to the top, so if i am clicking on a picker icon at the bottom of the screen it scrolls the screen to the top.
Any help would be appreciated.