In this example, an instance of the Uize.Widget.Calendar class is used to wire up a simple calendar widget. The HTML markup for the calendar widget is provided by the Uize.Templates.Calendar JavaScript template. Initially, the calendar's value is set to today's date. However, you can change it's value by clicking on a different date of this month, or you can use the arrows to navigate to and select a date from a different month.
The month and year that the calendar displays are accessible through the month and year state properties, respectively. Below the calendar widget is a summary of its current state and some links to let you programmatically interact with the calendar. Play around with the calendar widget and see how the state updates, and mess with the links to control the calendar.
- Current State
- calendar.get ('value') == new Date ('')
- calendar.get ('month') ==
- calendar.get ('year') ==
- Navigate Programmatically
- MONTH
- PREVIOUS MONTH: calendar.set ({month:calendar.get ('month') - 1})
- NEXT MONTH: calendar.set ({month:calendar.get ('month') + 1})
- YEAR
- PREVIOUS YEAR: calendar.set ({year:calendar.get ('year') - 1})
- NEXT YEAR: calendar.set ({year:calendar.get ('year') + 1})
- MONTH