Changeset 28765

Timestamp:

Jun 22, 2014, 2:44:43 PM (10 years ago)

Author:

mistic100

Message:

feature 3080: add cancel button, one minute granularity, fix missing css

Location:

trunk/admin/themes/default

Files:

• js/datepicker.js (modified) (6 diffs)
• template/batch_manager_global.tpl (modified) (1 diff)
• template/batch_manager_unit.tpl (modified) (1 diff)
• template/include/datepicker.inc.tpl (modified) (1 diff)
• template/picture_modify.tpl (modified) (1 diff)

trunk/admin/themes/default/js/datepicker.js

@@ -1 +1 @@
 jQuery.timepicker.log = jQuery.noop; // that's ugly, but the timepicker is acting weird and throws parsing errors
 
-jQuery.fn.pwgDatepicker = function(options) {
-  options = options || {};
-  
+jQuery.fn.pwgDatepicker = function(settings) {
+  var options = jQuery.extend(true, {
+    showTimepicker: false,
+    cancelButton: false,
+  }, settings || {});
+
   return this.each(function() {
     var $this = jQuery(this),
-        $target = jQuery('[name="'+ jQuery(this).data('datepicker') +'"]'),
-        linked = !!$target.length;
+        originalValue = $this.val(),
+        originalDate,
+        $target = jQuery('[name="'+ $this.data('datepicker') +'"]'),
+        linked = !!$target.length,
+        $start, $end;
     
-    if (linked) { // get value before init
-      var value = $target.val().split(' ');
+    if (linked) {
+      originalValue = $target.val();
     }
 
     // custom setter
     function set(date, init) {
+      if (date === '') date = null;
       $this.datetimepicker('setDate', date);
       
-      if ($this.data('datepicker-start')) {
+      if ($this.data('datepicker-start') && $start) {
         $start.datetimepicker('option', 'maxDate', date);
       }
-      else if ($this.data('datepicker-end')) {
+      else if ($this.data('datepicker-end') && $end) {
         if (!init) { // on init, "end" is not initialized yet (assuming "start" is before "end" in the DOM)
           $end.datetimepicker('option', 'minDate', date);
@@ -29 +36 @@
         $target.val('');
       }
+    }
+
+    // and custom cancel button
+    if (options.cancelButton) {
+      options.beforeShow = options.onChangeMonthYear = function() {
+        setTimeout(function() {
+          var buttonPane = $this.datepicker('widget')
+              .find('.ui-datepicker-buttonpane');
+          
+          if (buttonPane.find('.pwg-datepicker-cancel').length == 0) {
+            $('<button type="button">'+ options.cancelButton +'</button>')
+              .on('click', function() {
+                set(originalDate, false);
+                $this.datepicker('hide').blur();
+              })
+              .addClass('pwg-datepicker-cancel ui-state-error ui-corner-all')
+              .appendTo(buttonPane);
+          }
+        }, 1);
+      };
     }
 
@@ -43 +70 @@
       changeMonth : true,
       changeYear: true,
-      showTimepicker: false,
       altFieldTimeOnly: false,
       showSecond: false,
-      alwaysSetTime: false,
-      stepMinute: 5
+      alwaysSetTime: false
     }, options));
     
     // attach range pickers
     if ($this.data('datepicker-start')) {
-      var $start = jQuery('[data-datepicker="'+ jQuery(this).data('datepicker-start') +'"]');
+      $start = jQuery('[data-datepicker="'+ $this.data('datepicker-start') +'"]');
       
       $this.datetimepicker('option', 'onClose', function(date) {
@@ -61 +86 @@
     }
     else if ($this.data('datepicker-end')) {
-      var $end = jQuery('[data-datepicker="'+ jQuery(this).data('datepicker-end') +'"]');
+      $end = jQuery('[data-datepicker="'+ $this.data('datepicker-end') +'"]');
       
       $this.datetimepicker('option', 'onClose', function(date) {
@@ -78 +103 @@
     // set value from linked input
     if (linked) {
-      if (value[0].length == 10 && (!options.showTimepicker || value.length==1)) {
-        set(jQuery.datepicker.parseDate('yy-mm-dd', value[0]), true);
+      var splitted = originalValue.split(' ');
+      if (splitted.length == 2 && options.showTimepicker) {
+        set(jQuery.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', originalValue), true);
       }
-      else if (value.length == 2 && options.showTimepicker) {
-        set(jQuery.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', value.join(' ')), true);
+      else if (splitted[0].length == 10) {
+        set(jQuery.datepicker.parseDate('yy-mm-dd', splitted[0]), true);
       }
       else {
@@ -88 +114 @@
       }
     }
+    
+    originalDate = $this.datetimepicker('getDate');
     
     // autoSize not handled by timepicker

trunk/admin/themes/default/template/batch_manager_global.tpl

@@ -65 +65 @@
 
 jQuery(document).ready(function() {ldelim}
-  jQuery('[data-datepicker]').pwgDatepicker({ showTimepicker: true });
+  jQuery('[data-datepicker]').pwgDatepicker({
+    showTimepicker: true,
+    cancelButton: '{'Cancel'|translate}'
+  });
 
   jQuery("a.preview-box").colorbox();

trunk/admin/themes/default/template/batch_manager_unit.tpl

@@ -24 +24 @@
 {* <!-- DATEPICKER --> *}
 jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
-  jQuery('[data-datepicker]').pwgDatepicker({ showTimepicker: true });
+  jQuery('[data-datepicker]').pwgDatepicker({
+    showTimepicker: true,
+    cancelButton: '{'Cancel'|translate}'
+  });
 });
 

trunk/admin/themes/default/template/include/datepicker.inc.tpl

@@ -12 +12 @@
 {/if}
 
+{combine_css path="themes/default/js/ui/theme/jquery.ui.theme.css"}
 {combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
 {combine_css path="themes/default/js/ui/theme/jquery.ui.datepicker.css"}

trunk/admin/themes/default/template/picture_modify.tpl

@@ -33 +33 @@
 {* <!-- DATEPICKER --> *}
 jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
-  jQuery('[data-datepicker]').pwgDatepicker({ showTimepicker: true });
+  jQuery('[data-datepicker]').pwgDatepicker({
+    showTimepicker: true,
+    cancelButton: '{'Cancel'|translate}'
+  });
 });
 }());