Jquery UI Datepicker MVC 4 Doesn't work C#

Question

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.

Can you elaborate on how your code "doesn't work"? What were you expecting, and what actually happened? If you got an exception, post the line it occurred on and the exception details. — gunr2171
– gunr2171, Commented Aug 14, 2014 at 19:49
what happens if you load jquery.js first? That should set you right. — Jonesopolis
– Jonesopolis, Commented Aug 14, 2014 at 19:53
It works, Thanks Jonesy! If you add that as an answer I will put it as an answer — Izekid
– Izekid, Commented Aug 14, 2014 at 19:56

gunr2171 · Accepted Answer · 2014-08-14 20:24:10Z

2

jQuery UI is built on top of jQuery, so make sure you reference jQuery first.

edited Aug 14, 2014 at 20:24

gunr2171

17.7k26 gold badges68 silver badges102 bronze badges

answered Aug 14, 2014 at 19:58

Jonesopolis

25.4k12 gold badges72 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery UI Datepicker MVC 4 Doesn't work C#

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related