Replace inline Javascript by a function that attaches a date/time picker to the elements which need it

js/functions.js

@@ -55,6 +55,37 @@ function displayPasswordGenerateButton() {
     $('#div_element_before_generate_password').parent().append('<div class="item"><label for="button_generate_password">' + PMA_messages['strGeneratePassword'] + ':</label><span class="options"><input type="button" id="button_generate_password" value="' + PMA_messages['strGenerate'] + '" onclick="suggestPassword(this.form)" /></span><input type="text" name="generated_pw" id="generated_pw" /></div>');
 }
 
+/*
+ * Adds a date/time picker to an element
+ *
+ * @param   object  $this_element   a jQuery object pointing to the element 
+ */
+function PMA_addDatepicker($this_element) {
+    var showTimeOption = false;
+    if ($this_element.is('.datetimefield')) {
+        showTimeOption = true;
+    }
+
+    $this_element
+        .datepicker({
+        showOn: 'button',
+        buttonImage: themeCalendarImage, // defined in js/messages.php
+        buttonImageOnly: true,
+        duration: '',
+        time24h: true,
+        stepMinutes: 1,
+        stepHours: 1,
+        showTime: showTimeOption, 
+        dateFormat: 'yy-mm-dd', // yy means year with four digits
+        altTimeField: '',
+        beforeShow: function(input, inst) {
+            // Remember that we came from the datepicker; this is used
+            // in tbl_change.js by verificationsAfterFieldChange()
+            $this_element.data('comes_from', 'datepicker');
+        },
+        constrainInput: false
+     });
+}
 
 /**
  * selects the content of a given object, f.e. a textarea
@@ -845,17 +876,24 @@ function checkTransmitDump(theForm, theAction)
     return true;
 } // end of the 'checkTransmitDump()' function
 
-/**
- * Row marking in horizontal mode (use "live" so that it works also for 
- * next pages reached via AJAX); a tr may have the class noclick to remove
- * this behavior.
- */
 $(document).ready(function() {
+    /**
+     * Row marking in horizontal mode (use "live" so that it works also for 
+     * next pages reached via AJAX); a tr may have the class noclick to remove
+     * this behavior.
+     */
     $('tr.odd:not(.noclick), tr.even:not(.noclick)').live('click',function() {
         var $tr = $(this);
         $tr.toggleClass('marked');
         $tr.children().toggleClass('marked');
     });
+
+    /**
+     * Add a date/time picker to each element that needs it 
+     */
+    $('.datefield, .datetimefield').each(function() {
+        PMA_addDatepicker($(this));
+        });
 })
 
 /**

js/messages.php

@@ -115,6 +115,7 @@ foreach ($js_messages as $name => $js_message) {
 }
 
 /* Calendar */
+echo "var themeCalendarImage = '" . $GLOBALS['pmaThemeImage'] . 'b_calendar.png' . "';\n";
 echo "if ($.datepicker) {\n";
 /* l10n: Display text for calendar close link */
 PMA_printJsValue("$.datepicker.regional['']['closeText']", __('Done'));

tbl_change.php

@@ -942,10 +942,16 @@ foreach ($rows as $row_id => $vrow) {
                     ><?php echo $special_chars_encoded; ?></textarea>
                 <?php
             } else {
+                $the_class = 'textfield';
+                if ($field['pma_type'] == 'date') {
+                    $the_class .= ' datefield';
+                } elseif ($field['pma_type'] == 'datetime' || substr($field['pma_type'], 0, 9) == 'timestamp') {
+                    $the_class .= ' datetimefield';
+                }
                 ?>
                 <input type="text" name="fields<?php echo $field_name_appendix; ?>"
                     value="<?php echo $special_chars; ?>" size="<?php echo $fieldsize; ?>"
-                    class="textfield" <?php echo $unnullify_trigger; ?>
+                    class="<?php echo $the_class; ?>" <?php echo $unnullify_trigger; ?>
                     tabindex="<?php echo ($tabindex + $tabindex_for_value); ?>"
                     id="field_<?php echo ($idindex); ?>_3" />
                 <?php
@@ -973,31 +979,6 @@ foreach ($rows as $row_id => $vrow) {
                     // the _3 suffix points to the date field
                     // the _2 suffix points to the corresponding NULL checkbox
                     // in dateFormat, 'yy' means the year with 4 digits
-                    ?>
-<script type="text/javascript">
-//<![CDATA[
-$(function() {
-    $('#field_<?php echo ($idindex); ?>_3').datepicker({
-        showOn: 'button',
-        buttonImage: '<?php echo $GLOBALS['pmaThemeImage'] . 'b_calendar.png'; ?>',
-        buttonImageOnly: true,
-        duration: '',
-        time24h: true,
-        stepMinutes: 1,
-        stepHours: 1,
-        <?php echo ($field['pma_type'] == 'date' ? "showTime: false,":"showTime: true,"); ?>
-        dateFormat: 'yy-mm-dd', // yy means year with four digits
-        altTimeField: '',
-        beforeShow: function(input, inst) {
-            // Remember that we came from the datepicker
-            $(input).data('comes_from', 'datepicker');
-        },
-        constrainInput: false
-     });
-});
-//]]>
-</script>
-                    <?php
                 }
             }
         }

tbl_select.php

@@ -201,33 +201,16 @@ if (!isset($param) || $param[0] == '') {
             echo '            </select>' . "\n";
         } else {
             // o t h e r   c a s e s
+            $the_class = 'textfield';
+            $type = $fields_type[$i];
+            if ($type == 'date') {
+                $the_class .= ' datefield';
+            } elseif ($type == 'datetime' || substr($type, 0, 9) == 'timestamp') {
+                $the_class .= ' datetimefield';
+            }
             echo '            <input type="text" name="fields[' . $i . ']"'
-                .' size="40" class="textfield" id="field_' . $i . '" />' .  "\n";
+                .' size="40" class="' . $the_class . '" id="field_' . $i . '" />' .  "\n";
         };
-        $type = $fields_type[$i];
-        if ($type == 'date' || $type == 'datetime' || substr($type, 0, 9) == 'timestamp') {
-        ?>
-<script type="text/javascript">
-//<![CDATA[
-$(function() {
-    $('#field_<?php echo $i; ?>').datepicker({
-        showOn: 'button',
-        buttonImage: '<?php echo $GLOBALS['pmaThemeImage'] . 'b_calendar.png'; ?>',
-        buttonImageOnly: true,
-        duration: '',
-        time24h: true,
-        stepMinutes: 1,
-        stepHours: 1,
-        <?php echo ($type == 'date' ? "showTime: false,":"showTime: true,"); ?>
-        dateFormat: 'yy-mm-dd', // yy means year with four digits
-        altTimeField: '',
-        constrainInput: false
-     });
-});
-//]]>
-</script>
-        <?php
-        }
         ?>
             <input type="hidden" name="names[<?php echo $i; ?>]"
                 value="<?php echo htmlspecialchars($fields_list[$i]); ?>" />