東日本橋の制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

Tech & Tips WordPress コーディング プログラミング

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のフィールド等も細かく設定を変えられそうです。
この記事をシェアする:
◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

私たちと一緒に働きませんか?

「ACFのDate Time Pickerを30分区切りにする」はいかがでしたか?
株式会社プレスマンでは、 WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。 まずは募集職種をご覧の上、お気軽にお問い合わせください。 あなたとお会いできるのを楽しみにしています。

採用情報を見る

-Tech & Tips, WordPress, コーディング, プログラミング

Copyright© PRESSMAN*Tech , 2020 All Rights Reserved Powered by STINGER.