如何在 ASP.Net 中获得多个日期选择器？答案

【问题标题】：How to get more than one datepicker in ASP.Net?如何在 ASP.Net 中获得多个日期选择器？
【发布时间】：2017-04-13 15:06:02
【问题描述】：

   <link href="Styles/calendar-blue.css" rel="Stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H : %m",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleclick: false,
            displayarea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<div>
<fieldset class="borrowing">
    <legend>Borrowing</legend>
    <asp:Label ID="Label5" runat="server" Text="Loan Date" Font-Bold=true></asp:Label>
    <br />
    <asp:TextBox ID="TextBox1" runat="server" Width="193px" Height="25px"></asp:TextBox>
    <img src="Images/Images/calender.png" />
         <%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ControlToValidate="TextBox1" ErrorMessage="Loan Date Required"></asp:RequiredFieldValidator>--%>
    <br />
    <asp:Label ID="Label6" runat="server" Text="Due Date" Font-Bold=true></asp:Label>
    <br />
     <asp:TextBox ID="TextBox2" runat="server" Width="193px" Height="25px"></asp:TextBox>
    <img src="Images/Images/calender.png" />
      <%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ControlToValidate="TextBox2" ErrorMessage="Due Date Required"></asp:RequiredFieldValidator>--%>
    <br />

所以我使用的这段代码是让 datepicker 在 ASP.Net 上工作。但问题是，如果我想要多个文本框以一种形式包含日期选择器，它将无法正常工作。我已经尝试处理代码并将 Textbox1 更改为 Textbox2 但没有运气。如何使用此代码以相同的形式获取两个日期选择器？

【问题讨论】：

不是按ID查找元素，而是按类查找元素呢？
抱歉，这是什么意思？我真的是 asp.net 的新手，这是课堂作业。只想在一种形式中有两个日期选择器。
将一个类分配给 TextBox1（通过在控件上设置 CssClass 属性）和您想要的任何其他文本框。然后，您将使用 $(".TheClassName") 而不是 $("#<%=TextBox1.ClientID %>")
嘿抱歉，我不知道该怎么做。我用包括 textbox1 和 textbox2 在内的其余代码更新了我的原始帖子。任何帮助都会非常有用。

标签： c# asp.net datepicker

【解决方案1】：

您可以为要成为日期选择器的文本框分配一个类。然后在您的 jQuery 选择器中，您按类而不是 ID 获取元素。

<asp:TextBox ID="TextBox1" runat="server" CssClass="DynDatePicker" />
<asp:TextBox ID="TextBox2" runat="server" CssClass="DynDatePicker" />

$(".DynDatePicker").dynDateTime

【讨论】：

非常感谢。这成功了。谢谢大家的回复！

【解决方案2】：

我不知道 dynDateTime，但是常规的 jquery datepicker 可以使用任何 jQuery 选择器。

因此，如果您使用 Html5 数据类型，您可以打开日期选择器并输入 type=date 这样的类型

jQuery("input[type=date]")
    .datepicker({ dateFormat: "m.d.yy", changeYear: true, yearRange: "-4:+0" })
    .attr("type", "text");

或用 CssClass 日期标记每个文本框，然后像这样绑定日期选择器

jQuery("input[type=text].date")
    .datepicker({ dateFormat: "m.d.yy", changeYear: true, yearRange: "-4:+0" })
    .attr("type", "text");

这适用于选择器结果中的每个元素。

【讨论】：

【解决方案3】：

当调用日期选择器时，使用类作为选择方法，例如class="datepicker" 而不是 id 作为 id 需要唯一命名，但类可以重复使用。

$(document).ready(function () {
    $(".datepicker").dynDateTime({
        showsTime: true,
        ifFormat: "%Y/%m/%d %H : %m",
        daFormat: "%l;%M %p, %e %m, %Y",
        align: "BR",
        electric: false,
        singleclick: false,
        displayarea: ".siblings('.dtcDisplayArea')",
        button: ".next()"
    });
});

现在将类分配给您希望显示日期选择器的每个文本输入，例如

<input type="text" class="datepicker" id="date1" />
<input type="text" class="datepicker" id="date2" />

【讨论】：