w2ui ver1.2のローカライズ その2

次はカレンダー。公式サンプルを元に日本語化してみました。

サンプルから該当箇所抜粋

<div id="form">
    <div class="w2ui-page page-0">
        <div class="w2ui-label">Date:</div>
        <div class="w2ui-field">
            <input name="field_date" size="16" type="text" />
        </div>
    </div>
</div>

1. まず、カレンダーの月・曜日を日本語化する為のjson (ja-JP.json)を用意

{
    "shortdays"  : ["月", "火", "水", "木", "金", "土", "日"],
    "fullmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
}

2. ja-JP.jsonを"/json_path/locale"に配置する

3. カレンダーフィールド用のオプションを下記の様に設定する

$('#form').w2form({ 
    name   : 'form',
    fields : [{
        name: 'field_date', type: 'date', options: {
            format  : 'yyyy/mm/dd', // 日付書式
            start   : '2013/05/10', // 選択可能範囲(開始日)
            end     : ''            // 選択可能範囲(終了日)
        }
    }]
});

4. w2utils.localeでjsonをロードする

var file = {
    lang: 'ja-JP',
    path: '/json_path'
};

w2utils.locale(file);

ローカライズ前後の違いはコチラ



　本来であれば、日曜を左端に持ってきたいところですが、何らかの形でw2fieldのcalendar_monthを差し替えなければならないのが面倒です。っていうか、できればやりたくない。外部からの設定だけでできないですかねー...

w2ui ver1.2のローカライズ

最近、w2uiという軽量なJavaScript用widgetライブラリがバージョンアップされました


ver 1.2でメッセージのローカライズがサポートされたっぽいのですが、公式ドキュメントに具体例が記載されていないので、軽く調べてみました。


1. まず、メッセージ用jsonを用意(ファイル名はja-JP.json)

{
    "phrases"   : {
        "Required field": "必須項目です",
    }
}

2. ja-JP.jsonを"/json_path/locale"に配置する

3. w2utils.localeでjsonをロードする

var file = {
    lang: 'ja-JP',
    path: '/json_path'
};

w2utils.locale(file);

こんな感じになります



pathに"/locale"が付加される点に注意。ver 1.1の時は、ソース内リテラルを直接編集するしかなかったので、大分楽になった印象です。内部的にはリテラルが分離され、w2utils.lang()を噛ませるようになった模様。