Time picker

import { TimePicker } from '@wanteddev/wds';

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

export default Demo;

import { TimePicker, FlexBox } from '@wanteddev/wds';

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 '@wanteddev/wds';

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 '@wanteddev/wds';

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, FormField, FormControl, FormLabel, Checkbox } from '@wanteddev/wds';

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>
            <FormField
              gap="8px"
              flexDirection="row"
            >
              <FormControl>
                <Checkbox size="medium" />
              </FormControl>
              <FormLabel
                sx={{ padding: "1px 0px" }}
              >
                텍스트
              </FormLabel>
            </FormField>
            <PickerActionAreaButton variant="accept">확인</PickerActionAreaButton>
          </PickerActionArea>
        }
      />
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, FlexBox, FormErrorMessage, FormField, FormLabel, FormControl } from '@wanteddev/wds';
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 }) => (
          <FormField sx={{ width: '40%' }}>
            <FormLabel>시간</FormLabel>

            <FormControl>
              <TimePicker
                width="100%"
                format="HH시 mm분"
                minTime={minTime}
                maxTime={maxTime}
                inputRef={field.ref}
                value={field.value}
                onChange={field.onChange}
                invalid={!!formState.errors.time}
              />
            </FormControl>

            <FormErrorMessage>{formState.errors.time?.message}</FormErrorMessage>
          </FormField>
        )}
      />
    </FlexBox>
  )
}

export default Demo;

import { FlexBox, FormField, FormControl, FormLabel, FormMessage, FormErrorMessage, TimePicker } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox justifyContent="center" sx={{ width: '100%' }}>
      <FormField sx={{ width: '40%' }}>
        <FormLabel required sx={{ padding: '1px 0px' }}>Label</FormLabel>
        <FormControl>
          <TimePicker width="100%" />
        </FormControl>
        <FormMessage>Helper Message</FormMessage>
      </FormField>
    </FlexBox>
  )
}

export default Demo;

import { TimePicker, TimePickerFieldProps, Chip, FlexBox } from '@wanteddev/wds';
import { forwardRef, useState } from 'react';

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

const CustomFieldField = forwardRef<HTMLDivElement, TimePickerFieldProps>(
  ({ trailingContent, inputRef, invalid, ...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 '@wanteddev/wds';
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;