Adding Datetimepicker JQuery API at Settings form

DateTimePicker is a JQuery plugin which is adding the datepicker or timepicker dropdown to your forms. In this article I am sharing how you will add this API with BB’s settings form’s text field. See the step by step procedure at below:

Download the DateTimePicker API

At first download the master zip file from Github. Extract the file and you will get the build folder. Move the jquery.datetimepicker.min.css file in your active theme’s css folder. Same way you will move the jquery.datetimepicker.full.min.js file in js folder.

Now create a new JS file jquery.datetimepicker.init.js and save into js folder. Here is the complete code of this JS file

(function($){
	
	BBDateTimePicker = {
		init: function()
		{
			BBDateTimePicker._bindEvents()
		},

		_bindEvents: function()
		{
			$('body').delegate('.datetime', 'mouseenter', BBDateTimePicker._datePicker);
		},		

		_datePicker: function()
		{
			$('.datetime').datetimepicker();
		}

	};

	$(function(){
		BBDateTimePicker.init();
	});

})(jQuery);

 

Enqueue the CSS and JS files

WordPress have an action wp_enqueue_scripts. With it I am loading the style and javascript file. Open the functions.php file of your active theme and add the following PHP snippets

add_action( 'wp_enqueue_scripts', 'probb_enqueue_ui_styles_scripts' );
function probb_enqueue_ui_styles_scripts()
{
	if ( FLBuilderModel::is_builder_active() )
	{
		wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/css/jquery.datetimepicker.min.css', array(), '28112017', 'all' );
		wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array(), '28112017', true);
		wp_enqueue_script('datetimepicker-init', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.init.js', array(), '28112017, true);
	}
}

Adding DateTimePicker Field

As a example I selected the Content Slider module. So I wrote this kind of PHP snippet in functions.php file

add_filter( 'fl_builder_register_settings_form', 'probb_filter_settings_form', 10, 2 );
function probb_filter_settings_form( $form, $slug )
{
	if( $slug === 'content-slider' ) // you will change the slug based on your module's slug
	{
		$form['general']['sections']['general']['fields']['datetime'] = array(
			'type'			=> 'text',
			'label'			=> __('Date', 'fl-builder'),
			'class'			=> 'datetime',
			'size' 			=> '25',
			'preview' 	=> array(
				'type' 		=> 'none'
			)
		);
	}

	return $form;
}

It will create the date field. You will enter the mouse into date input field and date time picker box will appear. So you can easily select the date. At front end you can fetch the submitted date value with $settings->datetime code.