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

【问题标题】：jQuery DatePicker and .NET- one calendar control but multiple instances on one .aspx pagejQuery DatePicker 和 .NET - 一个日历控件，但一个 .aspx 页面上有多个实例
【发布时间】：2009-02-04 18:18:27
【问题描述】：

场景：我有一个包含多个可折叠面板的 .aspx 页面。每个面板代表不同的报告。要运行报告，请单击面板，然后会出现报告的用户控件。我创建的日期范围控件可以包含在多个面板“内”。

下面的代码在多面板实例中不起作用。它将所有“to date”文本框设置为等于开始日期，而不仅仅是活动面板的“to date”文本框。

如何仅使用已展开的面板中的文本框？

感谢您的帮助！

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

【问题讨论】：

标签： asp.net jquery

【解决方案1】：

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

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

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

我不知道您的实际 HTML 结构，因此您可能需要更改发现兄弟姐妹的方式，但希望您能理解。

【讨论】：

【解决方案2】：

您需要更加了解您的选择器语法。我看到您正在使用每个字段的 id - 这是 ASP.Net UniqueID 的缩写吗？因为这绝对不是它的样子。

与其手动查找 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);
    });
  });
});

【讨论】：