AUI datepicker: pop up datepicker on focus of element

Question

How can i make AUI-datepicker to pop up on the focus of element. cuurrently it only pop up on click of element.

Here is code

Script:

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

and Tag

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

and one more thing how can i range date?

Answer 1

The Datepicker popup is handled by DatePickerPopover class of aui-datepicker module. There is show() method in datepicker class to open popup.

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

Date can be ranged by adding maximumDate and minimumDate attribute.