I want to include two datepicking windows in my ASP.NET Webpage. I have done everything that stands in the manual but it wont work. Please help!
This is my code :
@model RebeccaAndLudwig.Models.Rsvp
<head>
<title>"Please Answer to our invite"</title>
</head>
<section id="contacts" >
<div class="inner">
<h2>Answer</h2>
<div class="content" style="width:700px; margin-left:auto; margin-right:auto; letter-spacing: 1px; word-spacing:normal;">
<h3>Here you can answer if you will come or not to our wedding, please fill everything out, otherwise we will have problems.</h3>
<div>
<div class="contact-form">
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div style="color:springgreen">
@Html.LabelFor(model => model.FirstName, "First Name:", new { @class = "dob" })
@Html.TextAreaFor(model => model.FirstName, new { style = "width: 1000px; height:50px; overflow:hidden;" })
</div>
<div>
@Html.LabelFor(model => model.LastName, "Last Name:", new { @class = "dob" })
@Html.TextAreaFor(model => model.LastName, new { style = "width: 1000px; height:50px; overflow:hidden;" })
</div>
<div>
@Html.LabelFor(model => model.AttendWedding, "Attend Wedding?:", new { @class = "dob" })
Yes
@Html.RadioButtonFor(model => model.AttendWedding, new { style = "width: 1000px; height:50px; overflow:hidden;" })
No
@Html.RadioButtonFor(model => model.AttendWedding, new { style = "width: 1000px; height:50px; overflow:hidden;" })
</div>
<div>
@Html.LabelFor(model => model.WillStayAtHotel, "Will you stay at the hotel?:", new { @class = "dob" })
Yes
@Html.RadioButtonFor(model => model.WillStayAtHotel, new { style = "width: 1000px; height:50px; overflow:hidden;" })
No
@Html.RadioButtonFor(model => model.WillStayAtHotel, new { style = "width: 1000px; height:50px; overflow:hidden;" })
</div>
<div>
@Html.LabelFor(model => model.HowManyNights, "How Many Nights?:", new { @class = "dob" })
1
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
2
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
3
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
4
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
<br />
5
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
6
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
7
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
8
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
</div>
<div>
@Html.TextBoxFor(model => model.StartDate, "{mm/dd/yyyy}",new {@class="datepicker"})
@Html.TextBoxFor(model => model.EndDate, "{mm/dd/yyyy}",new {@class="datepicker"})
</div>
<div>
<input type="submit" value="submit" formaction="@Url.Action("Perform","Contact")" />
<input type="reset" value="reset" />
</div>
}
</div>
</div>
</div>
</div>
</section>
<link href="~/Scripts/jquery-ui.structure.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.theme.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.theme.min.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/external/jquery/jquery.js"></script>
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
I have tried to use
@{
Layout = null;
}
as I thought maybe it is the styling. But no. Won't make a difference. Doesn't work in Chrome or Firefox.
My problem is
Is get no function on the Datepicker. I see no calendar can't choose any date. I see only a textbox.
jQuery UI is built on top of jQuery, so make sure you reference jQuery first.