Merge pull request #2391 from dalpo/feature/bs-datetime-picker

Replace jQueryUI datetimepicker with jQuery Bootstrap datetimepicker

Author: mshibuya

CHANGELOG.md

@@ -1,5 +1,13 @@
 # RailsAdmin Changelog
 
+[Full Changelog](https://github.com/sferik/rails_admin/compare/v0.7.0...HEAD)
+
+## [Master](https://github.com/sferik/rails_admin/tree/master)
+
+### Changed
+- Replace old jQueryUI datepicker with jQuery Bootstrap datetimepicker ([#2391](https://github.com/sferik/rails_admin/pull/2391))
+- The L10n translation `admin.misc.filter_date_format` datepicker search filters, has been dropped in favor of field oriented configuration ([#2391](https://github.com/sferik/rails_admin/pull/2391))
+
 ## [0.7.0](https://github.com/sferik/rails_admin/tree/v0.7.0) - 2015-08-16
 
 [Full Changelog](https://github.com/sferik/rails_admin/compare/v0.6.8...v0.7.0)

app/assets/javascripts/rails_admin/jquery.ui.timepicker.js

@@ -3,17 +3,20 @@
   var filters;
 
   $.filters = filters = {
-    options: {
-      regional: {
-        datePicker: {
-          dateFormat: 'mm/dd/yy'
-        }
-      }
-    },
-
-    append: function(field_label, field_name, field_type, field_value, field_operator, field_options, index) {
-      var value_name = 'f[' +  field_name + '][' + index + '][v]';
+    append: function(options) {
+      options = options || {};
+      var field_label = options['label'];
+      var field_name  = options['name'];
+      var field_type  = options['type'];
+      var field_value = options['value'];
+      var field_operator = options['operator'];
+      var select_options = options['select_options'];
+      var index = options['index'];
+      var value_name    = 'f[' +  field_name + '][' + index + '][v]';
       var operator_name = 'f[' +  field_name + '][' + index + '][o]';
+      var control = null;
+      var additional_control = null;
+
       switch(field_type) {
         case 'boolean':
           var control = '<select class="input-sm form-control" name="' + value_name + '">' +
@@ -26,9 +29,13 @@
           '</select>';
           break;
         case 'date':
+          additional_control =
+          '<input size="20" class="date additional-fieldset default input-sm form-control" style="display:' + ((!field_operator || field_operator == "default") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[0] || '') + '" /> ' +
+          '<input size="20" placeholder="-∞" class="date additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[1] || '') + '" /> ' +
+          '<input size="20" placeholder="∞" class="date additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[2] || '') + '" />';
         case 'datetime':
         case 'timestamp':
-          var control = '<select class="switch-additionnal-fieldsets input-sm form-control" name="' + operator_name + '">' +
+          control = control || '<select class="switch-additionnal-fieldsets input-sm form-control" name="' + operator_name + '">' +
             '<option ' + (field_operator == "default"   ? 'selected="selected"' : '') + ' data-additional-fieldset="default" value="default">' + RailsAdmin.I18n.t("date") + '</option>' +
             '<option ' + (field_operator == "between"   ? 'selected="selected"' : '') + ' data-additional-fieldset="between" value="between">' + RailsAdmin.I18n.t("between_and_") + '</option>' +
             '<option ' + (field_operator == "today"   ? 'selected="selected"' : '') + ' value="today">' + RailsAdmin.I18n.t("today") + '</option>' +
@@ -39,29 +46,29 @@
             '<option ' + (field_operator == "_not_null" ? 'selected="selected"' : '') + ' value="_not_null">' + RailsAdmin.I18n.t("is_present") + '</option>' +
             '<option ' + (field_operator == "_null"     ? 'selected="selected"' : '') + ' value="_null" >' + RailsAdmin.I18n.t("is_blank") + '</option>' +
           '</select>'
-          var additional_control =
-          '<input class="date additional-fieldset default input-sm form-control" style="display:' + ((!field_operator || field_operator == "default") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[0] || '') + '" /> ' +
-          '<input placeholder="-∞" class="date additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[1] || '') + '" /> ' +
-          '<input placeholder="∞" class="date additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[2] || '') + '" />';
+          additional_control = additional_control ||
+          '<input size="25" class="datetime additional-fieldset default input-sm form-control" style="display:' + ((!field_operator || field_operator == "default") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[0] || '') + '" /> ' +
+          '<input size="25" placeholder="-∞" class="datetime additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[1] || '') + '" /> ' +
+          '<input size="25" placeholder="∞" class="datetime additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="text" name="' + value_name + '[]" value="' + (field_value[2] || '') + '" />';
           break;
         case 'enum':
           var multiple_values = ((field_value instanceof Array) ? true : false)
-          var control = '<select style="display:' + (multiple_values ? 'none' : 'inline-block') + '" ' + (multiple_values ? '' : 'name="' + value_name + '"') + ' data-name="' + value_name + '" class="select-single input-sm form-control">' +
+          control = '<select style="display:' + (multiple_values ? 'none' : 'inline-block') + '" ' + (multiple_values ? '' : 'name="' + value_name + '"') + ' data-name="' + value_name + '" class="select-single input-sm form-control">' +
               '<option value="_discard">...</option>' +
               '<option ' + (field_value == "_present" ? 'selected="selected"' : '') + ' value="_present">' + RailsAdmin.I18n.t("is_present") + '</option>' +
               '<option ' + (field_value == "_blank"   ? 'selected="selected"' : '') + ' value="_blank">' + RailsAdmin.I18n.t("is_blank") + '</option>' +
               '<option disabled="disabled">---------</option>' +
-              field_options +
+              select_options +
             '</select>' +
             '<select multiple="multiple" style="display:' + (multiple_values ? 'inline-block' : 'none') + '" ' + (multiple_values ? 'name="' + value_name + '[]"' : '') + ' data-name="' + value_name + '[]" class="select-multiple input-sm form-control">' +
-              field_options +
+              select_options +
             '</select> ' +
             '<a href="#" class="switch-select"><i class="icon-' + (multiple_values ? 'minus' : 'plus') + '"></i></a>';
         break;
         case 'string':
         case 'text':
         case 'belongs_to_association':
-          var control = '<select class="switch-additionnal-fieldsets input-sm form-control" value="' + field_operator + '" name="' + operator_name + '">' +
+          control = '<select class="switch-additionnal-fieldsets input-sm form-control" value="' + field_operator + '" name="' + operator_name + '">' +
             '<option data-additional-fieldset="additional-fieldset"'  + (field_operator == "like"        ? 'selected="selected"' : '') + ' value="like">' + RailsAdmin.I18n.t("contains") + '</option>' +
             '<option data-additional-fieldset="additional-fieldset"'  + (field_operator == "is"          ? 'selected="selected"' : '') + ' value="is">' + RailsAdmin.I18n.t("is_exactly") + '</option>' +
             '<option data-additional-fieldset="additional-fieldset"'  + (field_operator == "starts_with" ? 'selected="selected"' : '') + ' value="starts_with">' + RailsAdmin.I18n.t("starts_with") + '</option>' +
@@ -70,50 +77,57 @@
             '<option ' + (field_operator == "_not_null"    ? 'selected="selected"' : '') + ' value="_not_null">' + RailsAdmin.I18n.t("is_present") + '</option>' +
             '<option ' + (field_operator == "_null"      ? 'selected="selected"' : '') + ' value="_null">' + RailsAdmin.I18n.t("is_blank") + '</option>' +
           '</select>'
-          var additional_control = '<input class="additional-fieldset input-sm form-control" style="display:' + (field_operator == "_blank" || field_operator == "_present" ? 'none' : 'inline-block') + ';" type="text" name="' + value_name + '" value="' + field_value + '" /> ';
+          additional_control = '<input class="additional-fieldset input-sm form-control" style="display:' + (field_operator == "_blank" || field_operator == "_present" ? 'none' : 'inline-block') + ';" type="text" name="' + value_name + '" value="' + field_value + '" /> ';
           break;
         case 'integer':
         case 'decimal':
         case 'float':
-          var control = '<select class="switch-additionnal-fieldsets input-sm form-control" name="' + operator_name + '">' +
+          control = '<select class="switch-additionnal-fieldsets input-sm form-control" name="' + operator_name + '">' +
             '<option ' + (field_operator == "default"   ? 'selected="selected"' : '') + ' data-additional-fieldset="default" value="default">' + RailsAdmin.I18n.t("number") + '</option>' +
             '<option ' + (field_operator == "between"   ? 'selected="selected"' : '') + ' data-additional-fieldset="between" value="between">' + RailsAdmin.I18n.t("between_and_") + '</option>' +
             '<option disabled="disabled">---------</option>' +
             '<option ' + (field_operator == "_not_null" ? 'selected="selected"' : '') + ' value="_not_null">' + RailsAdmin.I18n.t("is_present") +'</option>' +
             '<option ' + (field_operator == "_null"     ? 'selected="selected"' : '') + ' value="_null" >' + RailsAdmin.I18n.t("is_blank") + '</option>' +
           '</select>'
-          var additional_control =
+          additional_control =
           '<input class="additional-fieldset default input-sm form-control" style="display:' + ((!field_operator || field_operator == "default") ? 'inline-block' : 'none') + ';" type="' + field_type + '" name="' + value_name + '[]" value="' + (field_value[0] || '') + '" /> ' +
           '<input placeholder="-∞" class="additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="' + field_type + '" name="' + value_name + '[]" value="' + (field_value[1] || '') + '" /> ' +
           '<input placeholder="∞" class="additional-fieldset between input-sm form-control" style="display:' + ((field_operator == "between") ? 'inline-block' : 'none') + ';" type="' + field_type + '" name="' + value_name + '[]" value="' + (field_value[2] || '') + '" />';
           break;
         default:
-          var control = '<input type="text" class="input-sm form-control" name="' + value_name + '" value="' + field_value + '"/> ';
+          control = '<input type="text" class="input-sm form-control" name="' + value_name + '" value="' + field_value + '"/> ';
           break;
       }
 
-      var content = '<p class="filter form-search">' +
-        '<span class="label label-info form-label"><a href="#" class="delete"><i class="icon-trash icon-white"></i></a> ' + field_label + '</span> ' +
-        control + " " +
-        (additional_control || '') +
-      '</p> ';
-      $('#filters_box').append(content);
-      $('#filters_box .date').datepicker(this.options.regional.datePicker);
+      var $content = $('<p>')
+        .addClass('filter form-search')
+        .append('<span class="label label-info form-label"><a href="#delete" class="delete"><i class="fa fa-trash-o fa-fw icon-white"></i></a> ' + field_label + '</span>')
+        .append('&nbsp;' + control + '&nbsp;' + (additional_control || ''));
+
+      $('#filters_box').append($content);
+
+      $content.find('.date, .datetime').datetimepicker({
+        locale: RailsAdmin.I18n.locale,
+        showTodayButton: true,
+        format: options['datetimepicker_format']
+      });
+
       $("hr.filters_box:hidden").show('slow');
     }
   }
 
   $(document).on('click', "#filters a", function(e) {
     e.preventDefault();
-    $.filters.append(
-      $(this).data('field-label'),
-      $(this).data('field-name'),
-      $(this).data('field-type'),
-      $(this).data('field-value'),
-      $(this).data('field-operator'),
-      $(this).data('field-options'),
-      $.now().toString().slice(6,11)
-    );
+    $.filters.append({
+      label: $(this).data('field-label'),
+      name:  $(this).data('field-name'),
+      type:  $(this).data('field-type'),
+      value: $(this).data('field-value'),
+      operator: $(this).data('field-operator'),
+      select_options: $(this).data('field-options'),
+      index: $.now().toString().slice(6,11),
+      datetimepicker_format: $(this).data('field-datetimepicker-format')
+    });
   });
 
   $(document).on('click', "#filters_box .delete", function(e) {

app/assets/javascripts/rails_admin/ra.datetimepicker.js

@@ -1,6 +1,8 @@
-class @RailsAdmin
+@RailsAdmin ||= {}
 @RailsAdmin.I18n = class Locale
-  @init: (@locale)->
+  @init: (@locale, @translations)->
+    moment.locale(@locale)
+
   @t:(key) ->
     humanize = key.charAt(0).toUpperCase() + key.replace(/_/g, " ").slice(1)
-    @locale[key] || humanize
+    @translations[key] || humanize

app/assets/javascripts/rails_admin/ra.filter-box.js

@@ -20,10 +20,22 @@ $(document).on 'rails_admin.dom_ready', (e, content) ->
           $(that).val(hex)
           $(that).css('backgroundColor', '#' + hex)
 
-    # datetime
+    # datetime picker
+    $.fn.datetimepicker.defaults.icons =
+      time:     'fa fa-clock-o'
+      date:     'fa fa-calendar'
+      up:       'fa fa-chevron-up'
+      down:     'fa fa-chevron-down'
+      previous: 'fa fa-angle-double-left'
+      next:     'fa fa-angle-double-right'
+      today:    'fa fa-dot-circle-o'
+      clear:    'fa fa-trash'
+      close:    'fa fa-times'
 
     content.find('[data-datetimepicker]').each ->
-      $(this).datetimepicker $(this).data('options')
+      options = $(this).data('options')
+      $.extend(options, {locale: RailsAdmin.I18n.locale})
+      $(this).datetimepicker options
 
     # enumeration
 

app/assets/javascripts/rails_admin/ra.i18n.coffee

@@ -4,9 +4,8 @@
 //=  require 'jquery-ui/effect'
 //=  require 'jquery-ui/sortable'
 //=  require 'jquery-ui/autocomplete'
-//=  require 'jquery-ui/datepicker'
-//=  require 'rails_admin/jquery.ui.timepicker'
-//=  require 'rails_admin/ra.datetimepicker'
+//=  require 'rails_admin/moment-with-locales'
+//=  require 'rails_admin/bootstrap-datetimepicker'
 //=  require 'rails_admin/jquery.colorpicker'
 //=  require 'rails_admin/ra.filter-box'
 //=  require 'rails_admin/ra.filtering-multiselect'

app/assets/javascripts/rails_admin/ra.widgets.coffee

@@ -8,7 +8,7 @@ $avatar-size: 30px;
 body.rails_admin {
 
   .thumbnail {
-    display:inline-block;
+    display: inline-block;
   }
 
   /* room for upper navbar */
@@ -58,6 +58,10 @@ body.rails_admin {
     }
   }
 
+  label.input-group-addon {
+    cursor: pointer;
+  }
+
   /* fat labels in forms */
   .label.form-label {
     padding: 7px 7px 8px 7px;
@@ -127,11 +131,6 @@ body.rails_admin {
       display:block;
     }
 
-    /* Put form controls above siblings to make them accessible */
-    .controls {
-      z-index: 1;
-    }
-
     /* nested forms */
     .tab-content {
       clear: both;