The datepicker is working perfect but datetimepicker is not working at front side in wordpress-4.6.1.

Edit

I have got this in static html using bootstrap-datetimepicker.js but i don’t want to use this picker in wordpress. I want to achive this only using wordpress datepicker. Is it possible?

HTML

<input type="text" name="date1" id="date1" value="" />
<input type="text" name="datetime" id="datetime" value="" />

wp_enqueue_scripts

add_action('wp_enqueue_scripts', 'custom_datepicker');
function custom_datepicker() {
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_script('jquery-ui-core');    
}

JS

add_action('wp_head','custom_header_script');
function custom_header_script() {
?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#date1').datepicker();
            $('#datetime').datepicker({
               timeFormat:'hh:mm'
            });
        });
    </script>
<?php
}

1 Answer
1

WordPress supports only datepicker. If you want to add timepicker in datepicker you have to use jquery-ui-timepicker-addon as extension in your theme or plug-in.

Add css and js as below

add_action('wp_enqueue_scripts', 'custom_datepicker');
function custom_datepicker() {
    //wp_enqueue_script('jquery-ui-datepicker');
    //wp_enqueue_script('jquery-ui-core');          
    wp_enqueue_script('jquery-ui-timepicker-addon',get_stylesheet_directory_uri().'/js/jquery-ui-timepicker-addon.js',array());
    wp_enqueue_style('jquery-ui-timepicker-addon',get_stylesheet_directory_uri().'/css/jquery-ui-timepicker-addon.css',array());
    wp_enqueue_style('jquery-ui',get_stylesheet_directory_uri().'/css/jquery-ui.css',array());  
}

You can download all css and js files from this link http://trentrichardson.com/examples/timepicker/

Call timepicker as below

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#datetime').datetimepicker({
          timeFormat: "hh:mm",
          dateFormat : 'yy-mm-dd'
        });
    });
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *