Javascript JQuery DatePicker捆绑控件可以'；不包括在其他控制中

我的任务是为我们的web项目的几个区域实现一个日期/时间选择器，并指示使用另一个开发人员创建的控件作为它的一部分。我正在使用的控件应该允许用户从日历中选择日期，选择该日期的显示格式（从几种预定义格式，或使用简单的文本覆盖）和可选的时间字符串（实际上只是自由格式的文本）

指示我使用的控件记录在这里：，并使用jQuery中的DatePicker

在我实现并测试了我的控件之后，我开始将它集成到需要日期和/或时间输入的页面中。在对这些实现的测试中，我发现了一个bug：当我在一个页面上包含控件的多个副本时，只有第一个副本获得jQuery日历。其他人与此无关

我尝试了一个看似相关的问题（标题为“复制jquery datepicker”）中建议的一些方法，例如通过$（“css选择器”）.datepicker（）语法调用西风控件（呈现文本框）上的“.datepicker（）”函数，ASP.NET保证所有文本框的ID都是唯一的

总之，它看起来是这样的：

<page>
  <mycontrol>
   <west-windjQuerycontrol />
  </mycontrol>
  <mycontrol>
   <west-windjQuerycontrol />
  </mycontrol>
</page>

现在，奇怪的是：当页面上有多个西风控件副本，而没有其他用户控件包含它们时，它们工作正常。除了jQuery控件之外，我的控件没有什么特别之处：只是标签、文本框、面板和下拉列表。将West Wind jQuery控件捆绑到用户控件中似乎打破了这一点

有什么建议吗？有一段时间我一直在为这个问题绞尽脑汁，因为我糟糕的javascript技能和对jQuery的接触有限

正如下面指出的，没有HTML很难说。我把它包括在下面

<form name="form1" method="post" action="ControlTest.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU4NjEzMDEwOQ9kFgICAw9kFgQCAw9kFgRmD2QWAgIDD2QWAgIDDxBkZBYBZmQCAg9kFgICAw9kFgICAQ8QZGQWAWZkAgUPZBYEZg9kFgICAw9kFgICAw8QZGQWAWZkAgIPZBYCAgMPZBYCAgEPEGRkFgFmZGRDjfLpdb+XxaVaQYP2XkPil2Galw=="     />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
        }
}
//]]>
</script>


        <script src="/SSO/DE/WebResource.axd?d=jMPpL-KK8_mPj_ssZzGblw2&amp;t=633481894229838141" type="text/javascript"></script>


<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW_lQpnYjRbyIYThTnHtD9rt0&amp;t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW-K0Kuw-pGK1O3mE_r1y3sjKmhHtQjSXeMtYSim0bjyGA2&amp;t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQA86oLdnZPWkwDnu4NKxfG1Ue7qdGG1SbOfb4ooHVs7M1&amp;t=633481957084709567" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQhT3MFELBAa2rFJZXnSlYAZIN7RT1npcBxJRsWGjJWIwTF0Es1m0vOd-xYnFqWJKz0&amp;t=633481957084709567" type="text/javascript"></script>
    <div style="margin:25px 10px;width:100%;">
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('stupidThing',     document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

        <div id="datePicker_Div0" class="AdminRowOdd DERow">
            <div id="datePicker_Div1" class="DELabel">
                <span id="datePicker_DateLabel">Date</span>
            </div>
            <div id="datePicker_Div2" class="DEInput datePicker">
                <input name="datePicker$DateSelector" type="text" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateSelector\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="datePicker_DateSelector" style="width:80px;" />
                <select name="datePicker$languageSelector" onchange="javascript:setTimeout('__doPostBack(\'datePicker$languageSelector\',\'\')', 0)" id="datePicker_languageSelector">
    <option selected="selected" value="en-US">en-US</option>
    <option value="fr-CA">fr-CA</option>
    <option value="fr-FR">fr-FR</option>
    <option value="es-ES">es-ES</option>
    <option value="es-MX">es-MX</option>

</select>
            </div>
        </div>
        <div id="datePicker_Div3" class="AdminRowEven DERow">
            <div id="datePicker_Div4" class="DELabel">
                <span id="datePicker_FormatChoiceLabel">Choose your display format:    </span>
            </div>
            <div id="datePicker_Div5" class="DEInput">
                <select name="datePicker$DateFormatSelector" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateFormatSelector\',\'\')', 0)" id="datePicker_DateFormatSelector">
    <option selected="selected" value="Choose a date first">Choose a date     first</option>

</select>                
            </div>
        </div>
        <div id="datePicker_Div6" class="AdminRowOdd DERow">
            <div id="datePicker_Div7" class="DELabel">
                <span id="datePicker_FormatOverrideLabel">Or enter your own     text</span>
            </div>
            <div id="datePicker_Div8" class="DEInput">
                <input name="datePicker$DateFormatOverride" type="text"     onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateFormatOverride\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;"     id="datePicker_DateFormatOverride" />
            </div>
        </div>

        <br />
        <div id="date1_Div0" class="AdminRowOdd DERow">
            <div id="date1_Div1" class="DELabel">
                <span id="date1_DateLabel">Date</span>
            </div>
            <div id="date1_Div2" class="DEInput datePicker">
            <input name="date1$DateSelector" type="text" onchange="javascript:setTimeout('__doPostBack(\'date1$DateSelector\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="date1_DateSelector" style="width:80px;" />
                <select name="date1$languageSelector" onchange="javascript:setTimeout('__doPostBack(\'date1$languageSelector\',\'\')', 0)" id="date1_languageSelector">
    <option selected="selected" value="en-US">en-US</option>
    <option value="fr-CA">fr-CA</option>
    <option value="fr-FR">fr-FR</option>
    <option value="es-ES">es-ES</option>
    <option value="es-MX">es-MX</option>

</select>
            </div>
        </div>
        <div id="date1_Div3" class="AdminRowEven DERow">
            <div id="date1_Div4" class="DELabel">
                <span id="date1_FormatChoiceLabel">Choose your display format:</span>
            </div>
            <div id="date1_Div5" class="DEInput">
                <select name="date1$DateFormatSelector" onchange="javascript:setTimeout('__doPostBack(\'date1$DateFormatSelector\',\'\')', 0)" id="date1_DateFormatSelector">
    <option selected="selected" value="Choose a date first">Choose a date first</option>

</select>                
            </div>
        </div>
        <div id="date1_Div6" class="AdminRowOdd DERow">
            <div id="date1_Div7" class="DELabel">
                <span id="date1_FormatOverrideLabel">Or enter your own text</span>
            </div>
            <div id="date1_Div8" class="DEInput">
                <input name="date1$DateFormatOverride" type="text" onchange="javascript:setTimeout('__doPostBack(\'date1$DateFormatOverride\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="date1_DateFormatOverride" />
            </div>
        </div>

    </div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWFQLr6MeTCwKb1Zr0AwKVt6utCQKIwaTjAQKdwYzzBwLiwsDhDQKIwdCLBAKHwbCtCgLRr42cCQKi9vj4DgK2lM6kBQLLrsUtAsaboRMC2+2u3QgCzu2GzQ4Cse7K3wQC2+3atQ0C1O26kwMCpdTivwwC1o2X2wsCoubqnQk8I1BK30Q/iVw/rExUww2Cs4bicw==" />
</div>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function() {
var cal = jQuery('#datePicker_DateSelector').datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
} );
Sys.Application.initialize();
//]]>
</script>
</form>

//
//
//
日期
恩美
fr CA
法语
西班牙语
es MX
选择您的显示格式：
先选择一个日期
或者输入您自己的文本


日期
恩美
fr CA
法语
西班牙语
es MX
选择您的显示格式：
先选择一个日期
或者输入您自己的文本
//
如果看不到生成的HTML，很难知道，但我的第一个猜测是您的控件没有将类名直接应用到
字段。。。或者您在某种程度上依赖于
id
s（嵌入用户控件时可能会发生变化）


在您发布的HTML中，以下内容显示为三个相关部分：

块#1（控件：日期选择器）
…或更通用的选择器

      // matches all text input elements that are descendants of 
      // a div element with a class of datePicker
      var cal = jQuery('div.datePicker input:text')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});

…然后事情就会如预期的那样运行。
我解决了问题

服务器控件的OnPreRender（）构建上面的javascript，调用如下，其中sbStartupScript是一个包含生成的javascript的StringBuilder：

sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ID,
sbStartupScript.ToString(), true);

正确的形式应该是：

sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ClientID,
sbStartupScript.ToString(), true);

现在，有了ClientId，脚本名称是唯一的，两者都将呈现。
非常好，我已经包含了HTML。我将检查渲染方法，看看它是否依赖于ID。我怀疑CSS样式的javascript选择会是一个问题，虽然，因为类会被应用，并且嵌套的输入（so“.datepicker input”仍然会在CSS中命中，大概是JS）（编辑后）谢谢！它看起来像是由封装jQuery内容的控件呈现的…并且只有一个呈现被触发。按照您所描述的（页面上的硬编码）替换呼叫按预期工作，因此现在我有一个进入位置。谢谢好的-我已经添加了一些具体的细节来解释为什么你会看到你描述的行为。
      var cal = jQuery('#datePicker_DateSelector')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
      var cal2 = jQuery('#date1_DateSelector')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});

      // matches all text input elements that are descendants of 
      // a div element with a class of datePicker
      var cal = jQuery('div.datePicker input:text')
         .datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});

sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ID,
sbStartupScript.ToString(), true);

sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ClientID,
sbStartupScript.ToString(), true);