Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.