Jquery datepicker issues

JavaScript
1

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.

<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>

In order to overcome the icon issue i decided to have the datepicker trigger on a regular image tag.

$(function() {
	$('.DP_img').click(function(){ 
		$('.date_field').focus().datepicker({
			changeMonth:true,
			changeYear:true,
			yearRange: '-110:+40'		  
		});
		
	});
});

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.

2

You are running the click function on the class, so it would affect all elements with that class.

You are probably going to need to setup different click functions for each element id.

3

I had to use the click function so that i could use the img tag as the trigger. Would there be anyway to get around this? i don’t want to have to create new functions for each element ID.

Thanks