SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jquery datepicker issues

    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.

    HTML Code:
    <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.

    Code:
    $(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. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •