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
March
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
29
30
31
1
2
3
4
Week Picker
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
March
January
February
March
April
May
June
July
August
September
October
November
December
Su Mo Tu We Th Fr Sa
10
1
2
3
4
5
6
7
11
8
9
10
11
12
13
14
12
15
16
17
18
19
20
21
13
22
23
24
25
26
27
28
14
29
30
31
1
2
3
4
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 HakumiComponents::Space::Component.new(direction: :vertical, size: :large) do %>
  <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Date Picker (default)</span>
    <%= render HakumiComponents::DatePicker::Component.new(
      name: "date_picker",
      picker: :date,
      placeholder: "Select date"
    ) %>
  <% end %>

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

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

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

  <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Year Picker</span>
    <%= render HakumiComponents::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
March
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
29
30
31
1
2
3
4
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 HakumiComponents::Card::Component.new do %>
  <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render HakumiComponents::DatePicker::Component.new(
      name: "event_datetime",
      placeholder: "Select date and time",
      show_time: true,
      allow_clear: true
    ) %>

    <%= render HakumiComponents::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 HakumiComponents::Space::Component.new(direction: :vertical, size: :large) do %>
  <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">US Format (MM/DD/YYYY)</span>
    <%= render HakumiComponents::DatePicker::Component.new(
      name: "us_date",
      value: "2026-01-15",
      display_format: "MM/DD/YYYY",
      placeholder: "MM/DD/YYYY"
    ) %>
  <% end %>

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

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

  <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">Custom DateTime (DD/MM/YYYY HH:mm)</span>
    <%= render HakumiComponents::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 HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do %>
    <span style="font-weight: 500;">12-hour Format (MM/DD/YYYY hh:mm A)</span>
    <%= render HakumiComponents::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
March
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
29
30
31
1
2
3
4
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
March
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
29
30
31
1
2
3
4
Code 
<%= render HakumiComponents::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
March
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
29
30
31
1
2
3
4
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
March
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
29
30
31
1
2
3
4
2026
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
March
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
29
30
31
1
2
3
4
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do %>
  <%= render HakumiComponents::DatePicker::Component.new(name: "date_small", size: :small, placeholder: "Small") %>
  <%= render HakumiComponents::DatePicker::Component.new(name: "date_middle", size: :middle, placeholder: "Middle") %>
  <%= render HakumiComponents::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
March
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
29
30
31
1
2
3
4
Code 
<%= render HakumiComponents::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
March
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
29
30
31
1
2
3
4
Code 
<%= render HakumiComponents::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:openChange Event - Fired when panel opens/closes. Detail: { open }