Bootstrap-datetimepicker

Gemfile

@@ -33,6 +33,8 @@ gem 'font-awesome-rails', '~> 4.3.0.0'
 gem 'rails-assets-growl'
 gem "paperclip", "~> 4.2"
 gem 'delayed_paperclip'
+gem 'momentjs-rails', '>= 2.9.0'
+gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'
 
 gem 'ruby-progressbar'
 
@@ -78,4 +80,3 @@ group :development, :test do
   gem 'simplecov-rcov', require: false
   gem 'database_cleaner'
 end
-

Gemfile.lock

@@ -48,6 +48,8 @@ GEM
     bcrypt (3.1.10)
     bootstrap-sass (3.2.0.2)
       sass (~> 3.2)
+    bootstrap3-datetimepicker-rails (4.7.14)
+      momentjs-rails (>= 2.8.1)
     bootstrap_form (2.3.0)
     bootswatch-rails (3.2.4)
       railties (>= 3.1)
@@ -149,6 +151,8 @@ GEM
     mime-types (2.4.3)
     mini_portile (0.6.2)
     minitest (5.6.0)
+    momentjs-rails (2.9.0)
+      railties (>= 3.1)
     multi_json (1.11.0)
     multipart-post (2.0.0)
     mysql2 (0.3.18)
@@ -362,6 +366,7 @@ PLATFORMS
 DEPENDENCIES
   bcrypt (~> 3.1.7)
   bootstrap-sass (~> 3.2.0.1)
+  bootstrap3-datetimepicker-rails (~> 4.7.14)
   bootstrap_form
   bootswatch-rails
   capybara
@@ -380,6 +385,7 @@ DEPENDENCIES
   jbuilder (~> 2.2.4)
   jquery-rails
   jquery-turbolinks
+  momentjs-rails (>= 2.9.0)
   mysql2
   nprogress-rails
   omniauth

app/assets/javascripts/moderation.js.erb.coffee

@@ -1 +1,3 @@
+#= require moment
+#= require bootstrap-datetimepicker
 #= require_tree ./moderation

app/assets/javascripts/moderation/ban.coffee

@@ -13,6 +13,18 @@ $(document).on "DOMContentLoaded", ->
     else
       $("#ban-controls-time").show()
 
+  $("#until").addClass("remove-native-picker").datetimepicker
+    icons:
+      time: "fa fa-clock-o"
+      date: "fa fa-calendar"
+      up: "fa fa-chevron-up"
+      down: "fa fa-chevron-down"
+      previous: "fa fa-chevron-left"
+      next: "fa fa-chevron-right"
+      today: "fa fa-home"
+      clear: "fa fa-trash-o"
+      close: "fa fa-times"
+
   parent.parent()[0].addEventListener "submit", (event) ->
     event.preventDefault();
 

app/assets/stylesheets/application.css.scss

@@ -45,7 +45,14 @@ $navbar-inverse-toggle-border-color: #512da8;
 @import "bootswatch/cosmo/variables";
 
 @import "bootstrap";
+
 body { padding-top: $navbar-height; }
+
+@import 'bootstrap-datetimepicker';
+.remove-native-picker::-webkit-calendar-picker-indicator{
+  display: none
+}
+
 @import "bootswatch/cosmo/bootswatch";
 
 @import "base";