MaterializeCSS 付属の日付ピッカーで、日付がタップされたら日付ピッカーを閉じるようにする

MaterializeCSS と付属の日付ピッカー

Materialize デザインを容易に実装できる MaterializeCSS。

MaterializeCSS
http://materializecss.com/

Bootstrap のデザインに飽きた最近は、この CSS ライブラリを採用することが多くなってきた。

さてこの MaterializeCSS には、出典は pickadate.js の、MaterializeCSS 同梱用にカスタマイズされた日付ピッカーが同梱されている。この日付ピッカー、見た目もなかなかよさげなので使うことが多い。
ところがつい先日、その扱いでちょっと躓いたところがあったのでメモしておく。

日付をタップしたらピッカーは閉じてほしい

もっぱらスマホを対象とした Web アプリで、「日付をタップし、選択したら、即座に日付ピッカーは閉じてほしい」という要件が発生。

たしかにタッチデバイスではそのほうが軽快な操作感が得られる。まぁ、たぶん簡単だろうと思って対応を試みたのだが、これがアテが外れて、四苦八苦する羽目に。

詳しい顛末は別の機会に譲るとして、紆余曲折の末、編み出した秘伝のソースコードはこんな感じ (下記コードは TypeScript)。

$(".datepicker").pickadate({

  onSet: (ctx: any) => {

    if (typeof(ctx) == 'number') {

      setTimeout(() => {

        $('.picker--opened .picker__close').click();

      }, 0);

    }

  }

});

解説

MaterializeCSS にて日付ピッカーを有効にするには、上記のとおり、対象 DOM 要素をセレクタ指定した jQuery オブジェクトについて pickadate() メソッドを呼び出すことで適用する。

このとき、pickadate() メソッドの引数に各種オプション指定ができるのだが、ここで、onSet プロパティにコールバック関数を仕込んでおく。

こうすることで、日付ピッカー上で何かしら選択動作が行われると、この onSet プロパティに指定したコールバック関数が呼び出されるようになるのだ。

なので、方向性としては onSet コールバック関数が呼び出されたら、何か日付が選択されたということで、そのタイミングで日付ピッカーを閉じてやればよさそうだ。

ただしこの onSet コールバック関数は、日付の部分がタップ(選択)されたときのみならず、年や月が変更されたときにも発生する。そこで onSet コールバック関数が呼び出されるときに引数に渡されるコンテキストオブジェクトも調べるようにする。

onSet コールバック関数の引数に渡されるコンテキストオブジェクトに、型が数値である select というプロパティが付いていたら、これが (年や月の変更ではなく) 日の部分がタップ、選択された意味となる。

こうした判断を経て、現在可視状態にある日付ピッカー要素の中の、close ボタンに対してクリック操作を JavaScript から起動することで、日付ピッカーが閉じられるようになる。

なお、UI 上のフィードバックを行うチャンスのために、setTimeout(...) で、いちど JavaScript 実行スレッドを抜けておくようにした。


以上の措置で、日付部分をタップ(選択)すれば日付ピッカーが自動で閉じるように作ることができた。