Timepicker In The Customizer

I am attempting to implement the JQuery Timepicker into the customizer. I have successfully done that however I am having an issue where the user can still change the format of the time and I was wondering if there is a way to keep the formatting of the time entered in the input field to be strict.

For instance someone types the time in 8am it will properly format it to 8:00AM but upon saving the customizer is showing it as 8:00am. Also if you go back in and add a space such as 8:00 am it will save that way.

Does anyone have any experience using this library and how to strictly enforce the text input to always save/format as h:mmp

jQuery( document ).ready( function() {
	jQuery( '.timepicker' ).timepicker({
	  timeFormat: 'h:mmp',
	});
});

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

  class TimePicker extends WP_Customize_Control {

    public function enqueue() {
      wp_enqueue_script( 'timepicker-custom', get_template_directory_uri() . '/includes/customizer/controls/timepicker/js/timepicker-custom.js' );
    }

    public function render_content() { ?>

      <label>
        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
        <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
        <div class="customize-control-content">
          <input type="text" id="<?php echo $this->id; ?>" name="<?php echo $this->id; ?>" value="<?php echo $this->value(); ?>" data-customize-setting-link="<?php echo $this->id; ?>" readonly class="timepicker" >
        </div>
      </label>

    <?php }

  }