Fork me on GitHub

DatePicker

Create a dynamic datepicker that allows users to select the date with a calendar.


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the DatePicker module.

AUI().use(
  'aui-datepicker',
  function(A) {
    // code goes here
  }
);

Using DatePicker

First create an HTML element.

<div id="myDatepicker"></div>

Then create a new instance of DatePicker, using your HTML element as boundingBox.

An instance of DatePicker with three drop down selectors and calender widget:

AUI().use(
  'aui-datepicker',
  function(A) {
    new A.DatePickerSelect(
      {
        boundingBox: '#myDatepicker'
      }
    ).render();
  }
);

A simplified instance of DatePicker using the HTML input element #trigger, and a another element as a container:

AUI().use(
  'aui-datepicker',
  function(A) {
    new A.DatePicker(
      {
        boundingBox: '#myDatepicker',
        trigger: '#trigger'
      }
    ).render();
  }
);

Configuring DatePicker

The order that DatePicker renders the selectors can be set with appendOrder, and the date format for the simple picker can be set with dateFormat.

AUI().use(
  'aui-datepicker',
  function(A) {
    new A.DatePickerSelect(
      {
        appendOrder: [ 'm', 'd', 'y' ],
        boundingBox: '#myDatepicker'
      }
    ).render();

    var simpleDatepicker = new A.DatePicker(
      {
        boundingBox: '#myOtherDatepicker',
        calendar: {
          dateFormat: '%m/%d/%y'
        },
        trigger: '#trigger'
      }
    ).render();
  }
);

A DatePicker can also be created from markup by secifying the srcNode, boundingBox, and nodes for day, month, and year (select elements from markup).

AUI().use(
  'aui-datepicker',
  function(A) {
    new A.DatePickerSelect(
      {
        boundingBox: '#myDatepicker',
        dayNode: '#dayNode',
        monthNode: '#monthNode',
        srcNode: '#srcNode',
        yearNode: '#yearNode'
      }
    ).render();
  }
);
Note: srcNode should be located inside of the boundingBox, and the day, month, and year nodes inside of srcNode
For more information about configuration, check out our API Docs.