Add native date, time and color picker inputs behind a beta feature

assets/src/js/_acf-field-color-picker.js

@@ -20,15 +20,32 @@
 			return this.$( 'input[type="text"]' );
 		},
 
+		$inputNative: function () {
+			return this.$( 'input[type="color"]' );
+		},
+
 		setValue: function ( val ) {
 			// update input (with change)
 			acf.val( this.$input(), val );
 
+			// Native input only needs the hex value.
+			var $native = this.$inputNative();
+			if ( $native.length ) {
+				$native.val( val || '' );
+				return;
+			}
+
 			// update iris
 			this.$inputText().iris( 'color', val );
 		},
 
 		initialize: function () {
+			// Native input: the browser provides the picker, we only keep the
+			// hidden input in sync with the hex value the input reports.
+			if ( this.$control().data( 'native' ) === 1 ) {
+				return this.initializeNative();
+			}
+
 			// vars
 			var $input = this.$input();
 			var $inputText = this.$inputText();
@@ -73,7 +90,21 @@
 			$inputText.wpColorPicker( args );
 		},
 
+		initializeNative: function () {
+			var self = this;
+			var $native = this.$inputNative();
+
+			$native.on( 'change input', function () {
+				acf.val( self.$input(), $native.val() );
+			} );
+		},
+
 		onDuplicate: function ( e, $el, $duplicate ) {
+			// Native inputs carry no generated markup to clean up.
+			if ( this.$inputNative().length ) {
+				return;
+			}
+
 			// The wpColorPicker library does not provide a destroy method.
 			// Manually reset DOM by replacing elements back to their original state.
 			$colorPicker = $duplicate.find( '.wp-picker-container' );

assets/src/js/_acf-field-date-picker.js

@@ -19,7 +19,17 @@
 			return this.$( 'input[type="text"]' );
 		},
 
+		$inputNative: function () {
+			return this.$( 'input[type="date"]' );
+		},
+
 		initialize: function () {
+			// Native input: the browser provides the picker, we only keep the
+			// hidden input in sync with the ISO value the input reports.
+			if ( this.$control().data( 'native' ) === 1 ) {
+				return this.initializeNative();
+			}
+
 			// save_format: compatibility with ACF < 5.0.0
 			if ( this.has( 'save_format' ) ) {
 				return this.initializeCompatibility();
@@ -76,6 +86,22 @@
 			acf.doAction( 'date_picker_init', $inputText, args, this );
 		},
 
+		initializeNative: function () {
+			var self = this;
+			var $native = this.$inputNative();
+
+			$native.on( 'change input', function () {
+				self.syncNative();
+			} );
+		},
+
+		syncNative: function () {
+			var val = this.$inputNative().val();
+
+			// The stored format is Ymd, the native input reports Y-m-d.
+			acf.val( this.$input(), val ? val.replace( /-/g, '' ) : '' );
+		},
+
 		initializeCompatibility: function () {
 			// vars
 			var $input = this.$input();
@@ -118,6 +144,13 @@
 		setValue: function ( val ) {
 			acf.val( this.$input(), val );
 
+			// Native input expects the ISO value.
+			var $native = this.$inputNative();
+			if ( $native.length ) {
+				$native.val( val ? this.toNative( val ) : '' );
+				return;
+			}
+
 			const $inputText = this.$inputText();
 			if ( val && $inputText.length ) {
 				try {
@@ -136,13 +169,32 @@
 			}
 		},
 
+		toNative: function ( val ) {
+			// Ymd to Y-m-d
+			if ( /^\d{8}$/.test( val ) ) {
+				return (
+					val.substring( 0, 4 ) +
+					'-' +
+					val.substring( 4, 6 ) +
+					'-' +
+					val.substring( 6, 8 )
+				);
+			}
+			return val;
+		},
+
 		onBlur: function () {
 			if ( ! this.$inputText().val() ) {
 				acf.val( this.$input(), '' );
 			}
 		},
 
 		onDuplicate: function ( e, $el, $duplicate ) {
+			// Native inputs carry no generated markup to clean up.
+			if ( this.$control().data( 'native' ) === 1 ) {
+				return;
+			}
+
 			$duplicate
 				.find( 'input[type="text"]' )
 				.removeClass( 'hasDatepicker' )

assets/src/js/_acf-field-date-time-picker.js

@@ -6,7 +6,40 @@
 			return this.$( '.acf-date-time-picker' );
 		},
 
+		$inputNative: function () {
+			return this.$( 'input[type="datetime-local"]' );
+		},
+
+		syncNative: function () {
+			var val = this.$inputNative().val();
+
+			if ( val ) {
+				// The stored format is Y-m-d H:i:s, the input reports Y-m-dTH:i(:s).
+				val = val.replace( 'T', ' ' );
+
+				// The input can report HH:MM, but the stored value always has seconds.
+				if ( /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test( val ) ) {
+					val += ':00';
+				}
+			}
+
+			acf.val( this.$input(), val );
+		},
+
+		toNative: function ( val ) {
+			// Y-m-d H:i:s to Y-m-dTH:i:s
+			return val.indexOf( ' ' ) !== -1 ? val.replace( ' ', 'T' ) : val;
+		},
+
 		setValue: function ( val ) {
+			// The native input only needs the ISO value, the parent handles the rest.
+			var $native = this.$inputNative();
+			if ( $native.length ) {
+				acf.val( this.$input(), val );
+				$native.val( val ? this.toNative( val ) : '' );
+				return;
+			}
+
 			acf.val( this.$input(), val );
 
 			const $inputText = this.$inputText();
@@ -52,6 +85,12 @@
 		},
 
 		initialize: function () {
+			// Native input: the browser provides the picker, we only keep the
+			// hidden input in sync with the ISO value the input reports.
+			if ( this.$control().data( 'native' ) === 1 ) {
+				return this.initializeNative();
+			}
+
 			// vars
 			var $input = this.$input();
 			var $inputText = this.$inputText();
@@ -119,6 +158,14 @@
 			// action
 			acf.doAction( 'date_time_picker_init', $inputText, args, this );
 		},
+
+		initializeNative: function () {
+			var self = this;
+
+			this.$inputNative().on( 'change input', function () {
+				self.syncNative();
+			} );
+		},
 	} );
 
 	acf.registerFieldType( Field );

assets/src/js/_acf-field-time-picker.js

@@ -6,9 +6,31 @@
 			return this.$( '.acf-time-picker' );
 		},
 
+		$inputNative: function () {
+			return this.$( 'input[type="time"]' );
+		},
+
+		syncNative: function () {
+			var val = this.$inputNative().val();
+
+			// The input can report HH:MM, but the stored value is always H:i:s.
+			if ( /^\d{2}:\d{2}$/.test( val ) ) {
+				val += ':00';
+			}
+
+			acf.val( this.$input(), val );
+		},
+
 		setValue: function ( val ) {
 			acf.val( this.$input(), val );
 
+			// Native input only needs the stored value, it is already ISO.
+			var $native = this.$inputNative();
+			if ( $native.length ) {
+				$native.val( val || '' );
+				return;
+			}
+
 			const $inputText = this.$inputText();
 			if ( val && $inputText.length ) {
 				try {
@@ -36,6 +58,12 @@
 		},
 
 		initialize: function () {
+			// Native input: the browser provides the picker, we only keep the
+			// hidden input in sync with the value the input reports.
+			if ( this.$control().data( 'native' ) === 1 ) {
+				return this.initializeNative();
+			}
+
 			// vars
 			var $input = this.$input();
 			var $inputText = this.$inputText();
@@ -73,6 +101,14 @@
 			// action
 			acf.doAction( 'time_picker_init', $inputText, args, this );
 		},
+
+		initializeNative: function () {
+			var self = this;
+
+			this.$inputNative().on( 'change input', function () {
+				self.syncNative();
+			} );
+		},
 	} );
 
 	acf.registerFieldType( Field );

assets/src/sass/_fields.scss

@@ -632,6 +632,14 @@ html[dir="rtl"] input.acf-is-prepended.acf-is-appended {
 
 .acf-color-picker {
 
+	/* The native color input has an intrinsic size, keep it in line with the field row. */
+	&.acf-native-picker input[type="color"] {
+		width: 60px;
+		height: 34px;
+		padding: 2px;
+		cursor: pointer;
+	}
+
 	.wp-color-result {
 		border-color: $wp-input-border;
 

docs/features/field/color-picker/index.md

@@ -15,3 +15,7 @@ The Color Picker field provides an interactive interface for selecting colors. I
 - Default Value - Set a default color
 - Return Format - Choose between string, array, or rgba format
 - Enable Opacity - Allow transparency selection
+
+## Native Input
+
+When the native pickers beta feature is enabled, this field uses the browser's built-in color input for plain hex values. The stored value is unchanged. The browser input has no transparency, palette or color wheel support, so fields using Enable Transparency, a custom palette or a non-hex value keep the existing picker.

docs/features/field/date-picker/index.md

@@ -16,3 +16,7 @@ The Date Picker field provides a calendar interface for selecting dates. It offe
 - Return Format - How the date is stored/returned
 - Week Starts On - Set first day of week
 - First Day - Configure week start day
+
+## Native Input
+
+When the native pickers beta feature is enabled, this field uses the browser's built-in date input instead of the bundled calendar. The stored value is unchanged. The browser controls how the date is displayed, so the Display Format and Week Starts On settings no longer apply. Fields using a legacy Save Format keep the bundled calendar.

docs/features/field/date-time-picker/index.md

@@ -16,3 +16,7 @@ The Date Time Picker field combines date and time selection into a single interf
 - Return Format - How the datetime is stored/returned
 - Week Starts On - Set first day of week
 - Time Increment - Control minute stepping
+
+## Native Input
+
+When the native pickers beta feature is enabled, this field uses the browser's built-in date and time inputs instead of the bundled picker. The stored value is unchanged. The browser controls how the value is displayed, so the Display Format and Week Starts On settings no longer apply.

docs/features/field/time-picker/index.md

@@ -17,3 +17,7 @@ The Time Picker field provides an interface for selecting time values with custo
 - Time Increment - Minute steps
 - Placeholder - Helper text
 - Default Value - Preset time
+
+## Native Input
+
+When the native pickers beta feature is enabled, this field uses the browser's built-in time input instead of the bundled picker. The stored value is unchanged. The browser controls how the time is displayed, so the Display Format setting no longer applies.

includes/admin/beta-features.php

@@ -137,8 +137,15 @@ public function admin_body_class( $classes ) {
 		 * @return  void
 		 */
 		private function include_beta_features() {
-			acf_include( 'includes/admin/beta-features/class-scf-beta-feature.php' );
-			acf_include( 'includes/admin/beta-features/class-scf-beta-feature-connect-fields.php' );
+			// Only include the feature classes once, this method can run more than once per request.
+			static $included = false;
+
+			if ( ! $included ) {
+				$included = true;
+
+				acf_include( 'includes/admin/beta-features/class-scf-beta-feature.php' );
+				acf_include( 'includes/admin/beta-features/class-scf-beta-feature-native-pickers.php' );
+			}
 
 			add_action( 'scf/include_admin_beta_features', array( $this, 'register_beta_features' ) );
 
@@ -153,6 +160,7 @@ private function include_beta_features() {
 		 * @return  void
 		 */
 		public function register_beta_features() {
+			$this->register_beta_feature( 'SCF_Admin_Beta_Feature_Native_Pickers' );
 		}
 
 		/**

includes/admin/beta-features/class-scf-beta-feature-native-pickers.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Native Pickers Beta Feature
+ *
+ * This beta feature replaces the JavaScript date, time and color pickers with
+ * the native HTML inputs provided by the browser.
+ *
+ * @package    Secure Custom Fields
+ * @since      SCF 6.9.6
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+if ( ! class_exists( 'SCF_Admin_Beta_Feature_Native_Pickers' ) ) :
+	/**
+	 * Class SCF_Admin_Beta_Feature_Native_Pickers
+	 *
+	 * Uses the browser's own date, time and color inputs instead of the bundled
+	 * jQuery UI and Iris pickers.
+	 *
+	 * @package    Secure Custom Fields
+	 * @since      SCF 6.9.6
+	 */
+	class SCF_Admin_Beta_Feature_Native_Pickers extends SCF_Admin_Beta_Feature {
+
+		/**
+		 * Initialize the beta feature.
+		 *
+		 * @since SCF 6.9.6
+		 *
+		 * @return void
+		 */
+		protected function initialize() {
+			$this->name        = 'native_pickers';
+			$this->title       = __( 'Native Date, Time and Color Inputs', 'secure-custom-fields' );
+			$this->description = __( 'Uses the date, time and color inputs built into the browser instead of the bundled JavaScript pickers. The display format of date and time fields is then controlled by the browser. Fields using transparency, a custom color palette or a custom save format keep the existing pickers.', 'secure-custom-fields' );
+		}
+	}
+endif;