<div class="form-group">
@Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control datepicker", @id = "StartDate", required = "required" } })
@Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control datepicker", @id = "EndDate", required = "required" } })
@Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Hours, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Hours, (SelectList)ViewBag.hoursddl, "", htmlAttributes: new { @class = "form-control", required = "required" })
@Html.ValidationMessageFor(model => model.Hours, "", new { @class = "text-danger" })
</div>
</div>
var ddl = $('#mySelect');
ddl.empty(); //add this line
//do the loop that adds the new options
<script>
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#StartDate")
.datepicker({
changeMonth: true,
numberOfMonths: 1
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#EndDate").datepicker({
changeMonth: true,
numberOfMonths: 1
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
</script>
<script>
$(document).ready(function () {
$(".datepicker").datepicker({
"onClose": function (dateText, inst) {
var string1 = $('.start').val();
var string2 = $('.end').val();
if (string1 !== "" && string2 !== "") {
//do some validation to make sure they are properly formatted dates
//then...
var dateStart = new Date(string1);
var dateEnd = new Date(string2);
var days = parseInt((dateEnd - dateStart) / (24 * 3600 * 1000));
if (days > 0) {
var ddl = $('#mySelect');
ddl.empty();
for (var i = 1; i <= days; i++) {
var option = new Option(i, i);
ddl.append(option);
}
}
}
}
});
});
</script>
<input type="text" class="form-control datepicker start" id="fboy"> End:
<input type="text" class="form-control datepicker end" id="fface">
<select id="mySelect"></select>
<input type="text" class="form-control datepicker start" id="StartDate"> End:
<input type="text" class="form-control datepicker end" id="StartDate">
<select id="mySelect"></select>
HTML
Open in new window
jQuery
Open in new window