goo blog サービス終了のお知らせ 

13F

備忘録

jQuery Date Pickerを使おうとする

2007-12-24 22:57:04 | Web
HTMLフォーム上でカレンダーによる日付入力が必要になったので、いまは jQuery をメインにしようと計画していることだし、jQuery Date Picker を使おうとしてみる。

問題1 - 週が月曜からスタートしている

date.js のあとで、
<script type="text/javascript">
Date.firstDayOfWeek = 0;
</script>
とやればいいらしい。

問題2 - いろんな部分が英語

これも date.js で定義しているので、上書きすればいい。
<script type="text/javascript">
Date.dayNames = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
Date.abbrDayNames = ['日', '月', '火', '水', '木', '金', '土'];
Date.monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
Date.abbrMonthNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
</script>

問題3 - 月表示部分の順序がおかしい

上のように日本語化しても、順序は "Dec 2007" の英語版と同じなので「12月 2007」のようになる。これは jquery.datePicker.js にハードコーディングなので、「2007年 12月」のようにしたければ直接変更するしかなさそう。

問題4 - 年月日が個別の入力欄の場合の使い方が難しい

正確には、サンプルがない。select要素で選ぶタイプならサンプルにあるのでこれを参考にすればなんとかなるけど、年月日のフィールドのidを固定で与えていて汎用的ではないし「開始日・終了日」みたいに複数つくる場合も面倒。この部分は自分でなんとかする必要がある。

そもそも、最初のサンプルからして謎で、
$(function()
{
  $('.date-pick').datePicker();
});
2つの入力欄のうちどっちに入るかはどうやって指定/判断するのだろう?(DOMツリーでいちばん近いところとか?)。これがわかれば、idを固定にしないように変形できるかもしれないのであとで調べてみる。