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();
    }

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). — user3559349
– user3559349, Commented Nov 21, 2015 at 4: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? — user3559349
– user3559349, Commented Nov 21, 2015 at 4: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
– Myles57, Commented Nov 21, 2015 at 17:30

Jorge Zuverza · Accepted Answer · 2015-11-20 23:41:54Z

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, 2015 at 23:41

answered Nov 20, 2015 at 23:24

Jorge Zuverza

9158 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Myles57 Over a year ago

I have made the changes you suggested to the script but unfortunately the model still isn't being saved to my database

Thiago Aleixo · Accepted Answer · 2015-11-20 23:57:36Z

0

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();
});

answered Nov 20, 2015 at 23:57

Thiago Aleixo

616 bronze badges

Collectives™ on Stack Overflow

using DatePicker for HTML Form element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related