date_picker.rb

  class DateTimePicker < React::Component::Base
    param :record # typically an active_record model, but can be any object really
    param :field # attr (read and write) of the object to be updated.

    after_mount do
      initialize_timepicker
      initialize_datepicker
    end

    def initialize_timepicker
      Element["##{input_id}_time"].timepicker({ timeFormat: 'H:i' }.to_n)
      Element["##{input_id}_time"].on(:change) do |e|
        timepicker_val = e.target.value
        time = Time.parse("2000-01-01 #{timepicker_val}").strftime('%H:%M:%S')
        update_time(time)
      end
    end

    def initialize_datepicker
      Element["##{input_id}_date"].datepicker({
        dateFormat: 'mm-dd-yy',
        onSelect: ->(date, _i) { update_date(date) }
      }.to_n)
    end

    def input_id
      "#{params.record.class.name.downcase}_#{params.field}"
    end

    def input_name
      "#{params.record.class.name.downcase}[#{params.field}]"
    end

    def current_datetime_or_now
      return Time.now if params.record.send(params.field).nil?
      Time.parse(params.record.send(params.field))
    end

    def date_value
      return '' if params.record.send(params.field).nil?
      Time.parse(params.record.send(params.field)).strftime('%m-%d-%Y')
    end

    def time_value
      return '' if params.record.send(params.field).nil?
      Time.parse(params.record.send(params.field)).strftime('%H:%M')
    end

    def update_date(date)
      previous_date = current_datetime_or_now
      mon, d, y = date.split('-')
      h, m, s = previous_date.strftime('%H:%M:%S').split(':')
      params.record.send("#{params.field}=", Time.new(y, mon, d, h, m, s))
      return unless Element["##{input_id}_time"].value.blank?
      Element["##{input_id}_time"].value = params.record.send(params.field).strftime('%H:%M')
    end

    def update_time(time)
      previous_time = current_datetime_or_now
      h, m, s = time.split(':')
      y, mon, d = previous_time.strftime('%Y-%m-%d').split('-')
      params.record.send("#{params.field}=", Time.new(y, mon, d, h, m, s))
      return unless Element["##{input_id}_date"].value.blank?
      Element["##{input_id}_date"].value = params.record.send(params.field).strftime('%d-%m-%Y')
    end

    def date_override
      return unless Element["##{input_id}_date"].value.blank?
      params.record.send("#{params.field}=", nil)
      Element["##{input_id}_time"].value = nil
    end

    render(:div, class: 'row') do
      INPUT(id: input_id, name: input_name, type: :hidden, value: params.record.send(params.field))
      DIV(class: 'col-sm-6') do
        INPUT(id: "#{input_id}_date", name: "#{input_name}[date]", class: 'form-control datepicker',
              defaultValue: date_value, placeholder: 'Date')
          .on(:blur) { date_override }
      end
      DIV(class: 'col-sm-6') do
        INPUT(id: "#{input_id}_time", name: "#{input_name}[time]", class: 'form-control timepicker',
              defaultValue: time_value, placeholder: 'Time')
      end
    end
  end