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

的日期选择器弹出被DatePickerPopover类AUI-日期选择器模块的处理。在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属性进行排列。

Answer 2

试试这个像这样：

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