在datalist中重复jquery datepicker

时间:2014-03-17 09:23:51

标签: javascript jquery asp.net datepicker

我有jquery日期选择器工作,但它只适用于datalist的第一个框。我有问题让datepicker工作在datalist的所有文本框。

在我的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>

这是我如何在datalist中调用datepicker

                        <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: #">

datalist中有更多属性,但我删除了它们以避免混淆。

请帮忙。感谢

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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