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 and CSS files, if you haven't yet.

<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Datepicker module.

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

Using Datepicker

Create an element to trigger a Datepicker:

<button class="btn">Select the date</button>

Now create a new instance of Datepicker component and define your trigger.

YUI().use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: 'button'
      }
    );
  }
);

Configuring Datepicker

There are some other options that you can pass to your Datepicker instance.

For example, you can set a specific mask for the date using a pattern called strftime. If you are familiar to PHP you probably played with it.

YUI().use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: 'button',
        mask: '%m/%d/%y'
      }
    );
  }
);

Besides that, you can define which date format you prefer. Let's say you are from Japan, go ahead and define lang attribute on YUI().

YUI({ lang: 'ja' }).use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: 'button'
      }
    );
  }
);

Also, you can increase the number of calendars by defining panes and selectionMode attributes.

YUI().use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: 'button',
        calendar: {
          selectionMode: 'multiple'
        },
        panes: 2
      }
    );
  }
);
For more information about configuration, check out our API Docs.