Question

我之前曾问过这个问题jQuery datepicker restricts selectable year。

我现在遇到的问题是我必须更改我的一些日期选择器以反映我的客户工作的财政年度。这意味着在4月1日或之后，那一年应该变为2016/2017。因此我将代码更改为可以在下面看到的代码。

如果我使用此代码的日期选择器只能选择一年（datepicker 54）和普通的datepicker，那么它可以正常工作，但如果我合并两个只允许选择年份的日期选择器，那么datepicker55会跳到7月如果我将minDateToSet和maxDateToSet更改为null，那么它将失去其财务年度限制和验证。

关于为什么会这样以及如何解决它的任何想法？

$("#datepicker54").datepicker({
  dateFormat: "mm/yy",
  onSelect: function(d) {
    var selectedCalendarYear = parseInt(d.substring(3, 7));
    var selectedMonth = parseInt(d.substring(0, 2));
    var startYear = null;
    var endYear = null;
    if (selectedMonth < 4) {
      startYear = selectedCalendarYear - 1;
      endYear = selectedCalendarYear;
    } else {
      startYear = selectedCalendarYear;
      endYear = selectedCalendarYear + 1;
    }

    $(this).val(startYear + "/" + endYear);
    var minDateToSet = "01/04/" + startYear;
    var maxDateToSet = "31/03/" + endYear;
    $("#datepicker55").datepicker("option", "minDate", minDateToSet); //added null instead of minDateToSet and maxDateToSet
    $("#datepicker55").datepicker("option", "maxDate", maxDateToSet);

  },
  viewMode: "years",
  changeYear: true,
  beforeShowDay: $.datepicker.noWeekends
});

Answer 1

我发现我需要使用替代方法，因为我无法按照我的意愿对datepickers进行编码。因此，我创建了一个数据库表，其中包含以下列：YearID，DisplayText（包含下拉列表的值，即2015/2016），StartDate（即2015年4月1日，格式为dd / mm / yyyy）和EndDate（ 31/03/2016格式dd / mm / yyyy）。

然后我将它带入我的MVC模型并重写我的html助手，你可以在下面看到。

HTML

 <div class="form-group">
      @Html.LabelFor(model => model.EstimatedOnsiteYear, "Estimated Onsite Year", new { @class = "control-label col-md-5" })
      <div class="col-md-1">
        @Html.DropDownListFor(model => model.EstimatedOnsiteYear, (IEnumerable
        <SelectListItem>)ViewBag.YearTable, "Please Select") 
       @*new { @class = "datepicker55", id = "datepicker55" })*@
       @Html.ValidationMessageFor(model => model.EstimatedOnsiteYear)
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.EstimatedCompletionYear, "Estimated Completion Year", new { @class = "control-label col-md-5" })
      <div class="col-md-1">
        @Html.DropDownListFor(model => model.EstimatedCompletionYear, (IEnumerable
        <SelectListItem>)ViewBag.YearTable, "Please Select") 
        @*new { @class = "datepicker56", id = "datepicker56" })*@ 
        @Html.ValidationMessageFor(model => model.EstimatedCompletionYear)
      </div>
    </div>

正如您所看到的，我已将我的HTML帮助程序更改为DropDownListFor并附加了IEnumerable <SelectListItem>以及从我的控制器推送的ViewBag。

控制器代码

public JsonResult FilterYearSelector(int id)
    {
         // Fix circular reference errors
         db.Configuration.ProxyCreationEnabled = false;

        //return all years with id greater than id parameter
        //change >= to reflect what you need the proceeding year to be
         IEnumerable<YearTable> yearTable = db.YearTables.Where(a => a.YearID >= id).ToList();
         return Json(yearTable, JsonRequestBehavior.AllowGet);
    }

在我的控制器代码中，我指向我的YearTable，它被添加到我的模型并将结果作为Json返回，AllowGet用于检索作为GET请求的信息。这也适用于Ajax Jquery方法，可以在下面看到。

我将Ajax代码放在视图的底部，在我的例子中，这是创建视图。我的Json代码中的注释解释了正在发生的进程。但主要目的是通过清空第二个下拉列表并重建它来过滤一个基于另一个下拉列表的下拉列表。

<script>

            $(document).ready(function (){

                $("#EstimatedOnsiteYear").change(function () { // Attach to the change handler of element with id of EstimatedOnsiteYear (primary DDL)

                    var id = $("select#EstimatedOnsiteYear").val();

                    if (id != null || id != "")
                    {
                        $.ajax({

                            type: 'GET',

                            url: '@Url.Action("FilterYearSelector")', // The JsonResult function in controller

                            datatype: 'json',

                            data: { id: id }, // pass in the value of the primary DDL select

                            success: function (years) {
                                // Clear element with id of EstimatedCompletionYear (secondary DDL)
                                $("#EstimatedCompletionYear").empty();
                                $("#EstimatedCompletionYear").append("<option value=''>Please Select</option>");

                                // yearSelector contains the JSON formatted list
                                // passed from the controller
                                $.each(years, function (i, year) {
                                    $("#EstimatedCompletionYear").append('<option value="'
                                        + year.YearID + '">'
                                        + year.DisplayText + '</option>');
                                });
                            },

                            error: function (ex) {
                                alert('An error has occured' + ex);
                            }
                        });
                   }
                    return false;
                });
</script>

jQuery datepicker错误，年度被推进和限制

1 个答案: