app/demo/components/date_fields.pom
require 'date'
Voom::Presenters.define(:date_fields) do
helpers Demo::Helpers::IndentedGrid
attach :top_nav
attach :component_drawer
page_title 'Date Fields'
indented_grid do
body <<~DOC
A date separates user display format from the value format.
The default date user display [format](/formatting_tokens#date) can be configured globally using the following:
````
Voom::Presenters::Settings.configure do |config|
config.presenters.components.defaults.date.format = 'F j, Y'
end
````
The value format for date times can be the following:
* Ruby Time/DateTime objects.
* ISO/Chronologically Date Strings, e.g. "2017-02-26"
DOC
grid do
column 6 do
date_field name: :skydive_at,
format: 'F j, Y' do
label 'Select your date to skydive'
icon :event
event :change do
replaces :context_list, :context_list
end
end
end
column 6 do
attach :context_list
end
end
grid do
column 6 do
title 'Min Date'
date_field min_date: "2020-01-01"
title 'Max Date'
date_field max_date: "2017-12-15"
title 'Min Date (today)'
date_field min_date: :today
title 'Min (today), Max (14 days from now)'
date_field min_date: :today, max_date: DateTime.new(2025, 4, 9) # Or in rails Time.now + 14.days
title 'Disabling specific dates'
date_field disable: ["2025-01-30", "2025-02-21", "2025-03-08", DateTime.new(2025, 4, 9)]
title 'Disable range of dates'
date_field disable: [
{
from: "2025-04-01",
to: "2025-05-01"
},
{
from: "2025-09-01",
to: "2025-12-01"
}
]
title 'Enabling specific dates'
date_field enable: [
{
from: "2025-04-01",
to: "2025-05-01"
},
{
from: "2025-09-01",
to: "2025-12-01"
}
]
title 'Selecting multiple dates'
date_field mode: :multiple
title 'Preloading multiple dates'
date_field mode: :multiple do
value ["2016-10-20", "2016-11-04"]
end
title 'Range'
date_field mode: :range
end
end
grid do
column 6 do
title 'As a simple text field'
text 'You can use the date field without a picker and get a simple auto-formatting text input.'
date_field picker: false do
label 'Birthdate'
end
end
end
end
attach :code, file: __FILE__
end