Datepicker not working in asp.net MVC - asp.net

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>

Answer 1

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"/>