我們如何在MVC 4中選擇DropDownListFor項目來設置引導日期時間選擇器的minDate和maxDate

Question

我想在MVC中選擇DropDownListFor時，設置引導日期時間選擇器的MinDate或MaxDate。這是印度在一年內發佈一些薪酬標準的原因。如果A級薪級釋放一年是2005年。當時沒有人秀，我從2002年

得到這個薪級這是我的jQuery代碼：

$('#datepickerFrom1').datetimepicker({ 
     viewMode: 'years', 
     format: 'DD/MM/YYYY' 
    }); 

    $('#datepickerTo1').datetimepicker({ 
     viewMode: 'years', 
     format: 'DD/MM/YYYY', 
     useCurrent: false 
    }); 

    $("#datepickerFrom1").on("dp.change", function (e) { 
     $('#datepickerTo1').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#datepickerTo1").on("dp.change", function (e) { 
     $('#datepickerFrom1').data("DateTimePicker").maxDate(e.date); 
    }); 

這是jQuery的對dropdownlistfor項目選擇：

$(document).ready(function() { 
    //Dropdownlist Selectedchange event 
    $("#ddlPayScaleCode").change(function() { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("GetMaxMinDate")', 
      dataType: 'json', 
      data: { id: $("#ddlPayScaleCode").val() }, 
      success: function (citys) { 
       // states contains the JSON formatted list 
       // of states passed from the controller 
       $.each(citys, function (i, city) { 
        //$("#ddlPSU").append('<option value="' + city.Value + '">' + city.Text + '</option>'); 
        if (i == 0) { 
         $('#datepickerFrom1').datetimepicker({ 
                minDate: '01 Jan 2015' 
         }).datetimepicker("update");; 

         alert(city.Value + i.toString()); 

        } 

       }); 
      }, 
      error: function (ex) { 
       alert('Failed to retrieve states.' + ex); 
      } 
     }); 
     return false; 
    }) 
}); 

這是設計代碼：

    <div class="row" style="margin: 0px 10px 0px 10px;padding: 0px 10px 0px 10px;"> 
       <div class="row" style="background-color:#8f4094;color:White;"> 
       &nbsp;&nbsp;<span style="font-weight:bold;font-size:16px;">Add Experience(s):</span> 
      </div> 
      <br /> 
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
        @Html.LabelFor(model => model.DesignationAndPlaceOfPosting) 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.TextBoxFor(model => model.DesignationAndPlaceOfPosting, new { @class = "form-control" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.DesignationAndPlaceOfPosting)</span> 
       </div> 
      </div> 
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
        @Html.LabelFor(model => model.NameOfOrganization) 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.TextBoxFor(model => model.NameOfOrganization, new { @class = "form-control" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.NameOfOrganization)</span> 
       </div> 
      </div> 
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
        @Html.LabelFor(model => model.PayScaleCode) 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.DropDownListFor(model => model.PayScaleCode, ViewBag.PayScaleCode1 as IEnumerable<SelectListItem>, "select", new { id = "ddlPayScaleCode", @class = "form-control" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.PayScaleCode)</span> 
       </div> 
      </div> 
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
        <b> Period </b> @Html.LabelFor(model => model.PeriodFrom1) 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.TextBoxFor(model => model.PeriodFrom1, "{0:dd/MM/yyyy}", new { @class = "form-control datepickerFrom1", id = "datepickerFrom1", placeholder = "DD/MM/YYYY" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.PeriodFrom1)</span> 
       </div> 
      </div> 
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
        <b> Period </b> @Html.LabelFor(model => model.PeriodTo) 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.TextBoxFor(model => model.PeriodTo1, "{0:dd/MM/yyyy}", new { @class = "form-control datepickerTo1", id = "datepickerTo1", placeholder = "DD/MM/YYYY" }) 
        <input type="text" id="txtMindate" value="01 January 2016" /> 
        <input type="text" id="txtMaxDate" value="01 December 2016" /> 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.PeriodTo1)</span> 
       </div> 
      </div>       
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
       <b>Reporting to Designation</b> 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.TextBoxFor(model => model.ReportingToDesignation, new { @class = "form-control" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.ReportingToDesignation)</span> 
       </div> 
      </div> 
        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
       <b> Self Declaration </b><br />Whether meets the mandatory requirement 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.DropDownListFor(model => model.SelfDeclarationExpCode, ViewBag.VwSelfDeclarationExp as IEnumerable<SelectListItem>, "select", new { id = "ddlSelfDeclarationExpCode", @class = "form-control" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.SelfDeclarationExpCode)</span> 
       </div> 
       </div> 

       <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 
       <b> If yes, nature of duties in support of the declaration</b><br /> (in not more than 250 characters) 
       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @Html.TextAreaFor(model => model.RelevantExperienceDetails, new { id = "txtbxRelevantExperienceDetails", @class = "form-control", style = "height:65px;" }) 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 
        <span style="color: Red">@Html.ValidationMessageFor(model => model.RelevantExperienceDetails)</span> 
       </div> 
       </div> 

        <div class="row" style="margin: 0px 0px 5px 0px;"> 
       <div class="editor-label col-lg-4" style="text-align: right;"> 

       </div> 
       <div class="editor-field col-lg-4" style="text-align: left;"> 
        @* <input type='button' id='button111' class='removebtn' />*@ 
         @*<input type="button" id="txt" value="Add More" style="width: 150px; font-family:Verdana" 
           class="btn btn-md btn-success fa fa-lg" />*@ 
         <input type="submit" id="btnExperience" value="Save Experience" style="width: 150px; font-family:Verdana" 
           class="btn btn-md btn-success fa fa-lg" /> 
       </div> 
       <div class="col-lg-4" style="text-align: left; color: Red;"> 

       </div> 
       </div>    
       </div> 

Answer 1

你會想看看https://jqueryui.com/datepicker/#min-max。

你可以做這樣的事情：

$("#datepickerTo1").datepicker({ minDate: -20, maxDate: "+1M +10D" }); 

或編輯該代碼：

$('#datepickerTo1').datetimepicker({ 
    viewMode: 'years', 
    format: 'DD/MM/YYYY', 
    useCurrent: false, 
    minDate: -20, 
    maxDate: "+1M +10D" 
}); 

要細化這個答案，你需要給你的限制的詳細信息。