jQuery DatePicker и .NET - один элемент управления календаря, но несколько экземпляров на одной странице .aspx

Question

Сценарий: у меня есть страница .aspx, содержащая несколько складных панелей. Каждая панель представляет отдельный отчет. Чтобы запустить отчет, щелкните панель, и появятся пользовательские элементы управления отчетом. Элемент управления диапазоном дат, который я создал, может содержаться «внутри» нескольких панелей.

Код ниже не работает в случае нескольких панелей. Он устанавливает все текстовые поля «на дату» равными дате начала, а не просто текстовое поле активной даты «на дату».

Как мне работать только с текстовыми полями на развернутой мной панели?

Спасибо за вашу помощь!

<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

Во-первых, вы не должны использовать идентификаторы для любого HTML-элемента, который существует более одного раза, вместо этого используйте классы для идентификации повторяющихся элементов.

Чтобы ответить на ваш вопрос, вам нужно использовать $ (this), чтобы указать конкретный элемент, из которого происходит событие click. Затем вы можете просто запросить средство выбора даты, из которого вызывается событие, запросив его родного брата.

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

Я не знаю вашу фактическую структуру HTML, поэтому вам, возможно, придется изменить способ обнаружения братьев и сестер, но, надеюсь, вы поймете эту идею.

Answer 2

Вам нужно немного приблизиться к синтаксису селектора. Я вижу, вы используете идентификатор каждого поля - это сокращено от ASP.Net UniqueID? Потому что это определенно не так, как это будет выглядеть.

Вместо того, чтобы вручную искать идентификатор, пусть ASP.Net сделает из него то, что будет, и найдет их способом jQuery:

$(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);
    });
  });
});