Skip to content
22/06/2010 / Danresa Consultoria de Informática

Using the YUI 3 Calendar Date Selector from Alloy

The Alloy components (contributed by Nate Cavanaugh and Eduardo Lundgren from Liferay) in the YUI 3 Gallery are simple to use. This example illustrates the use of the Alloy calendar to progressively enhance a set of select elements for date selection.

Let’s start with the markup — the HTML that will be on the page and functioning regardless of whether JavaScript is enabled. Alloy’s Calendar module does not require this markup; you can feed it an empty element and it will create the select elements for you in the event that your use case would not benefit from progressive enhancement.

January

February

1

2

2009

With this markup in place (or with just an empty root element if we aren’t progressively enhancing existing form fields), we bring in the Alloy Calendar module with datepicker selection support from the YUI 3 Gallery. This requires us to have YUI 3 on the page and then to follow the configuration step outlined on the module’s Gallery page.

YUI({
// All of this configuration information can be cut-and-pasted from the Gallery entry for
// this module: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
gallery: ‘gallery-2010.06.07-17-52’,
modules: {
‘gallery-aui-skin-base’: {
fullpath: ‘http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
gallery-aui-skin-base-min.css’,
type: ‘css’
},
‘gallery-aui-skin-classic’: {
fullpath: ‘http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
gallery-aui-skin-classic/css/
gallery-aui-skin-classic-min.css’,
type: ‘css’,
requires: [‘gallery-aui-skin-base’]
}
}
}).use(‘gallery-aui-calendar-datepicker-select’, function(Y) {
var datePickerSelect = new Y.DatePickerSelect({
displayBoundingBox: ‘#calendar’,
dateFormat: ‘%m/%d/%y’,
yearRange: [ 2009, 2012 ],
dayField: Y.one(“#dayselect”),
dayFieldName: “day”,
monthField: Y.one(“#monthselect”),
monthFieldName: “month”,
yearField: Y.one(“#yearselect”),
yearFieldName: “year”
}).render();
});

Here’s a live version of this simple example.

It’s as simple as that. The configuration properties for datePickerSelect are lucidly defined in the Alloy documentation. In this example, the properties are used to set the root element, format the date, set the date range, and then wire up our existing select elements to the widget instance so that it knows which form fields to use for progressive enhancement. In practice, only the root element (displayBondingBox) is a required property.

Check out the YUI 3 Gallery roster for a full list of the Alloy UI contributions.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: