jQuery UIのDatepickerで「Today」ボタンが機能しない場合の対処方法
jQuery UIのDatepickerを実装したのですが、「本日の日付」をセットする「Today」ボタンが効きません。
少し調べてみると、本件についてはさまざまな記事を見つけることができるのですが、どうやらデフォルトのバグのようです。
今回、発生したのは以下の環境です。
- jQuery 3.2.1
- jQuery UI 1.12.1
例えばオフィシャルのサンプルに倣って、以下のように「Today」ボタンと「Done」ボタンを表示する設定であるオプション「showButtonPanel」をセットして、Datepickerを構築します。
$("#datepicker").datepicker({
showButtonPanel: true
});
そうすると上図のように両ボタンは表示されますが、なぜか「Today」ボタンが機能せず、押すことができません。
オフィシャルのサンプルページでも確認してみましたが、同様に機能していないようです。
Datepicker | jQuery UI
webで調べた中で、いろいろと解決策はあるようですが、以下のコードが一番シンプルだったので、メモとして残しておきます。
$.datepicker._gotoToday = function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
var date = new Date();
this._setDate(inst,date);
this._hideDatepicker();
}
このコードをdatepicker関数をコールする前に実行します。そうすると「Today」ボタンが機能するようになります。
ビジュアル的には、ボタン自体にアルファがかってて押せないようなイメージですが、こちらは自身でCSSで調整します。
参考にさせていただいたのは以下のページです。
Override Today button in Jquery UI Datepicker · GitHub
そもそも基本的な使い方が間違っているのかな?
と思いつつも、このお話については、各所さまざまな議論が発生しているようなので、もう少しじっくりと調べてみたいと思います。

コメントする