Datepicker not working in asp.net MVC

Question

I am using .net MVC. This is my razor view of create a Bill which have a property Due Date. I want to use date picker in my code but it's not working when i use following code:

<div class="form-group">
        @Html.LabelFor(model => model.DueDate, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.DueDate, new { id = "datepicker" })
            @Html.ValidationMessageFor(model => model.DueDate)
        </div>
    </div>
    <script type="text/javascript">
$(document).ready(function () { $("#datepicker").datepicker({ });});
</script>

So I changed the code to following then it started working but how can I pass the duedate value to controller the above code automatically attaches the due date value to object but the below code can't.

        <div class="form-group">
        @Html.LabelFor(model => model.DueDate, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="date" id="datepicker" class="form-control"/>   //Changing
            @Html.ValidationMessageFor(model => model.DueDate)
        </div>
    </div>
    <script type="text/javascript">
$(document).ready(function () { $("#datepicker").datepicker({ });});
</script>

The code in your first snippet works fine (although its unclear why you change the default id attribute - why not just @Html.TextBoxFor(m => m.DueDate) and $("#DueDate").datepicker();) What errors are you getting in the browser console. — user3559349
– user3559349, Commented Aug 7, 2016 at 11:50
And if the 2nd code snippet is working, its because your generating the browsers HTML-5 datepicker (which is only supported in Chrome and Edge), not a jquery datepicker — user3559349
– user3559349, Commented Aug 7, 2016 at 11:55
You accepted a bad hack that has nothing to do with your issue. You may as well do @Html.TextBoxFor(m=> m.DueDate, new { type= "date" }) — user3559349
– user3559349, Commented Aug 7, 2016 at 12:00

Denys Wessels · Accepted Answer · 2016-08-07 12:19:25Z

The code in your first snippet uses a date time picker control provided by jQuery UI library.To make it work you need to add a reference to the following files in this order:

jQuery.js
jQueryUI.js
jQueryUI.css

So your final code should look something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

The code in your second snippet uses an HTML 5 input of type date, as was pointed out by Stephen.This automaticallly makes the input a date time picker if it's supported by the browser.

The reason the second snippet wasn't working is that the binding in MVC happens on the name property.Since your C# property is called DueDate you need to add name="DueDate" to the input element.

Change this line:

<input type="date" id="datepicker" class="form-control"/>

To this:

<input name="DueDate" type="date" id="datepicker" class="form-control"/>

Collectives™ on Stack Overflow

Datepicker not working in asp.net MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related