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

minDate or maxDate not working in AlloyUI 1.5 DatePickerSelect

本文关键字：DatePickerSelect 不起作用 AlloyUI maxDate minDate 更新时间：2023-09-26

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

我已经尝试了所有选项"最小日期/最大日期/最小日期/最大日期"。没有一个工作。

它应该按照调试 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();
});

它不会在控制台中抛出任何错误。我只能使用合金UI 1.5。

任何帮助将不胜感激。

出于某种原因，使用 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>的值产生任何影响，因此用户仍然可以从中挑选错误的值。您可以通过设置 DatePickerSelect yearRange 属性来缓解此问题。

可运行的示例：

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

没有找到相关文章