Date Picker

Component

Interactive examples and API documentation

Basic
A basic date picker component.
Date Picker (default)
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Week Picker
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
1
28
29
30
31
1
2
3
2
4
5
6
7
8
9
10
3
11
12
13
14
15
16
17
4
18
19
20
21
22
23
24
5
25
26
27
28
29
30
31
Month Picker
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Quarter Picker
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
Q1
Q2
Q3
Q4
Year Picker
2020-2029
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large) do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Date Picker (default)</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "date_picker",
      picker: :date,
      placeholder: "Select date"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Week Picker</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "week_picker",
      picker: :week,
      placeholder: "Select week"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Month Picker</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "month_picker",
      picker: :month,
      placeholder: "Select month"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Quarter Picker</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "quarter_picker",
      picker: :quarter,
      placeholder: "Select quarter"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Year Picker</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "year_picker",
      picker: :year,
      placeholder: "Select year"
    ) %>
  <% end %>
<% end %>
DateTime Picker
Date picker with time selection (show_time: true).
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Hours
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
Minutes
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
Seconds
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
February
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Hours
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
Minutes
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
Seconds
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
Code 
<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::DatePicker::Component.new(
      name: "event_datetime",
      placeholder: "Select date and time",
      show_time: true,
      allow_clear: true
    ) %>

    <%= render Hakumi::DatePicker::Component.new(
      name: "meeting_datetime",
      placeholder: "Select meeting date and time",
      value: "2026-02-15 14:30:00",
      show_time: true,
      allow_clear: true
    ) %>
  <% end %>
<% end %>
Custom Format
Customize the display format using Day.js tokens (e.g. DD/MM/YYYY, MMMM DD, YYYY). The internal value always uses ISO format for Rails compatibility.
US Format (MM/DD/YYYY)
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
European Format (DD/MM/YYYY)
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Long Format (MMMM DD, YYYY)
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Custom DateTime (DD/MM/YYYY HH:mm)
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Hours
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
Minutes
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
12-hour Format (MM/DD/YYYY hh:mm A)
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Hours
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
Minutes
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
Period
  • AM
  • PM
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large) do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">US Format (MM/DD/YYYY)</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "us_date",
      value: "2026-01-15",
      display_format: "MM/DD/YYYY",
      placeholder: "MM/DD/YYYY"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">European Format (DD/MM/YYYY)</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "eu_date",
      value: "2026-01-15",
      display_format: "DD/MM/YYYY",
      placeholder: "DD/MM/YYYY"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Long Format (MMMM DD, YYYY)</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "long_date",
      value: "2026-01-15",
      display_format: "MMMM DD, YYYY",
      placeholder: "Select date"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Custom DateTime (DD/MM/YYYY HH:mm)</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "custom_datetime",
      value: "2026-01-15 14:30:00",
      display_format: "DD/MM/YYYY HH:mm",
      show_time: true,
      show_seconds: false,
      placeholder: "Select date and time"
    ) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">12-hour Format (MM/DD/YYYY hh:mm A)</span>
    <%= render Hakumi::DatePicker::Component.new(
      name: "twelve_hour_datetime",
      value: "2026-01-15 14:30:00",
      display_format: "MM/DD/YYYY hh:mm A",
      show_time: true,
      show_seconds: false,
      placeholder: "Select date and time"
    ) %>
  <% end %>
<% end %>
Range Picker
Select a start and end date.
→
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Code 
<%= render Hakumi::DatePicker::RangePicker.new(
  name: "date_range",
  start_value: Date.today - 3,
  end_value: Date.today + 3,
  allow_clear: true
) %>
Sizes
Small, middle, and large date pickers.
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do %>
  <%= render Hakumi::DatePicker::Component.new(name: "date_small", size: :small, placeholder: "Small") %>
  <%= render Hakumi::DatePicker::Component.new(name: "date_middle", size: :middle, placeholder: "Middle") %>
  <%= render Hakumi::DatePicker::Component.new(name: "date_large", size: :large, placeholder: "Large") %>
<% end %>
Allow Clear
Allow clearing the selected date.
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Code 
<%= render Hakumi::DatePicker::Component.new(
  name: "clearable_date",
  value: Date.today,
  allow_clear: true
) %>
Disabled
Disabled date picker state.
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
January
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Code 
<%= render Hakumi::DatePicker::Component.new(
  name: "disabled_date",
  value: Date.today,
  disabled: true
) %>

DatePicker API

Prop Type Default Description
value Date or String - Controlled selected value (always stored in ISO format)
default_value Date or String - Initial value
display_format String auto Display format using Day.js tokens (e.g. 'DD/MM/YYYY', 'MMMM DD, YYYY')
format String auto Legacy: Display format using strftime (e.g. '%d/%m/%Y'). Use display_format instead.
picker :date | :week | :month | :quarter | :year :date Picker mode
show_time Boolean false Display time portion
show_seconds Boolean nil Show seconds in time picker (defaults to show_time value)
disabled Boolean false Disable the picker
disabled_date Proc - Function to disable dates. Receives date argument.
allow_clear Boolean false Allow clearing the selected value
placeholder String or Array Select date Input placeholder text
size :small | :middle | :large :middle Picker size
bordered Boolean true Show border
name String auto Form input name
label String - Label for form mode
caption String - Help text
errors Array [] Validation errors
standalone Boolean true Render without form item wrapper

RangePicker API

Prop Type Default Description
start_value Date or String - Start date value
end_value Date or String - End date value
placeholder Array ['Start date', 'End date'] Placeholders for start/end inputs

JavaScript API (element.hakumiComponent.api)

Prop Type Default Description
getValue() Function - Returns current value or { startValue, endValue } for ranges
setValue(value) Function - Sets the value (string or { startValue, endValue })
open() Function - Open the picker panel
close() Function - Close the picker panel
toggle() Function - Toggle the picker panel
clear() Function - Clear the selection
focus() Function - Focus the input
blur() Function - Blur the input
setDisabledDate(fn) Function - Set a function to disable dates

Events

Prop Type Default Description
hakumi:date-picker:change Event - Fired on value change. Detail: { value } or { startValue, endValue }
hakumi:date-picker:open-change Event - Fired when panel opens/closes. Detail: { open }