YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Localization - Taiwan (Year Offset)

# Calendar Control: Localization - Taiwan (Year Offset)

Along with the locale customization parameters covered in the Japanese and German calendar examples, Calendar also supports the ability to set a year offset (from the Gregorian year), which can be used to support locales such as Taiwan (zh-TW), for which the year is 1911 years behind the Gregorian year. This example demonstrates how the year offset field can be used to create a Calendar for the zh-TW locale.

View example in new window.

## Setting up the Calendar

As with the other localization examples, we set up the various label, position and delimiter fields for the Taiwan (zh-TW) localized calendar:

// We set the year_offset configuration field to -1911 YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT:true, YEAR_OFFSET:-1911 } ); // Year/Month/Date formats for zh-TW: yyyy/mm/dd, mm/dd, yyyy/mm YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1); YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2); YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3); YAHOO.example.calendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1); YAHOO.example.calendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2); // Date labels for zh-TW var months = ["\u4e00\u6708","\u4e8c\u6708", "\u4e09\u6708", "\u56db\u6708", "\u4e94\u6708", "\u516d\u6708", "\u4e03\u6708", "\u516b\u6708", "\u4e5d\u6708", "\u5341\u6708", "\u5341\u4e00\u6708", "\u5341\u4e8c\u6708"]; var weekdays = ["\u661f\u671f\u65e5", "\u661f\u671f\u4e00", "\u661f\u671f\u4e8c", "\u661f\u671f\u4e09", "\u661f\u671f\u56db", "\u661f\u671f\u4e94", "\u661f\u671f\u516d"]; YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", months); YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", months); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", weekdays); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", weekdays); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM", weekdays); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", weekdays); // Month/Year label format for zh-TW YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_POSITION", 1); YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_MONTH_POSITION", 2); YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_SUFFIX", "\u5E74");

However for the Taiwan localized calendar, we also specify a year offset for the Calendar as shown on line 4 above. The year offset is applied whenever the Calendar renders a year as a string, or accepts a year as string input.

For example, when setting selector dates, or the page date using strings, we use the offset date (the Gregorian year-1911). The months and dates are the same as the Gregorian calendar:

// When working with strings, we use the offset year... YAHOO.example.calendar.cal1.select("98/8/1-98/8/8"); YAHOO.example.calendar.cal1.cfg.setProperty("PAGEDATE", "98/8"); // When working with Date objects, we need to have it reflect the Gregorian date... YAHOO.example.calendar.cal1.cfg.setProperty("MAXDATE", new Date(2009, 7, 20)); YAHOO.example.calendar.cal1.render();

It's important to note that whenever you're working with JavaScript Date objects, the year will/should always be set to the Gregorian year (and not offset by the year_offset amount), since the JavaScript Date object's month and date rollovers and leap year calculations will only work correctly when operating with the year set to the equivalent Gregorian year.

For this reason, any JavaScript Date objects returned by Calendar's methods, will always reflect the Gregorian year, even when a year offset is set, and any Date objects passed into Calendar methods, should reflect the Gregorian year.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### Calendar Control Examples:

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings