Custom meta field date picker+ordering by this value WordPress

Francisco Javier Carazo Gil answers:

Hi Torstein,

First one, the date-picker. I have been working for years with jQuery UI and for me is the best alternative. Simple to implement and greatest at the same time.

Change:

<input cols="20" name="date" value="<?php echo $date; ?>"></input>


For this one:

<input name="date" value="<?php echo $date; ?>"></input>

<script>
$(function() {<input name="date" value="<?php echo $date; ?>"></input>

$( "#date" ).datepicker();
});
</script>


You only have to load jQuery UI Core, so you will have to enqueue the script:

wp_enqueue_script( 'jquery-ui-core' );


I continue now with the rest.

---

---

---

---

---

---

Manoj Raj answers:

Here is the perfect working solution

http://www.refactord.com/create-a-wordpress-meta-box-with-jquery-ui-datepicker

Just download the files and activate as a plugin. (the code is simple) It works perfectly fine for me. It automatically adds a new metabox with datepicker.

Here is the code from the plugin file. Have a look ..You can tweak it according to your needs. You are in need to have it under a custom post type.Right?


<?php
/*
Plugin Name: Refactord Datepicker
Plugin URI: http://www.refactord.com/create-a-wordpress-meta-box-with-jquery-ui-datepicker
Description: This is a plugin that will allow you to add a datepicker to the new post and edit post pages in the admin. You can create the same thing just read the plugin here <a href='http://www.refactord.com/create-a-wordpress-meta-box-with-jquery-ui-datepicker'>WordPress Meta Box with Jquery UI datepicker</a>
Author:Kyle G
Version: 1.0
*/

class Refactord_Datepicker {

var $plugin_dir;
var $plugin_url;

function __construct() {

$this->plugin_dir = WP_PLUGIN_DIR . "/refactord-datepicker";
$this->plugin_url = WP_PLUGIN_URL . "/refactord-datepicker";

add_action( 'admin_print_styles', array($this, 'add_stylesheets') );
add_action( 'admin_enqueue_scripts', array($this, 'add_js') );
add_action( 'add_meta_boxes', array( $this, 'datepicker_meta_box' ) );
add_action( 'admin_head', array($this, 'call_js') );
add_action( 'save_post', array($this, 'save_data') );
}

function add_stylesheets(){
global $post;
$styleFile = $this->plugin_dir . "/css/jquery-ui-1.8.13.custom.css";

if(file_exists($styleFile) && $post->post_type == '<em>calendar</em>'){
wp_register_style('datepicker-css', $this->plugin_url . "/css/jquery-ui-1.8.13.custom.css");
wp_enqueue_style( 'datepicker-css');
}
}

function add_js(){
global $post;
$jsFile = $this->plugin_dir . "/js/jquery-ui-1.8.13.custom.min.js";

if(file_exists($jsFile) && $post->post_type == '<em>calendar</em>'){
wp_register_script('datepicker-js', $this->plugin_url . "/js/jquery-ui-1.8.13.custom.min.js");
wp_enqueue_script( 'datepicker-js');
}
}

function call_js(){
global $post;
if($post->post_type == '<em>calendar</em>'){

echo '<script>
jQuery(document).ready(function() {
jQuery( "#datepicker-field" ).datepicker();
});
</script>';
}
}

function datepicker_meta_box(){
add_meta_box(
'refactord-datepicker'
,'Refactord Datepicker'
,array( &$this, 'meta_box_content' )
,'<em>calendar</em>'
,'side'
,'default'
);
}

function meta_box_content(){
global $post;
// Use nonce for verification
wp_nonce_field( plugin_basename( __FILE__ ), 'refactord_nounce' );

// The actual fields for data entry
echo '<label for="datepicker-field">';
_e("Pick A date", 'myplugin_textdomain' );
echo '</label> : ';
echo '<input type="text" id="datepicker-field" name="datepicker-field" value="' . get_post_meta($post->ID, '_refactord-datepicker', TRUE) . '" size="20" />';
}

function save_data($post_id){
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;

if ( !wp_verify_nonce( $_POST['refactord_nounce'], plugin_basename( __FILE__ ) ) )
return;


// Check permissions
if ( 'page' == $_POST['post_type'] ){
if ( !current_user_can( 'edit_page', $post_id ) )
return;
}else{
if ( !current_user_can( 'edit_post', $post_id ) )
return;
}

$data = $_POST['datepicker-field'];

update_post_meta($post_id, '_refactord-datepicker', $data, get_post_meta($post_id, '_refactord-datepicker', TRUE));

return $data;
}

}

$refactord_Datepicker = new Refactord_Datepicker;

I replaced the 'post' post type(in default file) with 'calendar' (highlighted in italics) .You can just copy this and paste inside datepicker.php and activate it. You will get a new metabox "Pick a date" and it will display the date picker and saves it.

---

---

Julio Potier answers:

Hello

Try this <script> TAG in place of the one in your last reply to Fransisco

<script>
$(function() {
$( "#date" ).datepicker({ maxDate: '+2y'}, {currentText: 'Now'});
});
</script>

And
<input name="date" value="<?php echo $date; ?>"></input>
replaced by
<input name="date" id="date" value="<?php echo $date; ?>"></input>

And
function admin_init(){
add_meta_box("calendar_meta", "Dates and locations", "calendar_meta", "calendar", "normal", "low");
}
replaced by
function admin_init(){
add_meta_box("calendar_meta", "Dates and locations", "calendar_meta", "calendar", "normal", "low");
wp_enqueue_script( 'jquery-ui-core' );
}

<em>Credits goes to Fransisco ;)</em>