color picker in wordpress widget

gistfile1.txt

class Color_Picker_Widget_25809 extends WP_Widget {

	/**
	 * Widget constructor.
	 *
	 * @since  1.0
	 *
	 * @access public
	 */
	public function __construct() {
		parent::__construct(
			'color-picker',
			_x( 'Color Picker', 'widget title', 'color-picker-widget' ),
			array(
				'classname'   => 'color-picker-widget',
				'description' => _x( 'Widget with a color picker', 'widget description', 'color-picker-widget' )
			)
		);

		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
		add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );
	}

	/**
	 * Enqueue scripts.
	 *
	 * @since 1.0
	 *
	 * @param string $hook_suffix
	 */
	public function enqueue_scripts( $hook_suffix ) {
		if ( 'widgets.php' !== $hook_suffix ) {
			return;
		}

		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );
		wp_enqueue_script( 'underscore' );
	}

	/**
	 * Print scripts.
	 *
	 * @since 1.0
	 */
	public function print_scripts() {
		?>
		<script>
			( function( $ ){
				function initColorPicker( widget ) {
					widget.find( '.color-picker' ).wpColorPicker( {
						change: _.throttle( function() { // For Customizer
							$(this).trigger( 'change' );
						}, 3000 )
					});
				}

				function onFormUpdate( event, widget ) {
					initColorPicker( widget );
				}

				$( document ).on( 'widget-added widget-updated', onFormUpdate );

				$( document ).ready( function() {
					$( '#widgets-right .widget:has(.color-picker)' ).each( function () {
						initColorPicker( $( this ) );
					} );
				} );
			}( jQuery ) );
		</script>
		<?php
	}

	/**
	 * Widget output.
	 *
	 * @since  1.0
	 *
	 * @access public
	 * @param  array $args
	 * @param  array $instance
	 */
	public function widget( $args, $instance ) {
		extract( $args );

		// Title
		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : _x( 'Color Picker', 'widget title', 'color-picker-widget' );
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

		// Colors
		$color1 = ( ! empty( $instance['color1'] ) ) ? $instance['color1'] : '#fff';
		$color2 = ( ! empty( $instance['color2'] ) ) ? $instance['color2'] : '#f00';

		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		?>
			<div style="height: 100px; width: 100%; background-color:<?php echo $color1; ?>"></div>
			<div style="height: 100px; width: 100%; background-color:<?php echo $color2; ?>"></div>
		<?php
		echo $after_widget;
	}

	/**
	 * Saves widget settings.
	 *
	 * @since  1.0
	 *
	 * @access public
	 * @param  array $new_instance
	 * @param  array $old_instance
	 * @return array
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;

		$instance[ 'title' ]  = strip_tags( $new_instance['title'] );
		$instance[ 'color1' ] = strip_tags( $new_instance['color1'] );
		$instance[ 'color2' ] = strip_tags( $new_instance['color2'] );

		return $instance;
	}

	/**
	 * Prints the settings form.
	 *
	 * @since  1.0
	 *
	 * @access public
	 * @param  array $instance
	 */
	public function form( $instance ) {
		// Defaults
		$instance = wp_parse_args(
			$instance,
			array(
				'title' => _x( 'Color Picker', 'widget title', 'color-picker-widget' ),
				'color1' => '',
				'color2' => ''
			)
		);

		$title = esc_attr( $instance[ 'title' ] );
		$color1 = esc_attr( $instance[ 'color1' ] );
		$color2 = esc_attr( $instance[ 'color2' ] );
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'color1' ); ?>"><?php _e( 'Color 1:' ); ?></label><br>
			<input type="text" name="<?php echo $this->get_field_name( 'color1' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( 'color1' ); ?>" value="<?php echo $color1; ?>" data-default-color="#fff" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'color2' ); ?>"><?php _e( 'Color 2:' ); ?></label><br>
			<input type="text" name="<?php echo $this->get_field_name( 'color2' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( 'color2' ); ?>" value="<?php echo $color2; ?>" data-default-color="#f00" />
		</p>
		<?php
	}
}

add_action( 'widgets_init', function() {
	register_widget( 'Color_Picker_Widget_25809' );
} );

thanks for sharing code

when delete color widget not fire saving button in wordpress 4.9

if you add support for clear event will be good

thank you

function initColorPicker( widget ) {
widget.find( '.color-picker' ).wpColorPicker( {
change: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 3000 ),
clear: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 4000 )
});
}
check this for wordpress 4.9 may be work

^^ Confirmed. This does make the Color Picker work correctly in WP 4.9.5

I was having a problem where any Color Picker was not triggering the 'change' event when the color was changed. I needed to add this code for the 'clear' event.

Thanks for your code. The only issue was that the first click on the picker hasn't triggered the change. So instead of using _.throttle(), I've used the following code as parameters and there is no more issue.

change: function(e, ui) {
  $(e.target).val(ui.color.toString());
  $(e.target).trigger('change');
},
clear: function(e, ui) {
  $(e.target).trigger('change');
},