jQuery の datepicker でカレンダーの表示月を変える
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ カレンダー表示するときの月を変える
◆ input の日付は変えない
◆ ボタンおして好きにカレンダー表示を切り替える
◆ beforeShow で setTimeout 設定して 表示後に _updateDatepicker する
◆ input の日付は変えない
◆ ボタンおして好きにカレンダー表示を切り替える
◆ beforeShow で setTimeout 設定して 表示後に _updateDatepicker する
既存ページをイジっていて カレンダーの挙動かえたいなーと思うことがありました
使われていたのは jQuery UI の datepicker
http://api.jqueryui.com/datepicker/
やりたいことを詳しく書くと
API みても 関係ありそうなものは setDate だけ
しかも使ったら input の値が変わってしまう
内部処理を見て private 関数 (private 扱いだけど外から触れる) を使ってどうにかしようと色々みてみると beforeShow でインスタンスの drawYear と drawMonth を変えれば表示月を変更できそう!
だったのですが _showDatepicker の中で beforeShow のリスナの呼び出しから drawYear などを使って DOM を生成する _updateDatepicker の呼び出しの間に drawYear などのプロパティの値がリセットされる処理がありました
普通にカレンダー更新の直前に好きな年月を設定するのはソース改変なしだと難しそうです
しかたなく 非同期で後から処理させるために setTimeout を 0 秒後に設定して 再度 _updateDatepicker を手動で呼び出すようにしました
2020 年 1 月に変更する例です
datepicker インスタンスの drawYear と drawMonth を書き換えて _updateDatepicker にインスタンスを渡せばカレンダーを書き換えてくれるので ボタン押したらカレンダー変更のほうは簡単にできます
使われていたのは jQuery UI の datepicker
http://api.jqueryui.com/datepicker/
やりたいことを詳しく書くと
- 閉じてる状態からカレンダー表示したときの表示年月を自由に設定
- input の値と違う月にしても input は変えない
- ボタン押して 1 年前や 6 ヶ月後にジャンプ もしくは相対値じゃなくてなにかの処理算出した月にジャンプ
API みても 関係ありそうなものは setDate だけ
しかも使ったら input の値が変わってしまう
内部処理を見て private 関数 (private 扱いだけど外から触れる) を使ってどうにかしようと色々みてみると beforeShow でインスタンスの drawYear と drawMonth を変えれば表示月を変更できそう!
だったのですが _showDatepicker の中で beforeShow のリスナの呼び出しから drawYear などを使って DOM を生成する _updateDatepicker の呼び出しの間に drawYear などのプロパティの値がリセットされる処理がありました
普通にカレンダー更新の直前に好きな年月を設定するのはソース改変なしだと難しそうです
しかたなく 非同期で後から処理させるために setTimeout を 0 秒後に設定して 再度 _updateDatepicker を手動で呼び出すようにしました
$("input#test").datepicker({
beforeShow : function(input, inst){
setTimeout(_ => {
inst.drawYear = 2020
inst.drawMonth = 0
$.datepicker._updateDatepicker(inst)
}, 0)
}
})
beforeShow : function(input, inst){
setTimeout(_ => {
inst.drawYear = 2020
inst.drawMonth = 0
$.datepicker._updateDatepicker(inst)
}, 0)
}
})
2020 年 1 月に変更する例です
datepicker インスタンスの drawYear と drawMonth を書き換えて _updateDatepicker にインスタンスを渡せばカレンダーを書き換えてくれるので ボタン押したらカレンダー変更のほうは簡単にできます