ACFのDate Time Pickerを30分区切りにする

ACFのDate Time PickerはjQuery UIのdatetimepickerを表示しています。

フィールドの設定から表示フォーマット、返り値のフォーマットは設定可能ですが
他にdatetimepickerで可能な細かいカスタマイズ、設定ができませんでした。

今回はその中で「分」の選択肢を30分区切りにする方法を紹介したいと思います。
このやり方を理解すると、他のカスタマイズもわかるようになるかと思います。

javascript内のフックを探す

acf-input.js内でdate_time_pickerを検索かけると以下のようなコードが見つかると思います。

args = acf.applyFilters('date_time_picker_args', args, this);

これはACFのDate Time Pickerフィールド毎にjQuery UIのdatetimepickerインスタンスを生成する際に渡すオプションを変更できるhookです。

インスタンスに渡すオプションにstepMinuteを追加

このhookを使用してdatetimepickerのオプションにあるstepMinuteの値を変更し、30分区切りの選択肢にしてみましょう。

var change_stepMinute = function ( args, field ) {
    args.stepMinute = 30;
    return args;
}
acf.addFilter( 'date_time_picker_args', change_stepMinute );

30分単位の選択肢に変更できました！

第二引数にはフィールド情報が入っているので複数のDate Time Pickerフィールドでも条件分岐をすることで個別の設定ができそうです。

余談 acf.addFilterって何者？

ここで使用しているacf.addFilterというのはACFの javascript APIとして提供されている機能であり
他のjQuery UIのフィールド等も細かく設定を変えられそうです。