ASP.Net MVC bootstrap-datepicker not working

Question

Have scoured Google for a solution but the closest I could find (Bootstrap Datepicker Not Working) doesn't resolve the issue.

AFAIK, I'm loading the necessary JS and CSS references:

<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<link rel=" stylesheet" href="~/Content/bootstrap-theme.css">
<link rel=" stylesheet" href="~/Content/datepicker.min.css">
<link rel=" stylesheet" href="~/Content/bootstrap-datepicker3.min.css">

In my view, I have the following HTML input:

<input type="text" id="datepicker" data-provide="datepicker" class="form-control datepicker" />

And I have this simple Javascript at the end of my view code:

<script type="text/javascript">
    $(function() {
        $('#datepicker').datepicker({
            autoclose: true,
            format: 'mm/dd/yyyy',
            orientation: "bottom auto",
            daysOfWeekDisabled: "0,6",
            todayHighlight: true
        });
    });
</script>

But for some reason, the datepicker doesn't show up.

Curiously, if I remove input id="datepicker" then the datepicker shows up and I am able to select dates and see them reflected in the input textbox (meaning it's using the class datepicker to bind, but why is it using #id notation?) HOWEVER, when doing this the options aren't being rendered, i.e., days 0 and 6 aren't being ignored, the position of the datepicker dropdown isn't at the bottom of the input element, today isn't highlighted and it doesn't "autoclose" on date selection.

Help?

By the way, no errors in my Console when checking developer tools in Chrome. — illya
Hmm. I was pretty sure data-provide autosets the options based on other data- attributes, but I guess not. Do you have to have a JSFiddle set up for this? That would help with the debugging. Also, which library is this? eternicodes or eonasdan? Or some other one? — Tim Lewis

illya illya · Accepted Answer · 2015-06-30T19:20:24

Decided to straight-copy the code from the JSFiddle linked to here: bootstrap datepicker option doesn't seem work (datepicker by vitalets) and it works now. Turns out it didn't like the orientation:" option, removing that resolved the problem. Not sure why that doesn't work though.

ASP.Net MVC bootstrap-datepicker not working

1 Answers