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
そもそも基本的な使い方が間違っているのかな?
と思いつつも、このお話については、各所さまざまな議論が発生しているようなので、もう少しじっくりと調べてみたいと思います。
コメントする