我知道这听起来有些废话，但我尽我所能，这些看起来很长，也不是真的，所以看这里，所以，任何人都可以在这里框架内容。任何修改代码将不胜感激。
我有四个日期选择器。它们是StartDate，EndDate，RelationStartDate和RelationEndDate，带有下拉列表（ParentDepartment）。现在我的要求是在页面加载时我必须隐藏RelationStartDate和RelationEndDate，当选择下拉列表中的值时，我必须显示相应的Datepickers。 现在，用户可以选择日期或使用键盘手动输入。他有所有选项都可以使用tab等;（如果有的话）。 现在主要的是StartDate在选中时EndDate应该大于Start Date，当选择StartDate，EndDate和下拉值时，应该启用RelationStartDate和RelationEndDate，然后RelationStartDate应该位于StartDate和EndDate之间。以类似的方式，RelationEndDate应该在RelationStartDate和EndDate之间。 在完成上述所有操作后，如果他回到StartDate，然后修改StartDate，如果此日期小于EndDate，那么应该在div中显示错误，类似于EndDate选择它不应该小于StartDate这个规则适用于RelationStartDate和RelationEndDate。 注意：用户可以随时修改日期选择器，并且不应使用警报来指定用户错误，而是首选div。 这是代码。
<script type="text/javascript">
$(document).ready(function () {
$("input[id$='Date']").on('click keyup keypress keydown change', function () {
var startDate = $("#StartDate").val();
var endDate = $("#EndDate").val();
var relstartDate = $("#RelationStartDate").val();
var relendDate = $("#RelationEndDate").val();
function checkIn() {
if ((startDate) == '') {
var status
$("input[id$='Date']").val('');
$('#divErrorMsg').text('Please Select Start Date');
$('#StartDate').focus();
status = true;
return true;
}
}
/*Start Date*/
if ($(this).attr('id') == 'StartDate') {
if (new Date(startDate) > new Date(endDate)) {
$("input[id$='Date']").not('#StartDate').val('');
$('#divErrorMsg').text('Start Date Should be Less than End Date');
$(this).focus();
}
else {
$('#divErrorMsg').text('');
}
}
/*End Date*/
if ($(this).attr('id') == 'EndDate') {
var status = checkIn();
if (status != true) {
if (new Date(endDate) < new Date(startDate)) {
$("input[id$='Date']").not('#StartDate, #EndDate').val('');
$('#divErrorMsg').text('End Date Should be Greater than Start Date');
$(this).focus();
}
else {
$('#divErrorMsg').text('');
}
}
}
/*Relations Start Date*/
if ($(this).attr('id') == 'RelationStartDate') {
if (($('#StartDate').val() !='' && $('#EndDate').val()!='')) {
if (new Date(relstartDate) <= new Date(startDate) && new Date(relstartDate) >= new Date(endDate)) {
//$('#RelationEndDate').val('');
$('#divErrorMsg').text('Relation Start Date Should be between Start Date');
$(this).focus();
}
else if ((new Date(relstartDate) < new Date(startDate))) {
$('#RelationEndDate').val('');
$('#divErrorMsg').text('Relation Start Date Should be between Start Date');
$(this).focus();
}
else if ((new Date(relstartDate) > new Date(endDate))) {
$('#RelationEndDate').val('');
$('#divErrorMsg').text('Relation Start Date Should be between Start Date');
$(this).focus();
}
else {
$('#divErrorMsg').text('');
}
}
else {
if ($('#StartDate').val() == '') {
$("input[id$='Date']").val('');
$('#divErrorMsg').text('Please Select Start Date');
$('#StartDate').focus();
}
else {
$('#divErrorMsg').text('Please Select End Date');
$("input[id$='Date']").not('#StartDate').val('');
$('#EndDate').focus();
}
}
}
/*Relation End Date Starts here*/
if ($(this).attr('id') == 'RelationEndDate') {
debugger;
if (($('#StartDate').val() != '' && $('#EndDate').val() != '') && $('#RelationStartDate').val() != '') {
if (($('#StartDate').val() != '' && $('#EndDate').val() != '')) {
if (new Date(relendDate) < new Date(relstartDate) && new Date(relendDate) > new Date(endDate)) {
$('#divErrorMsg').text('Relation End Date Should be between Relation Start Date & End Date');
$(this).focus();
}
else if ((new Date(relendDate) < new Date(relstartDate))) {
$('#divErrorMsg').text('Relation End Date Should be between Relation Start Date & End Date');
$(this).focus();
}
else if ((new Date(relendDate) > new Date(endDate))) {
$('#divErrorMsg').text('Relation End Date Should be between Relation Start Date & End Date');
$(this).focus();
}
else {
$('#divErrorMsg').text('');
$('#RelationStartDate').focus();
}
}
}
else {
if ($('#StartDate').val() == '') {
$("input[id$='Date']").val('');
$('#divErrorMsg').text('Please Select Start Date');
$('#StartDate').focus();
}
else if ($('#EndDate').val() == '') {
$("input[id$='Date']").not('#StartDate').val('');
$('#divErrorMsg').text('Please Select End Date');
$('#EndDate').focus();
}
else if ($('#RelationStartDate').val() == '') {
$("input[id$='Date']").not('#StartDate, #EndDate').val('');
$('#divErrorMsg').text('Please Select Relation Start Date');
$('#RelationStartDate').focus();
}
else {
$('#divErrorMsg').text('');
$('#RelationEndDate').focus();
}
}
}
});
$("input[id$='Date']").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function (date) {
var selectedDate = new Date(date);
var endDate = new Date(selectedDate.getTime());
$("#EndDate").datepicker("option", "minDate", $('#StartDate').val());
$("#EndDate").datepicker("option", "maxDate");
$("#RelationStartDate").datepicker("option", "minDate", $('#StartDate').val());
$("#RelationEndDate").datepicker("option", 'minDate', $('#RelationStartDate').val());
$("#RelationStartDate").datepicker("option", 'maxDate', $('#EndDate').val());
$("#RelationEndDate").datepicker("option", 'maxDate', $('#EndDate').val());
},
}).css('vertical-align', 'top');
});
//Here is the Html
<div class="editor-label">StartDate</div>
<div class="editor-field">
@Html.EditorFor(model => model.StartDate)
</div>
<div class="editor-label">EndDate</div>
<div class="editor-field">
@Html.EditorFor(model => model.EndDate)
</div>
<div class="editor-label">ParentDepartment</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.ParentDepartmentId, new
SelectList(@ViewBag.ParentDepartmentId, "DepartmentId", "DepartmentName"),
"--Select--")
</div>
<div class="editor-label">RelationStartDate</div>
<div class="editor-field">
@Html.EditorFor(model => model.RelationStartDate) </div>
<div class="editor-label">RelationEndDate </div>
<div class="editor-field">
@Html.EditorFor(model => model.RelationEndDate)
</div>
上面的代码有一些缺陷并且过于冗长。任何使目标达到+长度短的东西都会受到青睐。感谢。