I'm trying to figure out why datepicker isn't working for me. This is in a cshtml view. I'm feeding the datepicker function the proper id but it is not working.
Page Source:
<div> <label for="EFFECTIVE_DATE1">EFFECTIVE_DATE1</label> </div> <div> <input name="EFFECTIVE_DATE1" type="text" value="" /> <span></span> </div> <script> $(function () { $("#EFFECTIVE_DATE1").datepicker(); }); </script> View code
<head> <link rel="stylesheet" href="//"> <script src="//"></script> <script src="//"></script> <head/> <div> @Html.LabelFor(model => model.EFFECTIVE_DATE1) </div> <div> @Html.EditorFor(model => model.EFFECTIVE_DATE1) @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1) </div> <script> $(function () { $("#EFFECTIVE_DATE1").datepicker(); }); </script> Update: Here is the entire Page
@model BillingApp.Models.EFT_INFORMATION @{ ViewBag.Title = "Create"; Layout = "../Shared/Layout2.cshtml"; } @section featured2 { <!DOCTYPE HTML> <html><head><title>Combined App</title><meta name="description" content="website description"> <meta name="keywords" content="website keywords, website keywords"><meta http-equiv="content-type" content="text/html; charset=windows-1252"><link rel="stylesheet" type="text/css" href="../../Content/themes/style.css" title="style"> <div><a href="@Url.Action("Index", "Home")"> <img src="@Url.Content("\\Content\\images\\logo.jpg")"/></a></div> <div> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var images = new Array() function preload() { for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image() images[i].src = preload.arguments[i] } } preload( "\\Content\\images\\logo.jpg" ) //--><!]]> </script> </div> <link rel="stylesheet" href="//"> <script src="//"></script> <script src="//"></script> <script src=""></script> </head><body> <div> <div> <div> <div> <h1><a href="index.html"><span></span></a></h1> <h2></h2> </div> </div> <div> <ul> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> <li>@Html.ActionLink("Help", "Help", "Home")</li> </ul></div> </div> <div> <div> <style type="text/css"> p { display: inline } p.msg { color: red; display: inline; } </style> <h1>Welcome to the EFT Information Creation Page!</h1> <p> Please fill out the fields below to create a new entry and row of data.</p><br /> <br /> @using (Html.BeginForm()) { @Html.ValidationSummary(true){ @* <div> @Html.LabelFor(model => model.EEID) </div> <div> @Html.EditorFor(model => model.EEID) @Html.ValidationMessageFor(model => model.EEID) </div>*@ <div> @Html.LabelFor(model => model.TABLE_NUMBER1) </div> <div> @Html.EditorFor(model => model.TABLE_NUMBER1) @Html.ValidationMessageFor(model => model.TABLE_NUMBER1) </div> <div> @Html.LabelFor(model => model.PNTR_MAX) </div> <div> @Html.EditorFor(model => model.PNTR_MAX) @Html.ValidationMessageFor(model => model.PNTR_MAX) </div> <div> @Html.LabelFor(model => model.BANK_ROUTING_NUMBER) </div> <div> @Html.EditorFor(model => model.BANK_ROUTING_NUMBER) @Html.ValidationMessageFor(model => model.BANK_ROUTING_NUMBER) </div> <div> @Html.LabelFor(model => model.EFFECTIVE_DATE1) </div> <div> @Html.EditorFor(model => model.EFFECTIVE_DATE1) @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1) </div> <script> $(function () { $("#EFFECTIVE_DATE1").datepicker(); }); </script> <div> @Html.LabelFor(model => model.TAX_ID) </div> <div> @Html.EditorFor(model => model.TAX_ID) @Html.ValidationMessageFor(model => model.TAX_ID) </div> <div> @Html.LabelFor(model => model.BANK_NAME) </div> <div> @Html.EditorFor(model => model.BANK_NAME) @Html.ValidationMessageFor(model => model.BANK_NAME) </div> <div> @Html.LabelFor(model => model.COMPANY_NAME1) </div> <div> @Html.EditorFor(model => model.COMPANY_NAME1) @Html.ValidationMessageFor(model => model.COMPANY_NAME1) </div><br /> <p> <input type="submit" value=" Create "/> </p><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div> @Html.ActionLink("Back to List", "EFTInformation", "Billing") </div> } <img src="../../Content/images/logo.jpg"> <style type="text/css"> img.logo { display: block; margin-top: -24px; margin-left: 351px; margin-right: 351px; height: 50px; width: 135px; } </style> <style type="text/css"> #username { position: absolute; top:172px; left: calc(50% + 268px); } </style> <div><p>Hello, @User.Identity.Name!</p></div> </div></div> <div></div> <div> </div> </body></html> } @section Scripts { @Scripts.Render("~/bundles/jqueryval") } Update: Commented out most of the view except for the elements necessary for datepicker to work. It's still not working.
@model BillingApp.Models.EFT_INFORMATION @{ ViewBag.Title = "Create"; Layout = "../Shared/Layout2.cshtml"; } @section featured2 { <head> <link rel="stylesheet" href="//"> <script src="//"></script> <script src="//"></script> <script src=""></script> </head><body> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <div> @Html.LabelFor(model => model.TABLE_NUMBER1) </div> <div> @Html.EditorFor(model => model.TABLE_NUMBER1) @Html.ValidationMessageFor(model => model.TABLE_NUMBER1) </div> <div> @Html.LabelFor(model => model.PNTR_MAX) </div> <div> @Html.EditorFor(model => model.PNTR_MAX) @Html.ValidationMessageFor(model => model.PNTR_MAX) </div> <div> @Html.LabelFor(model => model.BANK_ROUTING_NUMBER) </div> <div> @Html.EditorFor(model => model.BANK_ROUTING_NUMBER) @Html.ValidationMessageFor(model => model.BANK_ROUTING_NUMBER) </div> <div> @Html.LabelFor(model => model.EFFECTIVE_DATE1) </div> <div> @Html.EditorFor(model => model.EFFECTIVE_DATE1) @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1) </div> <script> $(function () { $("#EFFECTIVE_DATE1").datepicker({ format: 'yyyy-MM-dd' }); }); </script> <div> @Html.LabelFor(model => model.TAX_ID) </div> <div> @Html.EditorFor(model => model.TAX_ID) @Html.ValidationMessageFor(model => model.TAX_ID) </div> <div> @Html.LabelFor(model => model.BANK_NAME) </div> <div> @Html.EditorFor(model => model.BANK_NAME) @Html.ValidationMessageFor(model => model.BANK_NAME) </div> <div> @Html.LabelFor(model => model.COMPANY_NAME1) </div> <div> @Html.EditorFor(model => model.COMPANY_NAME1) @Html.ValidationMessageFor(model => model.COMPANY_NAME1) </div><br /> <p> <input type="submit" value=" Create "/> </p><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div> @Html.ActionLink("Back to List", "EFTInformation", "Billing") </div> } } } @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 3 Answers
Your HEAD is misconfigured -
<head> <link rel="stylesheet" href="//"> <script src="//"></script> <script src="//"></script> <head/> <----- This line <div> @Html.LabelFor(model => model.EFFECTIVE_DATE1) </div> <div> @Html.EditorFor(model => model.EFFECTIVE_DATE1) @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1) </div> <script> $(function () { $("#EFFECTIVE_DATE1").datepicker(); }); </script> That line should be </head>
Working code for me
Index.cshtml
@model JqueryUIProject.Models.FakeModel @{ ViewBag.Title = "title"; } <head> <link rel="stylesheet" href="//"> <script src="//"></script> <script src="//"></script> </head> <div> @Html.LabelFor(model => model.EFFECTIVE_DATE1) </div> <div> @Html.EditorFor(model => model.EFFECTIVE_DATE1) @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1) </div> <script> $(function () { $("#EFFECTIVE_DATE1").datepicker(); }); </script> FakeModel.cs
using System; namespace JqueryUIProject.Models { public class FakeModel { public DateTime EFFECTIVE_DATE1; } } HomeController.cs
using System; using System.Collections.Generic; using System.Web; using System.Linq; using System.Web.Mvc; namespace JqueryUIProject.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } } } Index.cshtml
<link rel="stylesheet" href="//"> <script src="//"></script> <script src="//"></script> <script> $(function () { $("#DOB").click(function () { $(this).datepicker({ dateFormat: 'dd-mm-yy', changeMonth: true, changeYear: true }).focus(); }); }); </script> <div> @Html.LabelFor(modelItem => Model.First().DOB, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.TextBoxFor(modelItem => Model.First().DOB, new { @Value = Model.First().DOB.ToString("dd/MM/yyyy"), @class = "form-control", required = "required" }) @Html.ValidationMessageFor(modelItem => Model.First().DOB, "", new { @class = "text-danger" }) </div> </div> * you start jquery click function*
$("input[type=text]").click(function() { $(this).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true }); }); OR $("#EFFECTIVE_DATE1").click(function() { $(this).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true }); }); 
