jquery data selector for post timestamps. Props tellyworth. fixes #4641

git-svn-id: http://svn.automattic.com/wordpress/trunk@5804 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/template.php

@@ -416,13 +416,39 @@ function meta_form() {
 
 }
 
+// return an option/select list with correct html escaping
+function input_dropdown($name, $vals, $selected=null, $class='', $onchange='') {
+
+	// cf. http://www.w3.org/TR/html401/appendix/notes.html#h-B.3.2.2
+	$out = '<select name="' . htmlspecialchars($name) . '" class="' . htmlspecialchars($class) . '" onchange="' . htmlspecialchars($onchange) . '">' . "\n";
+	foreach ($vals as $k=>$v) {
+		$out .= '<option value="' . htmlspecialchars($k) . '"';
+		if ( $selected !== null and $k == $selected )
+			$out .= ' selected="selected"';
+		$out .= '>' . htmlspecialchars($v) . "</option>\n";
+	}
+	$out .= "</select>\n";
+
+	return $out;
+}
+
+// return an array of month names for the current locale, indexed 1..12
+function locale_months() {
+	global $wp_locale;
+
+	$months = array();
+	foreach ( range(1, 12) as $m )
+		$months[$m] = $wp_locale->get_month( $m );
+	return $months;
+}
+
 function touch_time( $edit = 1, $for_post = 1 ) {
 	global $wp_locale, $post, $comment;
 
 	if ( $for_post )
 		$edit = ( in_array($post->post_status, array('draft', 'pending') ) && (!$post->post_date || '0000-00-00 00:00:00' == $post->post_date ) ) ? false : true;
 
-	echo '<fieldset><legend><input type="checkbox" class="checkbox" name="edit_date" value="1" id="timestamp" /> <label for="timestamp">'.__( 'Edit timestamp' ).'</label></legend>';
+	echo '<fieldset class="jcalendar"><legend><input type="checkbox" class="checkbox" name="edit_date" value="1" id="timestamp" /> <label for="timestamp">'.__( 'Edit timestamp' ).'</label></legend>';
 
 	$time_adj = time() + (get_option( 'gmt_offset' ) * 3600 );
 	$post_date = ($for_post) ? $post->post_date : $comment->comment_date;
@@ -433,18 +459,30 @@ function touch_time( $edit = 1, $for_post = 1 ) {
 	$mn = ($edit) ? mysql2date( 'i', $post_date ) : gmdate( 'i', $time_adj );
 	$ss = ($edit) ? mysql2date( 's', $post_date ) : gmdate( 's', $time_adj );
 
-	echo "<select name=\"mm\" onchange=\"edit_date.checked=true\">\n";
+	echo '<div class="jcalendar-selects">';
-	for ( $i = 1; $i < 13; $i = $i +1 ) {
+	echo input_dropdown( 'mm', locale_months(), $mm, 'jcalendar-select-month', 'edit_date.checked=true' );
-		echo "\t\t\t<option value=\"$i\"";
+
-		if ( $i == $mm )
+	foreach ( range(1, 31) as $i )
-			echo ' selected="selected"';
+		$days[$i] = $i;
-		echo '>' . $wp_locale->get_month( $i ) . "</option>\n";
+	echo input_dropdown( 'jj', $days, $jj, 'jcalendar-select-day', 'edit_date.checked=true' );
-	}
+
+	foreach ( range(1970, 2038) as $i )
+		$years[$i] = $i;
+	echo input_dropdown( 'aa', $years, $aa, 'jcalendar-select-year', 'edit_date.checked=true' );
+	echo '</div>';
+
+	$jcal_css_url = get_bloginfo('wpurl') . '/wp-includes/js/jquery/css/jcalendar.css?version=' . get_bloginfo('version');
+
 ?>
-</select>
+<script type="text/javascript">
-<input type="text" id="jj" name="jj" value="<?php echo $jj; ?>" size="2" maxlength="2" onchange="edit_date.checked=true"/>
+<!--
-<input type="text" id="aa" name="aa" value="<?php echo $aa ?>" size="4" maxlength="5" onchange="edit_date.checked=true" /> @
+jQuery(document).ready(function() {
-<input type="text" id="hh" name="hh" value="<?php echo $hh ?>" size="2" maxlength="2" onchange="edit_date.checked=true" /> :
+	jQuery.jcalendar.setLanguageStrings(jcalendar_L10n.days, jcalendar_L10n.months, jcalendar_L10n.navLinks);
+	jQuery('fieldset.jcalendar').jcalendar();
+});
+// -->
+</script>
+@ <input type="text" id="hh" name="hh" value="<?php echo $hh ?>" size="2" maxlength="2" onchange="edit_date.checked=true" /> :
 <input type="text" id="mn" name="mn" value="<?php echo $mn ?>" size="2" maxlength="2" onchange="edit_date.checked=true" />
 <input type="hidden" id="ss" name="ss" value="<?php echo $ss ?>" size="2" maxlength="2" onchange="edit_date.checked=true" />
 <?php
@@ -592,4 +630,4 @@ function wp_remember_old_slug() {
 		echo '<input type="hidden" id="wp-old-slug" name="wp-old-slug" value="' . $name . '" />';
 }
 
-?>
+?>

wp-admin/post-new.php

@@ -6,6 +6,7 @@ $editing = true;
 wp_enqueue_script('prototype');
 wp_enqueue_script('interface');
 wp_enqueue_script('autosave');
+wp_enqueue_script('jcalendar');
 require_once ('./admin-header.php');
 
 if ( ! current_user_can('edit_posts') ) { ?>

wp-admin/post.php

@@ -57,6 +57,7 @@ case 'edit':
 		wp_enqueue_script('prototype');
 		wp_enqueue_script('autosave');
 	}
+	wp_enqueue_script('jcalendar');
 	require_once('admin-header.php');
 
 	if ( !current_user_can('edit_post', $post_ID) )

wp-admin/wp-admin.css

@@ -1332,9 +1332,70 @@ a.page-numbers:hover {
 	margin: 0 6px;
 }
 
-a.view-link {
+/* jcalendar */
-	position: absolute;
+
-	right: 5%;
+#moremeta select.jcalendar-select-day, #moremeta select.jcalendar-select-month, #moremeta select.jcalendar-select-year {
-	margin-right: 220px;
+	font-size: 11px;
-	text-decoration:underline;
+	width: auto;
 }
+
+div.jcalendar table {
+color:#000;
+width: 100%;
+background: #a1a5a9;
+}
+
+div.jcalendar table th {
+font-size: 10px;
+background:#eee;
+}
+
+div.jcalendar table td {
+background:#f9f9f9;
+padding:0;
+}
+
+div.jcalendar table th.weekend {
+background:#ddd;
+}
+
+div.jcalendar table td.weekend {
+background:#e9e9e9;
+}
+
+div.jcalendar table td a {
+font-size: 11px;
+color:#333;
+display:block;
+line-height:1.7em;
+text-align:center;
+text-decoration:none;
+}
+
+div.jcalendar table td.today a {
+background:#777;
+border-color:#aaa;
+color:#fff;
+font-weight:700;
+}
+
+div.jcalendar table td a:hover,div.jcalendar table td a:focus,div.jcalendar table td a:active {
+background:#77b0d3;
+color:#fff;
+padding:0;
+}
+
+div.jcalendar table td a.selected {
+background:#2685af;
+color:#E3EFF5;
+}
+
+div.jcalendar-links {
+text-align:center;
+}
+
+div.jcalendar-links a {
+font-size: 11px;
+margin: 0 .4em;
+}
+

wp-includes/script-loader.php

@@ -74,6 +74,19 @@ class WP_Scripts {
 		$this->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.1.3.1');
 		$this->add( 'jquery-form', '/wp-includes/js/jquery/jquery.form.js', array('jquery'), '1.0.3');
 		$this->add( 'interface', '/wp-includes/js/jquery/interface.js', array('jquery'), '1.2');
+		$this->add( 'jcalendar', '/wp-includes/js/jquery/jcalendar.js', array('jquery'), '0.5' );
+
+		// this would be much nicer if localize used json so it could handle arrays
+		global $wp_locale;
+		$this->localize( 'jcalendar', 'jcalendar_L10n', array(
+			'days' => array_values($wp_locale->weekday_abbrev),
+			'months' => array_values($wp_locale->month),
+			'navLinks' => array(
+				'p' => __('Prev'),
+				'n' => __('Next'),
+				't' => __('Today'),
+			),
+		) );
 
 		if ( is_admin() ) {
 			global $pagenow;
@@ -205,17 +218,28 @@ class WP_Scripts {
 
 		echo "<script type='text/javascript'>\n";
 		echo "/* <![CDATA[ */\n";
-		echo "\t$object_name = {\n";
+		echo $this->js_encode_array( $object_name, $this->scripts[$handle]->l10n );
-		$eol = '';
+		echo "\n/* ]]> */\n";
-		foreach ( $this->scripts[$handle]->l10n as $var => $val ) {
-			echo "$eol\t\t$var: \"" . js_escape( $val ) . '"';
-			$eol = ",\n";
-		}
-		echo "\n\t}\n";
-		echo "/* ]]> */\n";
 		echo "</script>\n";
 	}
 
+	/**
+	 * Poor man's json: recursively encode an associative array of strings or arrays as a javascript array definition
+	 */
+	function js_encode_array( $name, $vals, $level=0 ) {
+		$out = array();
+		foreach ( $vals as $var => $val ) {
+			if ( is_array($val) )
+				$out[] = $this->js_encode_array( $var, $val, $level+1 );
+			else
+				$out[] = str_repeat("\t", $level+1) . "{$var}: \"" . js_escape( $val ) . '"';
+		}
+
+		return str_repeat("\t", $level) . "{$name} " . ($level ? ':' : '=') . " {\n"
+			. join( ",\n", $out )
+			. "\n" . str_repeat("\t", $level) . "}";
+	}
+
 	/**
 	 * Determines dependencies of scripts
 	 *