HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

jQuery UIのDatepickerを実装したのですが、「本日の日付」をセットする「Today」ボタンが効きません。
少し調べてみると、本件についてはさまざまな記事を見つけることができるのですが、どうやらデフォルトのバグのようです。

今回、発生したのは以下の環境です。

  • jQuery 3.2.1
  • jQuery UI 1.12.1

例えばオフィシャルのサンプルに倣って、以下のように「Today」ボタンと「Done」ボタンを表示する設定であるオプション「showButtonPanel」をセットして、Datepickerを構築します。

$("#datepicker").datepicker({
	showButtonPanel: true
});

Datepicker

そうすると上図のように両ボタンは表示されますが、なぜか「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

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

このエントリーをはてなブックマークに追加

Monthly Archives

Search