Smart Custom Fieldsプラグインで使われている日付ピッカーって、jQuery ui Datepickerなんですね。

jQuery ui Datepickerって、通常は日付のみなのですが、Timepickerというアドオンがあって、この拡張機能を使うと、日付と一緒に時間も入力できるようになるんです！

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' ) );
				//////////////////////////////////////////// ここまで //
			}
		} );
	} );
} );

日付ピッカーのカスタムフィールドを見てみると、時間が追加されたことが確認できます。

Smart Custom Fieldsのバージョンは3.1.6で行いました。