试图为用户设置日期选择范围的限制。
我已经尝试了所有选项“ 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。
任何帮助将不胜感激。
最佳答案
由于某些原因,使用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">