6

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.

6

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

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>
  • 1
    Awesome dude, thanks for taking the time to post this. This looks like it was done pretty much the "right" way too. Thanks! – Tom Auger Jun 8 '11 at 22:49
  • codex.wordpress.org/Plugin_API/Action_Reference/… >> admin_print_styles should not be used to enqueue styles or scripts on the admin pages. Use admin_enqueue_scripts instead. – vee Apr 5 '17 at 11:41
3

WordPress 3.5+

You can now simply use

wp_enqueue_script( 'jquery-ui-datepicker' );

as it is bundled with core.

  • You need to include the CSS though. – HPWD Jun 16 '18 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.