Add a Jquery Datepicker to custom field in post edit

2 Views

I would like to add a custom field that is set by a jquery datepicker ui in the post edit panel. Im new to wordpress, so Im not sure how to go about adding something like this. I haven’t had much luck with plugins, so I would like to know how one would go about adding something like this manually. I am familiar with PHP.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Since you are new to WordPress I would suggest using Meta Box Script for WordPress which provides an easy way of adding your custom fields to the post edit panel and its main features are:

    • Support various field types, including: text, textarea, checkbox, checkbox list, radio box, select, wysiwyg, file, image, date, time, color. Developers can easily add more types by extending the script.
    • Allow to create multiple meta boxes.
    • Written in OOP, allow developers easily extend the script.
    • Work with custom post types. Each meta box can be defined for many custom post types.

  2. I know you have already accepted an answer but I add this for others that are maybe a bit more advanced are creating their own meta boxes. Below is the code I used in a recent project to enable a date picker on a field in a custom post type. Feel free to amend for your needs:

    functions file:

    // Register datepicker ui for properties
function admin_homes_for_sale_javascript(){
    global $post;
    if($post->post_type == 'homes-for-sale' && is_admin()) {
        wp_enqueue_script('jquery-ui-datepicker', WP_CONTENT_URL . '/themes/philosophy/js/jquery-ui-datepicker.min.js');  
    }
}
add_action('admin_print_scripts', 'admin_homes_for_sale_javascript');

// Register ui styles for properties
function admin_homes_for_sale_styles(){
    global $post;
    if($post->post_type == 'homes-for-sale' && is_admin()) {
        wp_enqueue_style('jquery-ui', WP_CONTENT_URL . '/themes/philosophy/css/jquery-ui-1.8.11.custom.css');  
    }
}
add_action('admin_print_styles', 'admin_homes_for_sale_styles');

    Then code inline with meta box that has the date picker in:

    <script>jQuery(document).ready(function(){jQuery( "input[name='chb_homes_for_sale_specifics_dateavail']" ).datepicker({ dateFormat: 'DD, d MM, yy', numberOfMonths: 3 }); jQuery( "#ui-datepicker-div" ).hide();});</script>