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>