liferay - AUI 日期选择器：在元素焦点上弹出日期选择器

Question

我怎样才能让 AUI-datepicker 弹出元素的焦点。目前它只在点击元素时弹出。

这是代码

脚本：

 YUI().use('aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: '.date-selector',
        popover: {
          zIndex: 1
        },
      }
    );
  }
);

和标签

<aui:input id="startDate" name="startDate" cssClass="date-selector" label="startDate">

还有一件事我怎么能确定日期？

Answer 1

试试这个：

<aui:input name="taskStartDate" autocomplete="off" cssClass='font-size' id="taskStartDate"  onFocus="onClickOfStartDate();" required="true" inlineLabel="true" label=" "/>    

<aui:script>
    function  setactualStartDate(){

        AUI().use('aui-datepicker', function(A) {
            var simpleDatepicker1 = new A.DatePicker({
                trigger: '#<portlet:namespace />taskActualStartDate', 
                mask: '%Y-%m-%d',
                calendar: {
                    dateFormat: '%Y-%m-%d',
                },
            }).render('#<portlet:namespace />taskactualStartDatePicker');
        });
    }

    function onClickOfStartDate(){
        setStartDate();
    }
</aui:script>

Answer 2

Datepicker 弹出窗口由 aui-datepicker 模块的DatePickerPopover类处理。datepicker 类中有show()方法来打开弹出窗口。

<input id="startDate" name="startDate" class="date-selector" onfocus="openDatePicker();">
<script>
    var datePicker;
    YUI().use('aui-base','aui-datepicker', function(Y) {
        datePicker = new Y.DatePicker({
            trigger: '#startDate',
            popover: {
                zIndex: 10,
            },
            calendar: {
                maximumDate: new Date()
            }
        });
    });
    function openDatePicker() {
        datePicker.getPopover().show();
    }
</script>

可以通过添加 maximumDate 和 minimumDate 属性来设置日期。