Question

尝试为用户设置日期选择范围限制。

我尝试了所有选项“minDate / maxDate / minimumDate / MaximumDate”。没有工作。

它应该如调试js：

下面的评论所述

<div >
    <div class="aui-datepicker aui-datepicker-display aui-helper-clearfix" id="datePickerBB">
    <div class="aui-datepicker-content" id="srcNode">
        <div class="aui-datepicker-select-wrapper">
            <select id="yearNode" class="custom-field aui-datepicker-year">
                <option value="2010">2010</option>
            </select>
            <select id="monthNode" class="custom-field aui-datepicker-month">
                <option value="0">January</option>
                <option value="1">February</option>
                <option value="2">March</option>
                <option value="3">April</option>
                <option value="4">May</option>
                <option value="5" selected>June</option>
                <option value="6">July</option>
                <option value="7">August</option>
                <option value="8">September</option>
                <option value="9">October</option>
                <option value="10">November</option>
                <option value="11">December</option>
            </select>
            <select id="dayNode" class="custom-field aui-datepicker-day">
                <option value="9">9</option>
            </select>
        </div>
        <div class="aui-datepicker-button-wrapper">
            <button type="button" id="buttonTest" class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only">
                <span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
            </button>
        </div>
    </div>
</div>

* The minimum date that can be displayed by the calendar. The calendar will not
 * allow dates earlier than this one to be set, and will reset any earlier date to
 * this date. Should be `null` if no minimum date is needed.

AUI().use('aui-datepicker', function(A) {
/*
    Simple Datepicker
*/

    var datepicker2 = new A.DatePickerSelect({
    srcNode: '#srcNode',
    contentBox: '#srcNode',
    boundingBox: '#datePickerBB',
    minDate: new Date(2016,00,1),
    appendOrder: [ 'y', 'm', 'd' ],
    calendar: {
         date: new Date(2016,02,20),
         dateFormat: '%d/%m/%y',
         minDate: new Date(2015,10,10),
         maxDate: new Date(),
         minimumDate: new Date(2015,10,10),
         maximumDate: new Date(),   
    },
})
.render();
});

它没有在控制台中抛出任何错误。我只能使用AlloyUI 1.5。

任何帮助将不胜感激。

Answer 1

出于某种原因，使用minDate和maxDate属性初始化日历不适用于AlloyUI 1.5中的DatePickerSelect。这可能是一个错误，但AlloyUI 1.5太老了，我怀疑它会被修复。要解决此问题，您可以在初始化后设置DatePickerSelect日历的minDate和maxDate：

datePickerSelect.calendar.set('minDate', new Date(2015,10,10));
datePickerSelect.calendar.set('maxDate', new Date());

不幸的是，它不会对<select>的值产生任何影响，因此用户仍然可以从中挑选错误的值。您可以通过设置the DatePickerSelect yearRange attribute来缓解此问题。

可运行的例子：

AUI().use('aui-datepicker', function(A) {

  var datePickerSelect = new A.DatePickerSelect({
    yearRange: [2015, 2016],
  }).render();

  datePickerSelect.calendar.set('minDate', new Date(2015, 10, 10));
  datePickerSelect.calendar.set('maxDate', new Date());
});

<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">

minDate或maxDate在AlloyUI 1.5 DatePickerSelect中不起作用

1 个答案: