TimePicker

시간(시·분·초)을 선택할 수 있는 시간 선택기 컴포넌트입니다. 12시간/24시간 형식과 선택적인 초 표시를 지원합니다.

기본 사용법 (Basic Usage)#

// 기본 시간 선택기
TimePicker(
  value: selectedTime,
  placeholder: 'Select time',
  onChanged: handleTimeChanged,
)

// 24시간 형식 강제
TimePicker(
  value: meetingTime,
  use24HourFormat: true,
  onChanged: handleMeetingTimeChanged,
)

// 초 표시 포함
TimePicker(
  value: preciseTime,
  showSeconds: true,
  onChanged: handlePreciseTimeChanged,
)

// 분을 15분 단위로
TimePicker(
  value: appointment,
  minuteInterval: 15,
  onChanged: handleAppointmentChanged,
)

// 선택 가능 범위 제한 (ISO time string)
TimePicker(
  value: businessHour,
  min: '09:00',
  max: '18:00',
  onChanged: handleBusinessHourChanged,
)

// 기본 시간 선택기
TimePicker(
  value: selectedTime,
  placeholder: 'Select time',
  onChanged: handleTimeChanged,
)

// 24시간 형식 강제
TimePicker(
  value: meetingTime,
  use24HourFormat: true,
  onChanged: handleMeetingTimeChanged,
)

// 초 표시 포함
TimePicker(
  value: preciseTime,
  showSeconds: true,
  onChanged: handlePreciseTimeChanged,
)

// 분을 15분 단위로
TimePicker(
  value: appointment,
  minuteInterval: 15,
  onChanged: handleAppointmentChanged,
)

// 선택 가능 범위 제한
TimePicker(
  value: businessHour,
  min: '09:00',
  max: '18:00',
  onChanged: handleBusinessHourChanged,
)

빠른 오버라이드 (Chain)#

이미 만든 TimePicker 인스턴스에 스타일을 빠르게 덧붙이고 싶다면 withStyle 체인을 쓸 수 있습니다. 생성자의 style 슬롯 인자와 동일하게 동작하지만, 이미 구성된 위젯 위에서 바로 이어 쓸 수 있습니다.

class TimePickerChainExample extends StatefulWidget {
  const TimePickerChainExample({super.key});

  @override
  State<TimePickerChainExample> createState() => _TimePickerChainExampleState();
}

class _TimePickerChainExampleState extends State<TimePickerChainExample> {
  String? _value;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space256,
      child:
          TimePicker(
            value: _value,
            placeholder: 'Select time',
            onChanged: (value) => setState(() => _value = value),
          ).withStyle(
            const CoreTimePickerStyle(
              segmentBorderRadius: CoreBorderRadius.all(CoreRadius.radius8),
              segmentBorderColor: CoreColor.token(CoreColors.primary),
              contentColor: CoreColor.token(CoreColors.primary),
              triggerHeight: CoreSpace.space48,
              triggerBorderWidth: CoreStrokeWidth.stroke2,
              trailingIconStyle: CoreIconStyle(
                size: CoreIconSize.size20,
                color: CoreColor.token(CoreColors.primary),
              ),
            ),
          ),
    );
  }
}

class TimePickerChainExample extends StatefulComponent {
  const TimePickerChainExample({super.key});

  @override
  State<TimePickerChainExample> createState() => _TimePickerChainExampleState();
}

class _TimePickerChainExampleState extends State<TimePickerChainExample> {
  String? _value;

  @override
  Component build(BuildContext context) {
    return div(
      [
        TimePicker(
          value: _value,
          placeholder: 'Select time',
          onChanged: (value) => setState(() => _value = value),
        ).withStyle(
          const CoreTimePickerStyle(
            segmentBorderRadius: CoreBorderRadius.all(CoreRadius.radius8),
            segmentBorderColor: CoreColor.token(CoreColors.primary),
            contentColor: CoreColor.token(CoreColors.primary),
            triggerHeight: CoreSpace.space48,
            triggerBorderWidth: CoreStrokeWidth.stroke2,
            trailingIconStyle: CoreIconStyle(
              size: CoreIconSize.size20,
              color: CoreColor.token(CoreColors.primary),
            ),
          ),
        ),
      ],
      classes: 'w-${CoreSpace.scale.space256}',
    );
  }
}

Live Preview#

기본 (popover)#

class TimePickerDefaultExample extends StatefulComponent {
  const TimePickerDefaultExample({super.key});

  @override
  State<TimePickerDefaultExample> createState() =>
      _TimePickerDefaultExampleState();
}

class _TimePickerDefaultExampleState extends State<TimePickerDefaultExample> {
  String? _value;

  @override
  Component build(BuildContext context) {
    return div(
      [
        TimePicker(
          value: _value,
          placeholder: 'Select time',
          onChanged: (value) => setState(() => _value = value),
        ),
      ],
      classes: 'w-${CoreSpace.scale.space256}',
    );
  }
}

class TimePickerDefaultExample extends StatefulWidget {
  const TimePickerDefaultExample({super.key});

  @override
  State<TimePickerDefaultExample> createState() =>
      _TimePickerDefaultExampleState();
}

class _TimePickerDefaultExampleState extends State<TimePickerDefaultExample> {
  String? _value;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space256,
      child: TimePicker(
        value: _value,
        placeholder: 'Select time',
        onChanged: (value) => setState(() => _value = value),
      ),
    );
  }
}

다이얼로그 모드#

class TimePickerDialogExample extends StatefulComponent {
  const TimePickerDialogExample({super.key});

  @override
  State<TimePickerDialogExample> createState() =>
      _TimePickerDialogExampleState();
}

class _TimePickerDialogExampleState extends State<TimePickerDialogExample> {
  String? _value;

  @override
  Component build(BuildContext context) {
    return div(
      [
        TimePicker(
          value: _value,
          placeholder: 'Select time',
          mode: CorePromptMode.dialog,
          dialogTitle: Text('Pick a time'),
          onChanged: (value) => setState(() => _value = value),
        ),
      ],
      classes: 'w-${CoreSpace.scale.space256}',
    );
  }
}

class TimePickerDialogExample extends StatefulWidget {
  const TimePickerDialogExample({super.key});

  @override
  State<TimePickerDialogExample> createState() =>
      _TimePickerDialogExampleState();
}

class _TimePickerDialogExampleState extends State<TimePickerDialogExample> {
  String? _value;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space256,
      child: TimePicker(
        value: _value,
        placeholder: 'Select time',
        mode: CorePromptMode.dialog,
        dialogTitle: const Text('Pick a time'),
        onChanged: (value) => setState(() => _value = value),
      ),
    );
  }
}

초 단위 (HH:MM:SS)#

class TimePickerSecondsExample extends StatefulComponent {
  const TimePickerSecondsExample({super.key});

  @override
  State<TimePickerSecondsExample> createState() =>
      _TimePickerSecondsExampleState();
}

class _TimePickerSecondsExampleState extends State<TimePickerSecondsExample> {
  String? _value;

  @override
  Component build(BuildContext context) {
    return div(
      [
        TimePicker(
          value: _value,
          placeholder: 'Select time',
          showSeconds: true,
          onChanged: (value) => setState(() => _value = value),
        ),
      ],
      classes: 'w-${CoreSpace.scale.space256}',
    );
  }
}

class TimePickerSecondsExample extends StatefulWidget {
  const TimePickerSecondsExample({super.key});

  @override
  State<TimePickerSecondsExample> createState() =>
      _TimePickerSecondsExampleState();
}

class _TimePickerSecondsExampleState extends State<TimePickerSecondsExample> {
  String? _value;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space256,
      child: TimePicker(
        value: _value,
        placeholder: 'Select time',
        showSeconds: true,
        onChanged: (value) => setState(() => _value = value),
      ),
    );
  }
}

에러 상태#

class TimePickerErrorExample extends StatefulComponent {
  const TimePickerErrorExample({super.key});

  @override
  State<TimePickerErrorExample> createState() =>
      _TimePickerErrorExampleState();
}

class _TimePickerErrorExampleState extends State<TimePickerErrorExample> {
  String? _value;

  @override
  Component build(BuildContext context) {
    return div(
      [
        TimePicker(
          value: _value,
          placeholder: 'Select time',
          errorText: 'Time is required',
          onChanged: (value) => setState(() => _value = value),
        ),
      ],
      classes: 'w-${CoreSpace.scale.space256}',
    );
  }
}

class TimePickerErrorExample extends StatefulWidget {
  const TimePickerErrorExample({super.key});

  @override
  State<TimePickerErrorExample> createState() =>
      _TimePickerErrorExampleState();
}

class _TimePickerErrorExampleState extends State<TimePickerErrorExample> {
  String? _value;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space256,
      child: TimePicker(
        value: _value,
        placeholder: 'Select time',
        errorText: 'Time is required',
        onChanged: (value) => setState(() => _value = value),
      ),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 예약, 일정, 알림 등 시간을 입력받아야 하는 경우
• 12시간(AM/PM) 또는 24시간 형식의 시간 선택이 필요한 경우
• 영업 시간, 배송 시간처럼 선택 가능한 시간 범위를 제한해야 하는 경우

대신 다른 컴포넌트를 사용하세요:

• DatePicker: 날짜와 시간을 함께 선택해야 하는 경우
• TextField: 시간을 자유 형식 텍스트로 직접 입력받는 경우
• Select: 고정된 시간 슬롯 목록에서 선택해야 하는 경우

Props / Parameters#

W는 dialogTitle의 콘텐츠 타입이며 Flutter의 Widget, Web의 Component입니다. 시간 값은 24시간 ISO 문자열로 주고받고 표시 형식만 12/24시간으로 바뀝니다.

스타일 시스템 (Style System)#

TimePicker의 모든 chrome / 치수 / 중첩 슬롯 오버라이드는 CoreTimePickerStyle 한곳으로 흐릅니다.

시맨틱 vs 스타일#

• 시맨틱 enum / 동작: 위젯 파라미터로 직접 (mode, popoverPlacement, placeholder, placeholderSegment, placeholderSeparator, enabled, showSeconds, use24HourFormat, minuteInterval, onChanged, min, max, errorText, dialogTitle)
• chrome / 치수 / 슬롯 스타일: CoreTimePickerStyle 한곳 (아래 필드 표)
• 변형 교체: asChild — dialogTitle 슬롯 등에 위젯을 직접 넣습니다

Resolve chain#

design system default for time picker
  → CoreTimePickerTheme.style                  // 프로젝트 공통
  → parent component slot override
  → widget.timePickerStyle                     // 인스턴스별

각 nested 슬롯 스타일 (triggerStyle / popoverStyle / dialogStyle / segmentInputStyle / amPmToggleStyle / actionButtonStyle) 은 자기 컴포넌트의 자체 resolve chain 으로 다시 한 번 머지됩니다. 예: 트리거는 읽기 전용 TextField 라서 triggerStyle 의 chrome 은 → CoreTextFieldTheme → 크기 행(md) → 부모 슬롯 → widget.timePickerStyle.triggerStyle 순. 마찬가지로 popover 패널 박스는 popoverStyle.panelStyle (CorePopupStyle) 을 통해 Popup 의 resolver 로, AM/PM 선택은 amPmToggleStyle (CoreToggleGroupStyle) 을 통해 ToggleGroup 의 resolver 로 흐릅니다.

트리거는 DatePicker 와 같은 입력창 모양입니다 — 높이 40 · 모서리 10 · outline-variant 테두리(포커스에서 primary) · Regular 14 값 · 오른쪽 시계 아이콘, 폭은 부모가 준 폭을 채웁니다. 박스는 합성한 TextField 의 md 행이 정하므로 TimePicker 는 높이(triggerHeight) · 값 색(contentColor) · 시계(trailingIconStyle)만 말합니다.

CoreTimePickerStyle 필드#

사용 예 (Flutter)#

TimePicker(
  value: '14:30',
  placeholder: 'Select time',
  onChanged: handleTimeChanged,
  timePickerStyle: CoreTimePickerStyle(
    popoverStyle: CorePopoverStyle(
      panelStyle: CorePopupStyle(
        borderRadius: CoreBorderRadius.all(CoreRadius.radius12),
        padding: CoreEdgeInsets.all(CoreSpace.space16),
      ),
      placementOffset: CoreSpace.space8,
    ),
    triggerStyle: CoreTextFieldStyle(
      borderColor: CoreColor.token(CoreColors.outline),
    ),
    segmentInputStyle: CoreTextFieldStyle(
      borderColor: CoreColor.token(CoreColors.primary),
    ),
    amPmToggleStyle: CoreToggleGroupStyle(itemHeight: CoreSize.size36),
    labelStyle: CoreTextStyle(fontWeight: CoreFontWeight.semiBold),
  ),
)

Theme 오버라이드#

CoreComponentTheme.timePicker를 통해 프로젝트 레벨의 기본 스타일(CoreTimePickerStyle)을 지정할 수 있습니다:

CoreComponentTheme(
  timePicker: CoreTimePickerTheme(
    style: CoreTimePickerStyle(
      popoverStyle: CorePopoverStyle(
        panelStyle: CorePopupStyle(
          borderRadius: CoreBorderRadius.all(CoreRadius.radius8),
          padding: CoreEdgeInsets.all(CoreSpace.space16),
        ),
      ),
      triggerStyle: CoreTextFieldStyle(
        borderColor: CoreColor.token(CoreColors.outline),
      ),
    ),
  ),
)

동작 스펙 (Behavior)#

인터랙션#

• 트리거 클릭: mode가 popover(기본)면 Popover 패널이 popoverPlacement 위치로, dialog면 Dialog 가 중앙 모달로 열립니다 (양쪽 동일)
• 직접 입력: 시/분/초 필드에 숫자를 직접 입력 가능 (양쪽 동일)
• 세그먼트 칸: 64×60, 모서리 10, 채움 surface-container-high, 테두리는 투명(칸 안에 입력 상자를 따로 두지 않고 칸 하나가 곧 입력입니다). 패널 모서리는 12(Popup 기본), 테두리는 outlineVariant 입니다 (양쪽 동일)
• 세그먼트 포커스: 편집 중인 칸은 링이 아니라 primary-container 면과 on-primary-container 글자로 표시합니다(segmentFocusedSurfaceColor / segmentFocusedContentColor). 링은 닫힌 트리거의 포커스에만 있습니다 (양쪽 동일)
• 세그먼트 hover: 포인터가 올라간 세그먼트 위에 공통 상태 레이어가 깔립니다 — on-surface(segmentStateLayerColor)를 hover 가중치(segmentStateLayer.hover)로 칸 모양 그대로 덮습니다. 칸의 면 색과 테두리는 바뀌지 않고, 편집 중인 칸(primary-container 면) 위에도 같은 레이어가 얹힙니다. segmentHoverBorderColor 는 더 이상 읽히지 않습니다(since 0.175)
• AM/PM 토글: 12시간 형식에서 AM/PM 전환 — 공용 ToggleGroup 한 개를 세그먼트 옆에 둡니다. 크기는 sm(칸 26 · 트랙 32)이고 세로로 배치해(AM 위, PM 아래) 두 칸이 3 + 26 + 2 + 26 + 3 = 60 — 시 · 분 칸과 같은 높이로 칸 위쪽에 맞춰 놓입니다 (CoreTimePickerContract.defaultAmPmToggleSize · defaultAmPmToggleDirection). 판 폭은 시 · 분 칸과 세로 묶음만큼으로 좁게 유지됩니다. 선택한 칸이 surface-raised 면으로 올라옵니다 (양쪽 동일)
• 저장/취소: 패널 하단의 Button (Save / Cancel)

값 형식#

• 값은 ISO 시간 문자열로 주고받습니다: "14:30" 또는 "14:30:45" (showSeconds 시)
• 12시간 포맷에서도 값은 24시간 ISO로 저장되며, 디스플레이만 hh:mm AM/PM로 포맷팅됩니다

분 간격 (minuteInterval)#

minuteInterval 은 분 세그먼트가 움직이는 단위입니다. 60의 약수여야 하므로 어떤 간격이든 :00 이 그 배수에 들어 있고, 시간이 바뀌어도 배수가 같은 자리에 반복됩니다. 시 · 초 세그먼트는 바뀌지 않습니다.

• 화살표 키: 분 세그먼트에서 ↑ 는 다음 배수로, ↓ 는 이전 배수로 옮깁니다 (키를 누르고 있으면 반복). 15분 간격이면 :00 → :15 → :30 → :45 → :00 입니다. 배수가 아닌 분(:07)에서는 가장 가까운 위쪽·아래쪽 배수(:15 · :00)로 갑니다. 수정 키(Shift · Alt · Ctrl · Meta)와 함께 누르면 브라우저·프레임워크 기본 동작(텍스트 선택·캐럿 이동)에 맡깁니다.
• 직접 입력: 입력하는 동안에는 건드리지 않고, 세그먼트를 벗어날 때와 저장할 때 가장 가까운 배수로 맞춥니다. 중간에 걸린 1 이 15 로 가는 길에 00 으로 되돌려지지 않게 하려는 것입니다. 맞추는 기준은 가장 가까운 배수이고, 정확히 중간인 값은 더 큰 배수로 갑니다(반올림). 15분 간격에서 :07 은 :00, :08 은 :15 이며, 4분 간격에서 정확히 중간인 :02 는 :04 입니다. :59 를 넘는 값은 먼저 :59 로 줄인 뒤 맞춥니다.
• value 로 들어온 분은 배수가 아니어도 그대로 보여 주고, 사용자가 건드리지 않았더라도 저장할 때 같은 규칙으로 맞춥니다. value: '10:07', minuteInterval: 15 에서 저장하면 10:00 이 통보됩니다.
• 시간으로 넘어가지 않습니다: 정각 쪽 끝은 같은 시간의 :00 으로 돌아갑니다. 15분 간격에서 10:53 은 11:00 이 아니라 10:00, ↑ 로 :45 를 넘겨도 10:00 입니다.
• 기본값 1 에서는 모든 분이 그대로 유지되고, 입력한 텍스트도 고쳐 쓰지 않습니다.
• 간격은 단위이지 경계가 아닙니다. min / max 는 여전히 선언일 뿐 저장 경로에서 강제되지 않습니다.

두 플랫폼 모두 같은 규칙을 coui_core 의 CoreMinuteInterval 에서 읽습니다.

경계와 현재 제약#

시·분·초 숫자는 각 세그먼트의 유효 숫자 범위로 제한됩니다. 저장 시 ISO 문자열을 통보하고 패널을 닫으며, value 갱신은 호출자가 담당합니다. 현재 양 플랫폼의 선택/저장 경로는 min/max 필드를 읽지 않으므로 영업시간 같은 제품 경계는 onChanged에서 검증하고 errorText 등으로 안내해야 합니다.

사용 가이드라인 (Usage Guidelines)#

시·분·초 선택 패널에는 TimePicker를 사용합니다. 날짜는 DatePicker, 시간 문자열을 직접 편집하는 입력은 FormattedInput이나 TextField를 선택합니다. 저장 형식과 화면의 AM/PM 표기를 구분하세요.

✅ Do#

TimePicker(
  value: businessHour,
  min: '09:00',
  max: '18:00',
  onChanged: validateAndSaveBusinessHour,
)

❌ Don't#

// ❌ "HH:MM" ISO 형식이 아닌 12시간 문자열
TimePicker(
  value: '02:30 PM',
  onChanged: (v) => save(v),
)

접근성 (Accessibility)#

역할#

키보드#

스크린 리더#

• 트리거의 접근 가능한 이름은 표시 문자열입니다. 선택된 시각(또는 placeholder)이 그대로 필드의 값으로 읽힙니다. TimePicker 에는 label 파라미터가 없으므로 필드 이름이 필요하면 호출부에서 감싸십시오.
• 패널은 Web 에서만 이름이 있습니다. timePickerPopoverLabel(Time picker popover)이 role="dialog" 와 함께 붙습니다. Flutter 에는 대응하는 Semantics 가 없어 패널이 이름 없는 위젯 더미로 읽힙니다.
• 세그먼트 이름도 Web 에만 있습니다. Web 은 Hour / Minute / Second 를 aria-label 로 붙이지만, Flutter 에서는 같은 세 입력이 이름 없이 읽히고 아래의 시각 라벨은 별개의 텍스트로 따로 읽힙니다.
• AM / PM 선택 상태는 ToggleGroup 이 통보합니다. 선택한 칸이 aria-checked / Semantics(checked:) 로 읽힙니다 — 색과 올라온 면만으로 표현되지 않습니다.
• 라이브 리전은 없습니다. 세그먼트를 편집해도 값 변경이 통보되지 않습니다.

포커스 관리#

• 진입 — 팝오버 모드에서는 포커스가 트리거에 그대로 남습니다. 세그먼트에 autofocus 가 없고, Flutter 의 비모달 Popover 는 감싸는 스코프에 포커스된 자식이 없을 때만 스코프 포커스를 요청하므로 트리거를 눌러 연 직후에는 사실상 발화하지 않습니다. mode: CorePromptMode.dialog 에서는 Flutter showDialog 라우트가 자기 포커스 스코프를 가져가고, Web 은 배경이 inert 가 되어 첫 Tab 이 패널 안으로 들어갑니다.
• 이탈 — 팝오버가 닫힐 때 트리거로 포커스를 되돌리지 않습니다(양 플랫폼). 다이얼로그 모드의 Flutter showDialog 는 라우트가 pop 되며 이전 포커스를 복원합니다.
• 트랩 — 팝오버 모드에는 없습니다. Web 패널은 오버레이 레이어로 포탈되므로 트리거에서 Tab 을 눌러도 패널로 바로 가지 않고 문서 순서를 계속 걸어갑니다. 다이얼로그 모드에서만 트랩이 생깁니다 — Web 은 OverlayHost 가 앱 서브트리에 inert 를 걸어 Tab 이 패널 안에서만 돌고, Flutter 는 모달 라우트가 포커스를 가둡니다.

알려진 제약#

• Flutter 쪽에는 시맨틱 배선이 없습니다. time_picker.dart 전체에 Semantics 가 한 건도 없어, Web 이 emit 하는 패널 role="dialog" / aria-label 과 시·분·초 입력의 aria-label 에 대응하는 것이 Flutter 에는 없습니다. Flutter 에서 세 세그먼트는 이름 없는 입력 세 개로 읽히고, 시각 라벨은 시맨틱으로 연결되지 않은 형제 Text 입니다. 대안은 없습니다 — timePickerPopoverLabel / timeHour 문자열은 CoUILocalizations 에 존재하지만 Flutter 위젯이 읽지 않습니다.
• 팝오버가 열려도 포커스가 패널로 이동하지 않고, 닫힐 때 트리거로 되돌아오지도 않습니다. Popover 를 기본값(modal: false)으로 합성하고 세그먼트에 autofocus 를 두지 않기 때문입니다. Flutter 는 비모달 경로에도 FocusScope(autofocus: …) 가 남아 있지만 감싸는 스코프에 이미 포커스된 자식이 있으면 발화하지 않아, 트리거를 눌러 연 뒤에는 사실상 포커스가 움직이지 않습니다. mode: CorePromptMode.dialog 로 두면 Flutter 는 showDialog 라우트가, Web 은 OverlayHost 의 inert 배경이 배경을 포커스 대상에서 제외합니다.
• 시 · 초 값은 화살표 키로 증감할 수 없습니다. 분 세그먼트만 ↑ / ↓ 를 처리하고(minuteInterval 단위), 시 · 초 세그먼트에는 키 핸들러가 없어(Web 은 input 이벤트만, Flutter 는 숫자 전용 TextField) 값 변경은 두 자리 숫자를 직접 입력하는 것으로만 가능합니다. 분 세그먼트의 증감도 스핀버튼 역할(role="spinbutton")이나 값 범위 속성을 노출하지 않으므로, 화살표 키로 바뀐 값은 보조 기술에 별도로 통보되지 않습니다.
• errorText 는 트리거 TextField 가 그립니다. 양 플랫폼 모두 이 값을 필드에 넘기므로 테두리와 포커스 링이 error 색이 되고 메시지가 필드 아래에 나옵니다(비활성이면 그리지 않습니다). 필드의 오류 시맨틱을 그대로 따릅니다.

최소 터치 타겟(WCAG 2.2 AA)은 24×24 논리 픽셀입니다. 트리거는 필드 기본 높이(40px)라 이미 그보다 큽니다.

크로스 플랫폼 차이점 (Platform Differences)#

값 형식은 같은 ISO 문자열이며 초 선택도 지원합니다. min/max를 저장 경로에서 강제하지 않는 현재 제약은 양쪽 모두에 있으므로 플랫폼 차이로 승인된 정책이 아니라 호출자 검증이 필요한 상태입니다.

관련 컴포넌트 (Related Components)#

• DatePicker: 날짜와 시간을 함께 선택해야 하는 경우
• TextField: 시간을 텍스트로 직접 입력받는 경우
• Select: 고정된 시간 슬롯 목록을 드롭다운으로 제공하는 경우