DatePicker not displaying properly in Bootstrap ASP.NET MVC 5

Question

I have a date picker in my form and it is not displaying properly in any browser

<div class="col-md-10">
    @Html.TextBoxFor(model => model.DateJoined, new { @class = "datepicker" })
    @Html.ValidationMessageFor(model => model.DateJoined)
</div>

I have added jquery UI and added Javascript like this:

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
    $(function () { // will trigger when the document is ready
        $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

And this is how it is displaying in UI:

enter image description here

could u please tell me the necessary css for this datepicker — praga2050
– praga2050, Commented Jun 15, 2014 at 9:32

Shaunak D · Accepted Answer · 2014-08-28 08:19:56Z

2

Demo

JQuery UI

You need to include following files

//css file jQuery UI
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

//jQuery file js reference.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

//jQuery UI js reference.
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

edited Aug 28, 2014 at 8:19

answered Jun 15, 2014 at 9:45

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

3 Comments

user3525511 Over a year ago

Dead link. Doesn't add value to this question at all.

Shaunak D Over a year ago

How is it dead? Its a working demo for datepicker. As the problem was just with the css files.

user3525511 Over a year ago

Link working now, but you should at least add some context from the page because it could go down permenently. adding the +1 back.

Beau · Accepted Answer · 2020-06-22 20:50:37Z

0

In the App_Start/Bundle.config

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css",
                      "~/Content/jquery-ui.css"));

answered Jun 22, 2020 at 20:50

Beau

992 silver badges5 bronze badges

Collectives™ on Stack Overflow

DatePicker not displaying properly in Bootstrap ASP.NET MVC 5

2 Answers 2

Demo

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related