Smart Custom Fieldsプラグインで使われている日付ピッカーって、jQuery ui Datepickerなんですね。
jQuery ui Datepickerって、通常は日付のみなのですが、Timepickerというアドオンがあって、この拡張機能を使うと、日付と一緒に時間も入力できるようになるんです!
![【WordPress】Smart Custom Fieldsの日付ピッカーに時間を追加する](https://ippaiattena.co.jp/blog/wp-content/uploads/2018/03/49ef72b19c9b2addea8db508ca9b00b7.png)
![【WordPress】Smart Custom Fieldsの日付ピッカーに時間を追加する](https://ippaiattena.co.jp/blog/wp-content/uploads/2018/03/20cfce153c6dcbd30dc35695758066ae.png)
Smart Custom Fieldsをカスタマイズして、Timepickerを入れて日付と時間を入力できるカスタムフィールドを作ろう!という試みです。
Timepickerを動かすのに必要なファイルをダウンロードする
Adding a Timepicker to jQuery UI DatepickerのDownloadにある、Download Timepicker AddonからJSファイルを、required CSS.からCSSファイルをダウンロードしてきます。
これだけでは日本語に対応されないので、Download/Contribute on GitHubのGitHubから/dist/i18n/の中にある「jquery-ui-timepicker-ja.js」もダウンロードしてきます。
TimepickerファイルをSmart Custom Fieldsに読み込ませる
Smart Custom Fieldsの中に、ダウンロードしてきたファイルを入れます。
CSS
/wp-content/plugins/smart-custom-fields/css/jquery-ui-timepicker-addon.css
JS
/wp-content/plugins/smart-custom-fields/js/jquery-ui-timepicker-addon.js
/wp-content/plugins/smart-custom-fields/js/jquery-ui-timepicker-ja.js
class.field-datepicker.phpのeditor_enqueue_scripts()にてDatepickerのファイルを読み込んでいるので、ここを編集してTimepickerのファイルも読み込ませます。
50行目あたりです。
/wp-content/plugins/smart-custom-fields/classes/fields/class.field-datepicker.php
public function editor_enqueue_scripts() {
global $wp_scripts;
$ui = $wp_scripts->query( 'jquery-ui-core' );
wp_enqueue_style(
'jquery.ui',
'//ajax.googleapis.com/ajax/libs/jqueryui/' . $ui->ver . '/themes/smoothness/jquery-ui.min.css',
array(),
$ui->ver
);
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_script(
SCF_Config::PREFIX . 'editor-datepicker',
plugins_url( '../../js/editor-datepicker.js', __FILE__ ),
array( 'jquery', 'jquery-ui-datepicker' ),
false,
true
);
///////////////////////////////////////////////////////////////// ここから //
// Timepickerを追記
wp_enqueue_style( 'timepicker', plugins_url( 'smart-custom-fields/css/jquery-ui-timepicker-addon.css' ), array( 'jquery.ui' ) );
wp_enqueue_script( 'timepicker', plugins_url( 'smart-custom-fields/js/jquery-ui-timepicker-addon.js' ), array( 'jquery', 'jquery-ui-datepicker' ), false, true );
wp_enqueue_script( 'timepicker-ja', plugins_url( 'smart-custom-fields/js/jquery-ui-timepicker-ja.js' ), array( 'timepicker' ), false, true );
wp_enqueue_script( 'timepicker-cnf', plugins_url( 'smart-custom-fields/js/jquery-ui-timepicker-conf.js' ), array( 'timepicker' ), false, true );
//////////////////////////////////////////////////////////////// ここまで //
}
editor-datepicker.jsを編集して、DatepickerからTimepickerに変更する
/wp-content/plugins/smart-custom-fields/js/editor-datepicker.js
jQuery( function( $ ) {
$( '.smart-cf-meta-box-table' ).each( function( i, e ) {
$( e ).find( '.smart-cf-datepicker' ).each( function( i, e ) {
if ( $( e ).attr( 'disabled' ) !== 'disabled' ) {
//////////////////////////////////////////// ここから //
// Datepickerはコメントアウトします。
//$( e ).datepicker( $( e ).data( 'js' ) );
// Timepickerに変更します。
$( e ).datetimepicker( $( e ).data( 'js' ) );
//////////////////////////////////////////// ここまで //
}
} );
} );
$( document ).on( 'smart-cf-after-add-group', function( e, obj ) {
var parent = $( obj.button ).parents( '.smart-cf-meta-box-repeat-tables' );
parent.find( '.smart-cf-datepicker' ).each( function( i, e ) {
if ( $( e ).attr( 'disabled' ) !== 'disabled' ) {
//////////////////////////////////////////// ここから //
// Datepickerはコメントアウトします。
//$( e ).datepicker( $( e ).data( 'js' ) );
// Timepickerに変更します。
$( e ).datetimepicker( $( e ).data( 'js' ) );
//////////////////////////////////////////// ここまで //
}
} );
} );
} );
日付ピッカーのカスタムフィールドを見てみると、時間が追加されたことが確認できます。
![【WordPress】Smart Custom Fieldsの日付ピッカーに時間を追加する](https://ippaiattena.co.jp/blog/wp-content/uploads/2018/03/041c8e89b678b46731ac2144bc87c2e7.png)
Smart Custom Fieldsのバージョンは3.1.6で行いました。