jQuery DatePicker and .NET- one calendar control but multiple instances on one .aspx page

Question

Scenario: I have an .aspx page containing multiple collapsible panels. Each panel represents a different report. To run a report, you click a panel and the report's user controls will appear. The date range control I created could be contained "within" more than one panel.

The code below does not work in the multiple panels instance. It sets all of the "to date" text boxes equal to the start date instead of just the active panel's "to date" text box.

How do I only work with the text boxes in the panel I have expanded?

Thanks for your help!

<script type="text/javascript">
  $(document).ready(function(){
    $('#dFrom').datepicker();
    $('#dTo').datepicker();

    $('#dTo').click(function(){
    try{    

        var from = $('#dFrom').datepicker("getDate");

        $('#dTo').datepicker("setDate",from);

        }
        catch(Error)
        {
        alert(Error);
        }
    });
  });

Answer 1

Firstly, you shouldn't be using IDs for any html element that exists more than once, use classes to identify repeating elements instead.

To answer your question, you need to use $(this) to point at the specific element the click event is coming from. You can then simply query the date picker the event is called from by asking for its sibling.

$(document).ready(function(){
    $('.dTo').click(function(){
        var from = $(this).siblings('.dFrom').datepicker("getDate");
        $(this).datepicker("setDate",from);
    });
});

I don't know your actual HTML structure so you may have to alter how the siblings are discovered, but hopefully you get the idea.

Answer 2

You need to get a little more relative with your selector syntax. I see you're using the id of each field -- is this shortened from the ASP.Net UniqueID? Because that's definitely not how it would look.

Rather than manually lookup the id, let ASP.Net make of it what it will and find them the jQuery way:

$(Function() {
  $('input[id$=dFrom]').datepicker();
  $('input[id$=dTo]').datepicker();
  $('.panel').each(function() { //replace with appropriate selector syntax for your panels
    $(this).click(function() {
      var from = $('input[id$=dFrom]',this).datepicker("getDate");
      $('input[id$=dTo]',this).datepicker("setDate",from);
    });
  });
});