Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

3 Answers 3

up vote 4 down vote accepted

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.
share|improve this answer

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>
share|improve this answer
    
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

WordPress 3.5+

You can now simply use

wp_enqueue_script( 'jquery-ui-datepicker' );

as it is bundled with core.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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