如何在ASP.Net中獲得多個datepicker？

Question

   <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，但是沒有運氣。 如何使用此代碼以相同的形式獲取兩個日期選擇器？

Answer 1

您可以將一個類分配給要用作日期選擇器的文本框。 然后，在jQuery選擇器中，按類而不是ID獲取元素。

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

$(".DynDatePicker").dynDateTime

Answer 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日期標記每個文本框，然后像這樣綁定datepicker

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

這適用於選擇器結果中的每個元素。

Answer 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" />