From a07b1d5942f1227cb591f2685432f908a273ae06 Mon Sep 17 00:00:00 2001 From: Nick Charlton Date: Thu, 3 Feb 2022 13:03:55 +0000 Subject: [PATCH] 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 | 6 ---- administrate.gemspec | 2 -- .../javascripts/administrate/application.js | 2 -- .../components/date_time_picker.js | 14 --------- .../stylesheets/administrate/application.scss | 1 - app/views/fields/date/_form.html.erb | 4 +-- app/views/fields/date_time/_form.html.erb | 4 +-- app/views/fields/time/_form.html.erb | 5 ++- lib/administrate/engine.rb | 2 -- spec/features/orders_form_spec.rb | 31 ------------------- 10 files changed, 4 insertions(+), 67 deletions(-) delete mode 100644 app/assets/javascripts/administrate/components/date_time_picker.js diff --git a/Gemfile.lock b/Gemfile.lock index 4eb4d7388f..2fedcce903 100644 --- a/Gemfile.lock +++ b/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) diff --git a/administrate.gemspec b/administrate.gemspec index 314674f1e6..8a4d6d2575 100644 --- a/administrate.gemspec +++ b/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" diff --git a/app/assets/javascripts/administrate/application.js b/app/assets/javascripts/administrate/application.js index 1742ae435c..155a2a3397 100644 --- a/app/assets/javascripts/administrate/application.js +++ b/app/assets/javascripts/administrate/application.js @@ -1,6 +1,4 @@ //= require jquery //= require jquery_ujs //= require selectize -//= require moment -//= require datetime_picker //= require_tree . diff --git a/app/assets/javascripts/administrate/components/date_time_picker.js b/app/assets/javascripts/administrate/components/date_time_picker.js deleted file mode 100644 index 18266ea946..0000000000 --- a/app/assets/javascripts/administrate/components/date_time_picker.js +++ /dev/null @@ -1,14 +0,0 @@ -$(function () { - $('[data-type="time"]').datetimepicker({ - debug: false, - format: 'HH:mm:ss', - }); - $('[data-type="datetime"]').datetimepicker({ - debug: false, - format: 'YYYY-MM-DD HH:mm:ss', - }); - $('[data-type="date"]').datetimepicker({ - debug: false, - format: 'YYYY-MM-DD', - }); -}); diff --git a/app/assets/stylesheets/administrate/application.scss b/app/assets/stylesheets/administrate/application.scss index 1f6f5d6270..534ef3279a 100644 --- a/app/assets/stylesheets/administrate/application.scss +++ b/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"; diff --git a/app/views/fields/date/_form.html.erb b/app/views/fields/date/_form.html.erb index aecbcdb792..ab7cba79bf 100644 --- a/app/views/fields/date/_form.html.erb +++ b/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 %>
<%= f.label field.attribute %>
- <%= f.text_field field.attribute, data: { type: 'date' } %> + <%= f.date_field field.attribute %>
diff --git a/app/views/fields/date_time/_form.html.erb b/app/views/fields/date_time/_form.html.erb index 4a96587894..83b120a5f5 100644 --- a/app/views/fields/date_time/_form.html.erb +++ b/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 %>
<%= f.label field.attribute %>
- <%= f.text_field field.attribute, data: { type: 'datetime' } %> + <%= f.datetime_local_field field.attribute, step: 1 %>
diff --git a/app/views/fields/time/_form.html.erb b/app/views/fields/time/_form.html.erb index 6bdc0a9535..7817876be0 100644 --- a/app/views/fields/time/_form.html.erb +++ b/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 %>
<%= f.label field.attribute %>
- <%= f.text_field field.attribute, data: { type: 'time' }, value: field.data&.strftime("%H:%M:%S") %> + <%= f.time_field field.attribute, step: 1 %>
diff --git a/lib/administrate/engine.rb b/lib/administrate/engine.rb index 1ed05d679e..3961cf4f62 100644 --- a/lib/administrate/engine.rb +++ b/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" diff --git a/spec/features/orders_form_spec.rb b/spec/features/orders_form_spec.rb index 0d6725cf1d..540dbdb1b1 100644 --- a/spec/features/orders_form_spec.rb +++ b/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