◆ カレンダー表示するときの月を変える
◆ input の日付は変えない
◆ ボタンおして好きにカレンダー表示を切り替える
◆ beforeShow で setTimeout 設定して 表示後に _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)
    }
})

2020 年 1 月に変更する例です

datepicker インスタンスの drawYear と drawMonth を書き換えて _updateDatepicker にインスタンスを渡せばカレンダーを書き換えてくれるので ボタン押したらカレンダー変更のほうは簡単にできます