Time picker

import { TimePicker } from '@montage-ui/core';

const Demo = () => {
  return (
    <TimePicker width="40%" />
  )
}

export default Demo;

import { TimePicker, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" alignItems="center" gap="20px" sx={{ width: '100%' }}>
      <TimePicker width="40%" format="a hh:mm:ss" />
      <TimePicker width="40%" format="a h:m:s" />
      <TimePicker width="40%" format="HH:mm:ss" />
      <TimePicker width="40%" format="H:m:s" />
      <TimePicker width="40%" format="mm:ss" />
      <TimePicker width="40%" format="m:s" />
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" alignItems="center" gap="20px" sx={{ width: '100%' }}>
      <TimePicker width="40%" defaultValue={new Date()} locale="ko-KR" timezone="Asia/Seoul" />
      <TimePicker width="40%" defaultValue={new Date()} locale="en-US" timezone="UTC" />
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, FlexBox } from '@montage-ui/core';

const Demo = () => {

  return (
    <FlexBox flexDirection="column" alignItems="center" gap="20px" sx={{ width: '100%' }}>
      <TimePicker
        width="40%"
        format="mm:ss"
        views={['minute', 'second']}
      />
      <TimePicker
        width="40%"
        format="hh a"
        views={['hour', 'meridiem']}
      />
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, FlexBox, PickerActionArea, PickerActionAreaButton, FormControl, FormControlField, FormControlLabel, Checkbox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" alignItems="center" gap="20px" sx={{ width: '100%' }}>
      <TimePicker
        width="40%"
        placeholder="현재, 확인"
        actionArea={
          <PickerActionArea>
            <PickerActionAreaButton variant="now">현재</PickerActionAreaButton>
            <PickerActionAreaButton variant="accept">확인</PickerActionAreaButton>
          </PickerActionArea>
        }
      />

      <TimePicker
        width="40%"
        placeholder="취소, 초기화"
        actionArea={
          <PickerActionArea>
            <PickerActionAreaButton variant="cancel">취소</PickerActionAreaButton>
            <PickerActionAreaButton variant="reset">초기화</PickerActionAreaButton>
          </PickerActionArea>
        }
      />


      <TimePicker
        width="40%"
        placeholder="checkbox, 확인"
        disableLastUnitClickClose
        actionArea={
          <PickerActionArea>
            <FormControl
              gap="8px"
              flexDirection="row"
            >
              <FormControlField>
                <Checkbox size="medium" />
              </FormControlField>
              <FormControlLabel>텍스트</FormControlLabel>
            </FormControl>
            <PickerActionAreaButton variant="accept">확인</PickerActionAreaButton>
          </PickerActionArea>
        }
      />
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, FlexBox, FormControlNegativeMessage, FormControl, FormControlLabel, FormControlField } from '@montage-ui/core';
import { Controller, useForm } from 'react-hook-form';

const minTime = new Date(new Date().setHours(10, 0, 0));
const maxTime = new Date(new Date().setHours(17, 30, 0));

const Demo = () => {
  const form = useForm({
    defaultValues: {
      time: new Date(),
    },
    mode: 'onChange'
  });

  return (
    <FlexBox as="form" justifyContent="center" gap="20px" sx={{ width: '100%' }}>
      <Controller
        control={form.control}
        name="time"
        rules={{
          validate: (value) => {
            if (isNaN(new Date(value).getTime())) {
              return '유효한 날짜를 입력해주세요.';
            }

            if (new Date(value).getTime() < minTime.getTime()) {
              return '최소 시간은 10시 이상이어야 합니다.';
            }

            if (new Date(value).getTime() > maxTime.getTime()) {
              return '최대 시간은 17시 30분 이하이어야 합니다.';
            }
            
          return true;
          },
        }}
        render={({ field, formState }) => (
          <FormControl sx={{ width: '40%' }}>
            <FormControlLabel>시간</FormControlLabel>

            <FormControlField>
              <TimePicker
                width="100%"
                format="HH시 mm분"
                minTime={minTime}
                maxTime={maxTime}
                inputRef={field.ref}
                value={field.value}
                onChange={field.onChange}
                status={!!formState.errors.time ? 'negative' : 'normal'}
              />
            </FormControlField>

            <FormControlNegativeMessage>{formState.errors.time?.message}</FormControlNegativeMessage>
          </FormControl>
        )}
      />
    </FlexBox>
  )
}

export default Demo;

import { FlexBox, FormControl, FormControlField, FormControlLabel, FormControlMessage, FormControlNegativeMessage, TimePicker } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox justifyContent="center" sx={{ width: '100%' }}>
      <FormControl sx={{ width: '40%' }}>
        <FormControlLabel required>Label</FormControlLabel>
        <FormControlField>
          <TimePicker width="100%" />
        </FormControlField>
        <FormControlMessage>Helper Message</FormControlMessage>
      </FormControl>
    </FlexBox>
  )
}

export default Demo;

import { FlexBox, FormControl, FormControlField, FormControlLabel, FormControlMessage, FormControlNegativeMessage, TimePicker, TimePickerField } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox alignItems="center" flexDirection="column" gap="12px" sx={{ width: '100%' }}>
      <FormControl sx={{ width: '40%' }} size="large">
        <FormControlLabel required>Large</FormControlLabel>
        <FormControlField>
          <TimePicker
            placeholder="Large time picker field"
          />
        </FormControlField>
        <FormControlMessage>Helper Message</FormControlMessage>
      </FormControl>

      <FormControl sx={{ width: '40%' }} size="medium">
        <FormControlLabel required>Medium</FormControlLabel>
        <FormControlField>
          <TimePicker
            placeholder="Medium time picker field"
          />
        </FormControlField>
        <FormControlMessage>Helper Message</FormControlMessage>
      </FormControl>
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, TimePickerFieldProps, Chip, FlexBox } from '@montage-ui/core';
import { forwardRef, useState } from 'react';

const CustomChipField = forwardRef<HTMLDivElement, TimePickerFieldProps>(
  ({ value, onClick, inputRef, ...props }, ref) => {
    return (
      <Chip ref={ref} onClick={onClick}>
        {value || 'YYYY.MM.DD'}
      </Chip>
    )
  }
)

const CustomFieldField = forwardRef<HTMLDivElement, TimePickerFieldProps>(
  ({ trailingContent, inputRef, ...props }, ref) => {
    return (
      <FlexBox ref={ref} gap="10px" alignItems="center">
        <input ref={inputRef} {...props} />
        {trailingContent}
      </FlexBox>
    )
  }
)

const Demo = () => {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);

  return (
    <FlexBox flexDirection="column" gap="12px" alignItems="center" sx={{ width: '100%' }}>
      <TimePicker
        width="40%"
        input={CustomChipField}
        open={open1}
        onOpenChange={setOpen1}
        onClick={() => setOpen1(true)}
      />
      <TimePicker
        width="40%"
        input={CustomFieldField}
        open={open2}
        onOpenChange={setOpen2}
      />
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, FlexBox } from '@montage-ui/core';
import { useState } from 'react';

const Demo = () => {
  const [value, setValue] = useState(new Date());

  return (
    <FlexBox alignItems="center" flexDirection="column" gap="12px" alignItems="center" sx={{ width: '100%' }}>
      <TimePicker defaultValue={new Date()} width="40%" />
      <TimePicker value={value} onChange={setValue} width="40%" />
    </FlexBox>
  )
}

export default Demo;