How to add DatePicker to my MVC3 C# site

Question

I've been trying to figure out how to do this all afternoon, but can't seem to get a grip on how to get DatePicker to work with my site.

Also, if possible I would like to remove the Time part of the DateTime, as I'm only interested in the Date the entry gets posted.

I've included the code so far below, I've pretty much removed everything I've attempted so far so it is back to the beginning. I've referenced the JQuery files at the top of _Layout.cshtml which I think is correct.

I've looked at many guides on the web, but struggled to make much sense of them, although I will keep reading.

I've added these lines to the top of my _Layout.cshtml (I've also unpacked and copied the JQuery folders to the locations referenced below as well)

<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 looks like this:

@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 anyone for helping

Answer 1

Try this first:

Add your html code without the html helper:

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

Or, if you want to add the id with 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 set it all the configuration in your project correctly. You should solve your problem with those lines.

After you get this working in your site, read about html helpers and how to encapsulate code so you do not have to rewrite this everytime.

Hope it helps!

Answer 2

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