Visual Studio 2013 MVC - jquery datepicker

Question

I have just begun to create an application in Visual Studio 2013 using MVC. I am trying to use jquery datapicker. I want it to show a datepicker where ever there is a DateTime field. I am creating my controllers using scaffolding (templates).

I have imported the JQuery UI (combined Library).
In the BundleConfig.css I added "~/Content/themes/base/all.css" to the bundles.Add(new StyleBundle("~/Content/css").Include

Additionally added a new bundle --

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
       "~/Scripts/jquery-ui-{version}.js));

In the _Layout.cshtml I added 2 new Scripts.Render

@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Scripts/AQB_MON.js")

I created my AQB_MON.js with the following

$(document).ready(function(){
   $(".input[type='datetime']").each(function(){
    $(this).datepicker();
   });
})

All seems to have no affect on any datetime field. Is this due to using scaffolding to create my Controllers/Views? As I was trying to use ToShortDateString() when displaying my datetime fields and came across an issue due to having scaffolding build them.

Have you loaded jquery.js? Are there any script errors in the debug console? Do your input controls have the class input -- that's what your selector is searching for. — Jasen
As far as I know I have loaded jquery.js. I am not receiving any errors of any kind in the debug console. I am not sure about the input class. I am new to this and not sure where to look to find out. — Ethel Patrick
The selector .input means you have added the class "input" to an input element <input class="input" ...>. If this is not the case then your selector is wrong. — Jasen

Yanay Hollander Yanay Hollander · Accepted Answer · 2016-06-17T18:00:53

0

votes

You should use htmlhelper to display the datetime picker. Read more about html helper.

Visual Studio 2013 MVC - jquery datepicker

1 Answers