javascript - 在数据列表中重复jquery datepicker

标签 javascript jquery asp.net datepicker

我有jquery日期选择器工作,但它只适用于数据列表的第一个框。我在让日期选择器在数据列表的所有文本框中工作时遇到问题。

这是我的 asp.net 网站顶部的内容,就在 <head> 之后

</head>

<body oncontextmenu="return false" onload="PageLoad()">


<form id="form1" runat="server" >



<asp:ScriptManager ID="sm1" runat="server" />


    <link rel="stylesheet" href="../development-bundle/themes/base/jquery.ui.all.css">
<script  src="../development-bundle/jquery-1.10.2.js"></script>
<script  src="../development-bundle/ui/jquery.ui.core.js"></script>
<script  src="../development-bundle/ui/jquery.ui.widget.js"></script>
<script  src="../development-bundle/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../development-bundle/demos/demos.css">

<script type="text/javascript">
$(function () {

   $("#datepicker").datepicker();



});



</script>

这是我如何在数据列表中调用日期选择器

                        <asp:Panel ID="Panel3" runat="server" ><span style="background-color: #">
                            <asp:DataList ID="DataList2" runat="server" CellPadding="2"  oncancelcommand="DataList2_CancelCommand" 
                                onupdatecommand="DataList2_UpdateCommand" RepeatDirection="Horizontal" 
                                Width="400px" ForeColor="Black" BackColor="LightGoldenrodYellow" 
                                BorderColor="Tan" BorderWidth="1px" EnableTheming="False">
                                <AlternatingItemStyle BackColor="PaleGoldenrod" Width="400px" />
                                <EditItemStyle Width="400px" />
                                <FooterStyle BackColor="Tan" Width="400px" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" 
                                    Width="400px" />
                                <ItemStyle Width="400px" Wrap="True" />
                                <ItemTemplate>



                                            Date: <input type="text" id="datepicker"/>


                                </ItemTemplate>
                                <SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" 
                                    Width="350px" />
                            </asp:DataList>
                            </span>


                        </asp:Panel>
                    </asp:Panel>
                    <span style="background-color: #">

数据列表中有更多属性,但我已删除它们以避免混淆。

请帮忙。谢谢

最佳答案

这里的第一个问题是您使用控制 ID,该 ID 位于中继器内并且是变化的。要捕获所有日期输入控件,您可以为它们分配一个类,然后将日期选择器应用于具有此类的所有控件。所以 html 代码将是:

<ItemTemplate>
    Date: <input type="text" id="datepicker" class="mydate" />
</ItemTemplate>

第二个问题是您需要在每次 UpdatePanel 更新时运行此代码,因此不要使用 jQuery 运行,而是使用 UpdatePanel 函数在更新和启动时运行

<script> 
   function pageLoad(){ $(".mydate").datepicker(); }  
</script>

同时从表单中删除此声明onload="PageLoad()"

关于javascript - 在数据列表中重复jquery datepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22450597/

相关文章:

javascript - AngularJs - 如何使用私有(private)方法编写可测试的 Controller

javascript - 如何在 angularjs 中添加至今的月份?

javascript - Dropzone 跨平台缩略图生成

javascript - 单击幻灯片更改时延迟动画

javascript - 使用 Javascript 从一个 div 获取信息到另一个 div

c# - SignalR 2.0 .NET 控制台客户端

asp.net - IIS 7 : Redirect all request to Default. aspx

javascript - 在两个动态实例化的指令之间共享作用域变量

javascript - 动态更改 keyup 上的按钮属性

mysql - 解析 web.config 时出现配置错误