In my MVC4 razor engine, I need to pick date from text box. It is my View:
<tr>
<td>Start Date</td>
<td>@Html.TextBox("RateListStartDate")</td>
</tr>
<tr>
<td>End Date</td>
<td>@Html.TextBox("RateListEndDate")</td>
</tr>
When I click on text box of start date or end date, it should display calendar.
In my MVC4 razor engine, I need to pick date from text box. It is my View:
<tr>
<td>Start Date</td>
<td>@Html.TextBox("RateListStartDate")</td>
</tr>
<tr>
<td>End Date</td>
<td>@Html.TextBox("RateListEndDate")</td>
</tr>
When I click on text box of start date or end date, it should display calendar.
Share Improve this question edited Dec 28, 2020 at 1:44 peterh 12.6k20 gold badges89 silver badges113 bronze badges asked Oct 28, 2013 at 12:16 ShuShu 551 gold badge1 silver badge11 bronze badges 3 |5 Answers
Reset to default 5Since you use MVC, jQuery "should" already referenced in your layout page. You will also need the jqueryUI.
If the datepicker code is throwing erros at you, add the following 2 lines, to your view or your layouts page:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Then you need to declare the elements, which should be get the datepicker functionality.
$(document).ready(function(){
$(".getdate").each(function() {
$(this).datepicker();
});
});
and edit your Html.TextBoxFor() accordingly:
@Html.TextBox("RateListStartDate", new {@class="getdate"})
This should do the trick. Kind regards
You can use jquery datepicker. DATEPICKER DEMO
$(document).ready(function(){
$(".datepicker").each(function() {
$(this).datepicker();
});
});
jsfiddle
<!doctype html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -100, maxDate: "+0D" });
$("#datepicker").datepicker("setDate",new Date());
$( "#datepicker" ).datepicker( "option", "dateFormat", "dd/mm/yy");
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
$(document).ready(function () {
$('#txtBoxId').datepicker();
});
refer this to your Layout
@Scripts.Render("~/bundles/jqueryui")
<script>
$(function()
{
$("#date").datepicker();
$("#date").datepicker
({
dateFormat: "dd-mm-yyyy"
});
});
</script>
<tr>
<td>Start Date</td>
<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 { htmlAttributes = new { @class = "date" } })
@Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
</div>
</div>
</tr>
<tr>
<td>End Date</td>
<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 { htmlAttributes = new { @class = "date" } })
@Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
</div>
</div>
</tr>
<input/>to@Html.Textbox– AthibaN Commented Oct 28, 2013 at 13:02