using DatePicker for HTML Form element

Question

I'm making a asp.net mvc website and I'm trying to add a Date time picker for one of my model attributes in a form in my view. At the moment a datepicker displays but when I pick a date and submit the form the data is not saved. Before I tried adding a date picker the information saved so I believe the date picker is causing my problem. How exactly should a date picker be added to an HTML Form and should I use the jQuery UI datepicker or one of the many other ones available online? I've no experience with jQuery so it may be that I don't understand how datepicker works or haven't got the right js scripts. Thanks!!

<head>
<title>Create</title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" /> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-     lightness/jquery-ui.min.css" />

</head>

<h2>Create</h2>


@using(Html.BeginForm()) 
{
 @Html.AntiForgeryToken()

 <div class="form-horizontal">
    <h4>Event</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class =  "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new  { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Location, new { htmlAttributes =  new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class =  "control-label col-md-2" })
        <div class="col-md-10">

            @Html.EditorFor(model => model.Date, new {id = "news_date"})
            @Html.ValidationMessageFor(model => model.Date, "", new { @class  = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.StartTime, htmlAttributes: new {  @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.StartTime, new { htmlAttributes =  new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.StartTime, "", new {  @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />

        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")   
</div>
<script>
$(document).ready(function () {
    $("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-     ui.min.js"></script>

My controller method, which is invoked when the form is submitted, looks like this

public ActionResult Create([Bind(Include = "EventID,Name,Location,Date,StartTime")] Meeting @meeting)
    {
        if (ModelState.IsValid)
        {

            context.Meetings.Add(@meeting);
            context.SaveChanges();   
            return RedirectToAction("Index");
        }

        return View();
    }

http://stackoverflow.com/questions/5976938/how-to-pass-parameters-to-jquery-document-ready-function-asp-net-mvc-c? — MethodMan, Nov 20 '15 at 23:20
First remove `new {id = "news_date"}` - it does nothing and fortunately it doesn't other wise your datepicker would not work because you would be referring to the wrong `id`. Next remove the 2nd last script (`jquery/1.10.2/jquery.min`) because your wiping out the scripts rendered by `bundles/jqueryval` (not sure what `src="jquery.js"` is but that may need to removed also). You need to ensure your scripts are rendered in the correct order. Next remove `jquery.datetimepicker.js` because you have 2 date picker scripts (that one and the jquery-ui one). — , Nov 21 '15 at 04:45
And when you say _"I pick a date and submit the form the data is not saved"_ what is happening? Is it because `ModelState` is not valid? — , Nov 21 '15 at 04:48
@StephenMuecke when submit is pressed I am redirected to the Index page which is meant to display all meeting but the meeting I have just created is not displayed and I checked my database and it has not saved. In my controller Create method I have an if statement to check the ModelState is valid so I'm unsure why I'm being redirected to Index if it is in fact valid. If ModelState is invalid I have it set to redirect to a different view which it is not doing. I made the changes you suggested to the view and the picker displays but saving is still an issue — Myles57, Nov 21 '15 at 17:30
If it is redirecting back to `Index()` then `ModelState` is valid, (your posting back a valid date) so the issue has nothing to do with the datepicker. Its do do with saving the data. — , Nov 21 '15 at 22:53
Thank you @StephenMuecke I've had a look and the problem was in my save method so I've got it fixed and the meetings are saving — Myles57, Nov 22 '15 at 15:50
You should either delete this or add you own answer and accept it to close it out. — , Nov 22 '15 at 20:10

Jorge Zuverza · Answer 1 · 2015-11-20T23:41:54.427

0

Change the dateFormat to use the default from:

$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });

to

$("#@Html.IdFor(m => m.Date)").datepicker();

or

$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'mm/dd/yy' });

Please note that in order to fix it, you need to specify Month/Day/Year instead of Day/Month/Year. This is because the server side is expecting mm/dd/yy but the client side is providing dd/mm/yy.

edited Nov 20 '15 at 23:41

answered Nov 20 '15 at 23:24

Jorge Zuverza

885
8
26

I have made the changes you suggested to the script but unfortunately the model still isn't being saved to my database – Myles57 Nov 21 '15 at 17:33

score 0 · Answer 2 · answered Nov 20 '15 at 23:57

EditorFor is rendered like: <input type="date" data-val="..." ... />

In Chrome the EditorFor rendered a datepicker default, but IE this is not working.

I suggest you try use @Html.TextBoxFor(model => model.Date, new {@type = "Date"}) and add in your script something like this:

$(function () {
    $('#Date').datepicker();
});

using DatePicker for HTML Form element

2 Answers2