Create custom control for WordPress customizer using JavaScript

Question

I followed this link to learn about how to create a custom control for customizer in Wordpress. According to their doc, I made a control using this code

wp.customize.control.add(new wp.customize.DateTimeControl('birthdate', {
        label: 'Birthdate',
        description: "Someone was born on this day.",
        section: 'my_custom_section',
        includeTime: false,
        setting: new wp.customize.Value('2000-01-02')
    }));

It's ok but DateTimeControl is default control of Wordpress. I want to make my own custom control form PHP. Here is my Custom control in php

<?php

/**
 * Customize for textarea, extend the WP customizer
 *
 * @package    WordPress
 * @subpackage Documentation
 * @since      10/16/2012
 */

if ( ! class_exists( 'WP_Customize_Control' ) )
    return NULL;

class TestControl extends \WP_Customize_Control {

    /**
     * @access public
     * @var    string
     */
    public $type = 'test-control';

    /**
     * @access public
     * @var    array
     */
    public $statuses;

    /**
     * Constructor.
     *
     * If $args['settings'] is not defined, use the $id as the setting ID.
     *
     * @since   10/16/2012
     * @uses    WP_Customize_Control::__construct()
     * @param   WP_Customize_Manager $manager
     * @param   string $id
     * @param   array $args
     * @return  void
     */
    public function __construct( $manager, $id, $args = array() ) {

        $this->statuses = array( '' => __( 'Default' ) );
        parent::__construct( $manager, $id, $args );
    }



    public function content_template(){
        ?>
        <div>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <textarea class="large-text" cols="20" rows="5" <?php $this->link(); ?>>
                <?php echo esc_textarea( $this->value() ); ?>
            </textarea>
        </label>
        </div>
        <?php
    }



}

Basically I want to create control in Wordpress Customizer in Javascript from my existing control that has been written in PHP. Sorry for my bad English, I hope you got my point.

Answer 1

After adding your custom control class, you need to register your control like below code, then you can call your control via JS

function prefix_customize_register( $wp_customize ) {
    $wp_customize->register_control_type( 'TestControl' );
}
add_action( 'customize_register', 'prefix_customize_register' );

Then via JS, like this:

api.control.add(
    new api.Control( 'birthdate', {
      type: 'test-control',
      label: 'Birthdate',
      description: "Someone was born on this day.",
      section: 'my_custom_section',
      includeTime: false,
      setting: new api.Value('2000-01-02')
    })
);