Turn SimpleForm DateTimeInput to JQuery Datetime Picker

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require base
//= require jquery.ui.slider
//= require jquery.ui.datepicker
//= require jquery-ui-timepicker-addon
//= require_tree .

date_time_input.rb

# app/inputs/date_time_input.rb
class DateTimeInput < SimpleForm::Inputs::DateTimeInput
  def input
    result = ""
    result << template.text_field_tag(attribute_name, value, :class => text_field_class, :style => "display: none;")
    result << template.content_tag(:div, super, :class => "ui-datetime-selector")
    result.html_safe
  end

  def options
    super.reverse_merge({ include_blank: true })
  end

  def text_field_class
    case input_type
    when :date
      "ui-date-picker"
    when :datetime
      "ui-datetime-picker"
    when :time
      "ui-time-picker"      
    end
  end

  def value
    @value ||= I18n.l object.send(attribute_name) if object && object.send(attribute_name)
  end
end

en.yml

en:
  date:
    formats:
      default: '%d/%m/%Y' # update time_picker.js accordingly

time_picker.css

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

time_picker.js

//app/assets/javascripts/common/time_picker.js
$(document).ready(function() {
  var updateDate = function(picker){
    var date  = picker.datepicker('getDate');
    var day   = date != null ? date.getDate() : "";
    var month = date != null ? date.getMonth() + 1 : "" ;
    var year  = date != null ? date.getFullYear() : "";
    
    picker.siblings('.ui-datetime-selector').each(function(){
      $("select[id*='1i']", this).val(year);
      $("select[id*='2i']", this).val(month);
      $("select[id*='3i']", this).val(day);
    });
  };

  var updateTime = function(picker){
    var date  = picker.datepicker('getDate');
    var hour  = date != null ? ("00" + date.getHours()).slice(-2) : "";
    var mins  = date != null ? ("00" + date.getMinutes()).slice(-2) : "";

    picker.siblings('.ui-datetime-selector').each(function(){
      $("select[id*='4i']", this).val(hour);
      $("select[id*='5i']", this).val(mins);
    });
  };

  var initialPicker = function(){
    $(this).attr('autocomplete', 'off');
    $(this).prop('readonly', true);
    $(this).toggle(true);
    $(this).siblings('.ui-datetime-selector').toggle(false);
  };

  $('.ui-datetime-picker').datetimepicker({
    // update the en.yml accordingly
    constrainInputType: true,
    dateFormat: "dd/mm/yy",
    onClose: function(date, inst){
      updateDate($(this));
      updateTime($(this));
      $(this).blur();
    }
  }).each(initialPicker);

  $('.ui-date-picker').datepicker({
    // update the en.yml accordingly
    dateFormat: "dd/mm/yy",
    onClose: function(date, inst){
      updateDate($(this));
      $(this).blur();
    }    
  }).each(initialPicker);

  $('.ui-time-picker').timepicker({
    // update the en.yml accordingly
    dateFormat: "dd/mm/yy",
    onClose: function(date, inst){
      updateTime($(this));
      $(this).blur();
    }    
  }).each(initialPicker);
});