Add a Jquery Datepicker to custom field in post edit

Question

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.

Answer 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.

Answer 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>

Answer 3

WordPress 3.5+

You can now simply use

wp_enqueue_script( 'jquery-ui-datepicker' );

as it is bundled with core.