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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
(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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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.
