MaterializeCSSのDate Pickerを日本語化する
ある意味本家GoogleのMaterial 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を変更してください。