<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 />
So this code I'm using is to get datepicker to work on ASP.Net. But the problem is if I want more than one textbox to contain a datepicker in one form it wont work. I've tried coping the code and changing Textbox1 to Textbox2 but no luck. How can I get two datepickers in the same form using this code?
You can assign a class to the textboxes you want to be datepickers. Then in your jQuery selector, you get the elements by class instead of ID.
<asp:TextBox ID="TextBox1" runat="server" CssClass="DynDatePicker" />
<asp:TextBox ID="TextBox2" runat="server" CssClass="DynDatePicker" />
$(".DynDatePicker").dynDateTime
I don't know about dynDateTime, but the regular jquery datepicker will work off of any jQuery selector.
So you could put a datepicker on and input with a type=date like this if you are using Html5 datatypes
jQuery("input[type=date]")
.datepicker({ dateFormat: "m.d.yy", changeYear: true, yearRange: "-4:+0" })
.attr("type", "text");
or tag each textbox with a CssClass date and then bind the datepicker like this
jQuery("input[type=text].date")
.datepicker({ dateFormat: "m.d.yy", changeYear: true, yearRange: "-4:+0" })
.attr("type", "text");
And this works on every element in the selector results.
When calling the date picker use a class as the method of selection eg class="datepicker" rather than id as id require unique naming but classes can be reused.
$(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()"
});
});
Now assign the class to each text input you wish to display a date picker eg
<input type="text" class="datepicker" id="date1" />
<input type="text" class="datepicker" id="date2" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.