Improved date input fields keyboard support (fast day/day+month edition)

diff --git a/includes/ui/ui_input.inc b/includes/ui/ui_input.inc
index ace6aa3fb3ef90412eb4ca7f023eb229fb7e5823..0ffa0247a1cb688da9c5fa42a1f0c8516e314f1e 100644 (file)
--- a/includes/ui/ui_input.inc
+++ b/includes/ui/ui_input.inc
@@ -37,6 +37,7 @@ function find_submit($prefix, $numeric=true)
     }
     return $numeric ? -1 : null;
 }
+
 //------------------------------------------------------------------------------
 //
 // Helper function for simple db table editor pages
@@ -633,15 +634,14 @@ function date_cells($label, $name, $title = null, $check=null, $inc_days=0,
 
        echo "<td>";
        
-       $class = $submit_on_change ? 'class="searchbox"' : '';
+       $class = $submit_on_change ? 'date active' : 'date';
 
        $aspect = $check ? 'aspect="cdate"' : '';
        if ($check && (get_post($name) != Today()))
                $aspect .= ' style="color:#FF0000"';
 
        default_focus($name);
-
-       echo "<input type=\"text\" name=\"$name\" $class $aspect size=\"10\" maxlength=\"12\" value=\"" 
+       echo "<input type=\"text\" name=\"$name\" class=\"$class\" $aspect size=\"10\" maxlength=\"12\" value=\"" 
         . $_POST[$name]. "\""
         .($title ? " title='$title'": '')." > $post_label";
        echo "</td>\n";

diff --git a/js/inserts.js b/js/inserts.js
index 0db3c7143d99fae11e10fa6e0a19d3b5fd51daaf..2e706fb5e89b8dcab06b78d44192118b845890cf 100644 (file)
--- a/js/inserts.js
+++ b/js/inserts.js
@@ -207,6 +207,57 @@ function passBack(value) {
        close();
 }
 
+/*
+       Normalize date format using previous input value to guess missing date elements.
+       Helps fast date input field change with only single or double numbers (for day or day-and-month fragments)
+*/
+function fix_date(date, last)
+{
+       var regex = /(\d+)[^\d]*(\d+)*[^\d]*(\d+)*/;
+       var dat = regex.exec(last);
+       var cur = regex.exec(date);
+       var day, month, year;
+
+// TODO: user.date as default?
+// TODO: user.datesys
+       if (!dat || !cur) return date;
+
+       if (cur[3] != undefined) // full date entered
+               dat = cur;
+
+       if (user.datefmt == 0) // set defaults
+       {
+               day = dat[2]; month = dat[1]; year = dat[3];
+       } else if (user.datefmt == 1)
+       {
+               day = dat[1]; month = dat[2]; year = dat[3];
+       } else {
+               day = dat[3]; month = dat[2]; year = dat[1];
+       }
+
+       if (cur[2] == undefined) // only day entred
+               day = cur[1];
+       else // day + month
+               if (cur[2] != undefined)
+               {
+                       if (user.datefmt==1)
+                               { day = cur[1]; month = cur[2] }
+                       else
+                               { day = cur[2]; month = cur[1] }
+               }
+
+       if (day<10) day = '0'+parseInt(day, 10);
+       if (month<10) month = '0'+parseInt(month, 10);
+       if (year<100) year = year<60 ? (2000+parseInt(year,10)) : (1900+parseInt(year,10));
+
+//     console.info(day,month,year)
+       if (user.datefmt == 0)
+               return month+user.datesep+day+user.datesep+year;
+       if (user.datefmt == 1)
+               return day+user.datesep+month+user.datesep+year;
+       return year+user.datesep+month+user.datesep+day;
+}
+
 /*
  Behaviour definitions
 */
@@ -299,6 +350,20 @@ var inserts = {
                                }
                        }
        },
+       '.date':
+               function(e) {
+                       e.setAttribute('_last_val', e.value);
+                       e.setAttribute('autocomplete', 'off');
+                       e.onblur = function() {
+                               var val = this.getAttribute('_last_val');
+                               if (val != this.value) {
+                                       this.value = fix_date(this.value, val);
+                                       this.setAttribute('_last_val', this.value);
+                                       if (e.className.match(/\bactive\b/))
+                                               JsHttpRequest.request('_'+this.name+'_changed', this.form);
+                               }
+                       }
+       },
        'button[aspect*selector], button[aspect*abort], input[aspect*selector]': function(e) {
                e.onclick = function() {
                        passBack(this.getAttribute('rel'));