2016-11-28 1 views
0

Je veux définir MinDate ou MaxDate de Bootstrap datetimepicker sur la sélection de DropDownListFor dans MVC. C'est la raison pour laquelle c'est en Inde une échelle de salaire publié sur une année. si une échelle salariale libérant année est 2005. alors personne ne montre que je reçois cette échelle salariale de 2002.Comment nous pouvons définir minDate et maxDate de Bootstrap datetimepicker dans MVC 4 sur la sélection de DropDownListFor élément

Ceci est mon code 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); 
    }); 

C'est jQuery pour la sélection sur dropdownlistfor article:

$(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; 
    }) 
}); 

Ce code est la conception:

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

Répondre

0

Vous voulez regarder https://jqueryui.com/datepicker/#min-max.

Vous pouvez faire quelque chose comme ceci:

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

Ou modifier ce code:

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

Pour affiner cette réponse, vous devez donner plus d'informations sur vos restrictions.

+0

monsieur, je veux définir min sur la date maximale sur la sélection de liste déroulante pour l'article, votre code est parfait sur document prêt. mais ne fonctionne pas dans la sélection jquery de dropdownlistfor –