The behavior shown here (JavaScript) is only to show the calendar in its visible and hidden states. You should write your own code to handle the calendar population and interaction. See the Design Pattern Library for more information. You may have multiple Date Choosers on one screen.
The Date Chooser pattern is an icon and a calendar which immediately follow the input field in the HTML. The icon is a link of class ux-icon-date-chooser, and the calendar is a table of class ux-date. The bar which lists the back/forward arrows, close icon, and displayed month is a table caption. See the source for more details on its structure.
Each day is a table cell within the table body. These fall into the following classes (and can overlap) listed in the order in which they should appear in your class attribute:
ux-date-off-day: denotes a date that is selectable but occurs on a non-business dateux-date-other-month: denotes a date that is not selectable and occurs in an adjacent monthux-date-today: denotes today's dateux-date-selected: denotes the user's current selection (if applicable)© Optum 2015 - Matt Lavallee - Senior UI/UX Designer, Inc. - All Rights Reserved