jQueryUIのDatepicker ってカレンダー表示にとても便利ですよね。

そのまま使う分にも大体の場合は問題ないのですが個人的にカレンダーから日付を選択した際にカレンダーが閉じてしまうのが不便と思うことがあり、閉じずに連続して日付を選択するようなことが出来ないかを調べてみました。

 

 

 

カレンダーから何らかの候補日を選択するとして、それが1つの場合はカレンダーを自動で閉じてくれたほうが面倒がなくてよいのですが、複数の候補日を選択したいといった場合にいちいちカレンダーが閉じてしまうのはユーザーにとって返って面倒になったりします。

日付を選択してカレンダーを閉じさせない方法として一番手っ取り早い方法は、Datepickerをインラインで表示することのようです。

 

デモ でも確認することができます。

ただ、インライン表示するとデザインの都合などでカレンダーが返って邪魔というケースもあると思うので、カレンダーをオーバーレイ表示しつつ日付を選択しても閉じないようにする方法を調べてみると、下記のサイトが参考になりました。

 

jQuery Datepicker: Prevent closing picker when clicking a date

 

幾つか対応方法が記載されていますが、個人的にjQueryUI本体に手を入れるのは避けたかったり、内部処理をオーバーライドするのはjQueryのバージョンの違いからかうまく動作せず、手っ取り早い方法として下記のonSelectオプションにインライン表示（オプション）を切り替える処理で逃げました。

 

$(function(){
$("#myCalendar").datepicker({
showOn: 'both',
dateFormat: 'yy/mm/dd',
changeYear: true,
changeMonth: true,
yearRange: 'c-5:c+5',
showButtonPanel: true,
onSelect: function (dateText, inst) {
inst.inline = true;
},
onClose: function (dateText, inst) {
inst.inline = false;
}
});
});

 

onSelect（日付を選択した）実行時に内部のインラインオプションをtrueに切替、onClose（カレンダーを閉じた）実行時に元に戻すという処理を追加しています。

Datepickerの内部処理としてインライン表示のフラグが立っていればカレンダーを閉じないようで（インライン表示をしているのでカレンダーを閉じる必要がないということでしょうけど）、それを逆手に取った処理になっています。

 

ただ、問題はshowButtonPanelオプションを有効にし、今日（Today）や実行（Done）ボタンを表示している場合、日付選択時に実行ボタンが消えてしまうという不具合が出てしまいます。

インライン表示している場合、元々実行ボタンは表示されない仕様のようで、フラグを変えた瞬間に非表示になってしまいます。

元々カレンダーはフォーカスを外すと自動的に消えてくれる仕様になっているので、個人的には実行ボタンを最初から表示しないようにCSSで対応することにしました（今日ボタンは表示したままにする）。

 

<style>
button.ui-datepicker-close {display: none;}
</style>

 

今日ボタンさえいらないということであれば、showButtonPanelオプションをfalseにして消してしまったほうが手っ取り早いかと思います。