jQuery DatePicker和.NET-一个日历控件，但在一个.aspx页面上有多个实例

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.

场景:我有一个包含多个可折叠面板的.aspx页面。每个小组代表不同的报告。要运行报告,请单击面板,将显示报告的用户控件。我创建的日期范围控件可以包含在“多个”面板中。

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

2 个解决方案

#1

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

首先,您不应该对任何存在多次的html元素使用ID,而是使用类来识别重复元素。

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.

要回答您的问题,您需要使用$(this)指向click事件来自的特定元素。然后,您可以通过询问其兄弟来简单地查询调用事件的日期选择器。

$(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.

我不知道你的实际HTML结构,所以你可能不得不改变兄弟姐妹的发现方式,但希望你能得到这个想法。

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

您需要使用选择器语法获得更多相对。我看到你正在使用每个字段的id - 这是否缩短了ASP.Net的UniqueID?因为那绝对不是它的样子。

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

不是手动查找id,而是让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);
    });
  });
});

#1