Timepicker

• Introduction
• Basic Example
• Real World Example

Create a dynamic timepicker that allows users to select the time with a popover.

---

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 Timepicker module.

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

---

Using Timepicker

Create an element to trigger a Timepicker:

<input class="input-large" type="text" placeholder="hh:mm" value="12:00 AM">

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

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

---

Configuring Timepicker

There are some other options that you can pass to your Timepicker 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-timepicker',
  function(Y) {
    new Y.TimePicker(
      {
        trigger: 'input',
        mask: 'Dinner at %H:%M',
      }
    );
  }
);