Hatena::ブログ(Diary)

Null and void

2015-11-03

MaterializeCSSのDate Pickerを日本語化する

ある意味本家GoogleMaterial Design Liteよりも良くできているのではないかという感もあるMaterializeCSSですが、カレンダー形式で日付を入力するDate Pickerは一般利用者をターゲットとした場合、日本語化無しに使用してもらうのは困難です。
サイトの解説にはLocalizationに関する説明は全くありませんが、Javascriptのソースファイルを解析するとMaterializeCSSのDate PickerはDate picker - pickadate.jsが元ネタであることがわかりますので、そちらを見ると"translations"の解説がありました。
その解説とソースコードを参照すると、日本語化に必要なパラメータはこんな感じになります。

    $(".datepicker").pickadate({
        monthsFull:  ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        weekdaysFull: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
        weekdaysShort:  ["日", "月", "火", "水", "木", "金", "土"],
        weekdaysLetter: ["日", "月", "火", "水", "木", "金", "土"],
        labelMonthNext: "翌月",
        labelMonthPrev: "前月",
        labelMonthSelect: "月を選択",
        labelYearSelect: "年を選択",
        today: "今日",
        clear: "クリア",
        close: "閉じる",
        format: "yyyy-mm-dd",
    });

このパラメータで起動されたDate Pickerはこのように表示され、また入力欄にはformatで指定した"yyyy-mm-dd"形式で格納されます。"yyyy/mm/dd"形式が欲しい場合はformatを変更してください。
f:id:chi-bd:20151103183034p:image

thanhnc@nicosys.jpthanhnc@nicosys.jp 2016/03/04 16:05 Thank you for sharing

まうろまうろ 2017/06/14 19:37 すばらしいノウハウです!

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元