在选择下拉列表项目的MVC 4中,我们如何设置Bootstrap DateTimePicker的Mindate和Maxd



我想在MVC中选择下拉列表时设置bootstrap dateTimePicker的Mindate或Maxdate。这就是在印度的原因,一年发布了一些薪酬量表。如果付费量表的发布年是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:

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

您将要查看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"
});

要完善此答案,您需要提供有关限制的更多信息。

最新更新