How to add DatePicker to my MVC3 C # site

Question

I tried to figure out how to do this all day, but I seem to be unable to figure out how to get DatePicker to work with my site.

Also, if possible, I would like to remove the temporary part of DateTime, since I am only interested in the date when the record is sent.

I included the code below, I pretty much deleted everything that I have done so far, so it goes back to the beginning. I referenced the jQuery files at the top of _Layout.cshtml, which in my opinion are correct.

I looked through a lot of manuals on the Internet, but tried my best to understand them, although I will continue to read.

I added these lines to the top of my _Layout.cshtml (I also unpacked and copied the jQuery folders to the locations below)

<link href="@Url.Content("~/Content/jquery-ui/redmond/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.8.11.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/ui/minified/jquery.ui.core.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/ui/minified/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 

My View code is as follows:

 @model dale_harrison.Models.News @{ ViewBag.Title = "Create"; } <h2>Create</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>News</legend> <div class="editor-label"> @Html.LabelFor(model => model.News_Entry) </div> <div class="editor-field"> @Html.EditorFor(model => model.News_Entry) @Html.ValidationMessageFor(model => model.News_Entry) </div> <div class="editor-label"> @Html.LabelFor(model => model.News_Date) </div> <div class="editor-field"> @*@Html.EditorFor(model => model.News_Date)*@ @Html.EditorFor(model => model.News_Date, new object{ id = "news_date" } ) @Html.ValidationMessageFor(model => model.News_Date) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> <script type="text/javascript"> $(document).ready(function () { $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' }); }); </script> 

My model is here:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity; namespace dale_harrison.Models { public class News { public int ID { get; set; } public string News_Entry { get; set; } public DateTime News_Date { get; set; } } public class NewsDBContext : DbContext { public DbSet<News> News_Entries { get; set; } } } 

Many thanks in advance to someone for their help.

Answer 1

Try it first:

Add html code without html helper:

 <input type="text" id="news_date" name="news_date" /> 

Or, if you want to add id using the html helper:

 @Html.EditorFor(model => model.News_Date, new { id = "news_date" } ) 

And then add this javascript code:

 $(document).ready(function () { $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' }); }); 

You can try this first to check if you have correctly configured the entire configuration in your project. You must solve your problem with these lines.

After you make money on your site, read about the html helpers and how to encapsulate the code, so you don’t need to rewrite it every time.

Hope this helps!

Answer 2

In the Views/Shared/EditorTemplates you need to create a template for DateTime types, so every time you use @Html.EditorFor MVC, you display everything that you define on your template

Answer 3

You can also hide the time from the text box so that you see "08/11/2007" and not "08/11/2007 00:00:00".

To do this, add "[DataType (DataType.Date)] to your news class, as shown below:

 public class News { public int ID { get; set; } public string News_Entry { get; set; } [DataType(DataType.Date)] public DateTime News_Date { get; set; } } 

Answer 4

Editor To neglect additional attributes. Either use TextBoxFor, or write EditorFor template ...