Fix release date issue in Safari

samvera · Oct 7, 2019 · f5a66d0 · f5a66d0
1 parent 5d9f0b5
commit f5a66d0
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/app/assets/javascripts/hyrax/admin/admin_set/visibility.es6 b/app/assets/javascripts/hyrax/admin/admin_set/visibility.es6
@@ -4,6 +4,7 @@ export default class {
   }
 
   setup() {
+    this.dateFormatOnLoad();
     // Watch for changes to "release_period" radio inputs
     let releasePeriodInput = this.element.find("input[type='radio'][name$='[release_period]']")
     $(releasePeriodInput).on('change', () => { this.releasePeriodSelected() })
@@ -13,6 +14,7 @@ export default class {
     let releaseVariesInput = this.element.find("input[type='radio'][name$='[release_varies]']")
     $(releaseVariesInput).on('change', () => { this.releaseVariesSelected() })
     this.releaseVariesSelected()
+    this.validateEmbargoDate();
   }
 
   // Based on the "release_period" radio selected, enable/disable other options
@@ -131,4 +133,56 @@ export default class {
   enableVisibilityRestricted() {
     this.element.find("input[type='radio'][name$='[visibility]'][value='restricted']").prop("disabled", false)
   }
+
+  // Check whether the browser supports input[type="date"]
+  isDateSupported() {
+    var input = document.createElement('input');
+    input.setAttribute('type', 'date');
+    return (input.type === 'date');
+  }
+
+  // Change date form on from yyyy-mm-dd to mm/dd/yyyy on display
+  dateFormatOnLoad() {
+    if(!this.isDateSupported()) {
+      // Detect yyyy-mm-dd format
+      const regex = /^\d{4}[./-]\d{2}[./-]\d{2}$/;
+
+      // Get all the input fields
+      var $inputs = this.element.find(':input');
+
+      $inputs.each(function() {
+        if($(this).attr('type') === 'date') {
+          var value = $(this).val();
+          if(value.match(regex)) {
+            const [yyyy, mm, dd] = value.split('-');
+            $(this).val(mm + '/' + dd + '/' + yyyy);
+          }
+        }
+      });
+    }
+  }
+
+  // Change date format from mm/dd/yyyy to yyyy-mm-dd on form submit
+  validateEmbargoDate() {
+    if(!this.isDateSupported()) {
+      // Detect mm/dd/yyyy format
+      const regex = /^\d{2}[./-]\d{2}[./-]\d{4}$/;
+
+      var form = $('form');
+      form.on('submit', function() {
+        // Get all the input fields in the form
+        var $inputDates = form.find(':input')
+
+        $inputDates.each(function() {
+          if($(this).attr('type') === "date") {
+            var value = $(this).val();
+            if(value.match(regex)) {
+              const [mm, dd, yyyy] = value.split('/');
+              $(this).val(yyyy + '-' + mm + '-' + dd);
+            }
+          }
+        });
+      });
+    }
+  }
 }
diff --git a/app/views/hyrax/admin/admin_sets/_form_visibility.html.erb b/app/views/hyrax/admin/admin_sets/_form_visibility.html.erb
@@ -30,7 +30,7 @@
                           <%= f.radio_button :release_varies, Hyrax::PermissionTemplate::RELEASE_TEXT_VALUE_BEFORE_DATE %>
                           <%= t('.release.varies.between') %>
                         </label>
-                        <%= f.date_field :release_date, wrapper: :inline, class: 'datepicker form-control' %>
+                        <%= f.date_field :release_date, wrapper: :inline, class: 'datepicker form-control', placeholder: 'mm/dd/yyyy' %>
                       </li>
                       <li class="radio form-inline">
                         <label>
@@ -46,7 +46,7 @@
                       <%= f.radio_button :release_period, Hyrax::PermissionTemplate::RELEASE_TEXT_VALUE_FIXED %>
                       <%= t('.release.fixed') %>
                     </label>
-                    <%= f.date_field :release_date, wrapper: :inline, class: 'datepicker form-control' %>
+                    <%= f.date_field :release_date, wrapper: :inline, class: 'datepicker form-control', placeholder: 'mm/dd/yyyy' %>
                   </div>
                   <h3><%= t('.visibility.title') %></h3>
                   <p><%= t('.visibility.description') %></p>
@@ -62,4 +62,4 @@
                 </div>
               <% end %>
             </div>
-          </div>
+          </div>