Drop datetime_picker_rails and use browser fields

Since Administrate was released, browser support for native fields
around date/time/datetime picking has improved substantially. Now, every
major browser has adequate support for native pickers.

For those who need to support older browsers, we'd recommend using a
polyfill such as: https://github.com/jonstipe/datetime-local-polyfill

This commit should maintain like-for-like compatability, including
allowing filling out seconds by setting the `step` attribute.

https://caniuse.com/input-datetime
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
https://stackoverflow.com/questions/20111413/html5-datetime-local-control-how-to-hide-seconds

Gemfile.lock

@@ -5,10 +5,8 @@ PATH
       actionpack (>= 5.0)
       actionview (>= 5.0)
       activerecord (>= 5.0)
-      datetime_picker_rails (~> 0.0.7)
       jquery-rails (>= 4.0)
       kaminari (>= 1.0)
-      momentjs-rails (~> 2.8)
       sassc-rails (~> 2.1)
       selectize-rails (~> 0.6)
 
@@ -114,8 +112,6 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datetime_picker_rails (0.0.7)
-      momentjs-rails (>= 2.8.1)
     diff-lcs (1.4.4)
     dotenv (2.7.6)
     dotenv-rails (2.7.6)
@@ -190,8 +186,6 @@ GEM
     mini_mime (1.1.2)
     mini_portile2 (2.7.1)
     minitest (5.15.0)
-    momentjs-rails (2.29.1.1)
-      railties (>= 3.1)
     multipart-post (2.1.1)
     nio4r (2.5.8)
     nokogiri (1.13.1)

administrate.gemspec

@@ -17,10 +17,8 @@ Gem::Specification.new do |s|
   s.add_dependency "actionview", ">= 5.0"
   s.add_dependency "activerecord", ">= 5.0"
 
-  s.add_dependency "datetime_picker_rails", "~> 0.0.7"
   s.add_dependency "jquery-rails", ">= 4.0"
   s.add_dependency "kaminari", ">= 1.0"
-  s.add_dependency "momentjs-rails", "~> 2.8"
   s.add_dependency "sassc-rails", "~> 2.1"
   s.add_dependency "selectize-rails", "~> 0.6"
 

app/assets/javascripts/administrate/application.js

@@ -1,6 +1,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require selectize
-//= require moment
-//= require datetime_picker
 //= require_tree .

app/assets/stylesheets/administrate/application.scss

@@ -3,7 +3,6 @@
 @import "reset/normalize";
 
 @import "selectize";
-@import "datetime_picker";
 
 @import "library/clearfix";
 @import "library/data-label";

app/views/fields/date/_form.html.erb

@@ -2,7 +2,6 @@
 # Date Form Partial
 
 This partial renders an input element for a date attribute.
-By default, the input is a text field that is augmented with [DateTimePicker].
 
 ## Local variables:
 
@@ -13,12 +12,11 @@ By default, the input is a text field that is augmented with [DateTimePicker].
   A wrapper around the Date value pulled from the database.
 
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Field/Date
-[DateTimePicker]: https://github.com/Eonasdan/bootstrap-datetimepicker
 %>
 
 <div class="field-unit__label">
   <%= f.label field.attribute %>
 </div>
 <div class="field-unit__field">
-  <%= f.text_field field.attribute, data: { type: 'date' }  %>
+  <%= f.date_field field.attribute %>
 </div>

app/views/fields/date_time/_form.html.erb

@@ -2,7 +2,6 @@
 # DateTime Form Partial
 
 This partial renders an input element for a datetime attribute.
-By default, the input is a text field that is augmented with [DateTimePicker].
 
 ## Local variables:
 
@@ -13,12 +12,11 @@ By default, the input is a text field that is augmented with [DateTimePicker].
   A wrapper around the DateTime value pulled from the database.
 
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Field/DateTime
-[DateTimePicker]: https://github.com/Eonasdan/bootstrap-datetimepicker
 %>
 
 <div class="field-unit__label">
   <%= f.label field.attribute %>
 </div>
 <div class="field-unit__field">
-  <%= f.text_field field.attribute, data: { type: 'datetime' }  %>
+  <%= f.datetime_local_field field.attribute, step: 1 %>
 </div>

app/views/fields/time/_form.html.erb

@@ -2,7 +2,6 @@
 # Time Form Partial
 
 This partial renders an input element for time attributes.
-By default, the input is a text field that is augmented with [DateTimePicker].
 
 ## Local variables:
 
@@ -12,12 +11,12 @@ By default, the input is a text field that is augmented with [DateTimePicker].
   An instance of [Administrate::Field::Time][1].
   A wrapper around the tmie attributes pulled from the model.
 
-[DateTimePicker]: https://github.com/Eonasdan/bootstrap-datetimepicker
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Field/Time
 %>
 
 <div class="field-unit__label">
   <%= f.label field.attribute %>
 </div>
 <div class="field-unit__field">
-  <%= f.text_field field.attribute, data: { type: 'time' }, value: field.data&.strftime("%H:%M:%S") %>
+  <%= f.time_field field.attribute, step: 1 %>
 </div>

lib/administrate/engine.rb

@@ -1,7 +1,5 @@
-require "datetime_picker_rails"
 require "jquery-rails"
 require "kaminari"
-require "momentjs-rails"
 require "sassc-rails"
 require "selectize-rails"
 require "sprockets/railtie"

spec/features/orders_form_spec.rb

@@ -97,35 +97,4 @@ def find_option(associated_model, field_locator)
       field.find("option", text: displayed(associated_model))
     end
   end
-
-  describe "datetime field" do
-    it "responds to the date/time picker date format", :js do
-      order = create(:order)
-
-      visit edit_admin_order_path(order)
-      select_from_datepicker(Time.new(2015, 01, 02, 03, 04, 05))
-      click_on "Update Order"
-
-      expect(page).to have_content("Fri, Jan 2, 2015 at 03:04:05 AM")
-    end
-
-    it "populates and persists the existing value", :js do
-      time = Time.new(2015, 01, 02, 03, 04, 05)
-      order = create(:order, shipped_at: time)
-
-      visit edit_admin_order_path(order)
-      click_on "Update Order"
-
-      expect(order.reload.shipped_at).to eq(time)
-    end
-
-    def select_from_datepicker(time)
-      time_string = time.to_s[0..-7]
-
-      page.execute_script(<<-JS)
-        var date = moment("#{time_string}", "YYYY-MM-DD hh:mm:ss");
-        $('[data-type="datetime"]').data("DateTimePicker").date(date);
-      JS
-    end
-  end
 end