Datepicker

• Introduction
• Basic Example
• Multiple Example
• Real World Example

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="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://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
      }
    );
  }
);

---

Using Datepicker with Form Validator

If you plan to use Form Validator to validate your Datepicker input, please note, you'll need to manually call validateField after the selectionChange event.

var myFormValidator = new Y.FormValidator( /* ... */ );
var myDatePicker = new Y.DatePicker( /* ... */ );

myDatePicker.after(
    'selectionChange',
    function(event) {
        myFormValidator.validateField('dateInputName');
    }
);