Date picker

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

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

export default Demo;

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

const Demo = () => {
  return (
    <FlexBox flexDirection="column" alignItems="center" gap="20px" sx={{ width: '100%' }}>
      <DatePicker format="MMMM.DD" width="40%" />

      <DatePicker format="MM/YYYY" width="40%" />
      
      <DatePicker format="YYYY-MM-DD" width="40%" />
    </FlexBox>
  )
}

export default Demo;

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

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

export default Demo;

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

const Demo = () => {

  return (
    <FlexBox flexDirection="column" gap="20px">
      <DatePicker
        width="300px"
        format="YYYY.MM"
        views={['year', 'month']}
      />
      <DatePicker
        width="300px"
        format="YYYY"
        views={['year']}
      />
      <DatePicker
        width="300px"
        format="YYYY MM DD"
        defaultView="year"
        views={['year', 'day']}
      />
    </FlexBox>
  )
}

export default Demo;

import { DatePicker, FlexBox, PickerActionArea, PickerActionAreaButton, FormField, FormControl, FormLabel, Checkbox } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="20px">
      <DatePicker
        width="300px"
        placeholder="현재, 확인"
        actionArea={
          <PickerActionArea>
            <PickerActionAreaButton variant="now">현재</PickerActionAreaButton>
            <PickerActionAreaButton variant="accept">확인</PickerActionAreaButton>
          </PickerActionArea>
        }
      />

      <DatePicker
        width="300px"
        placeholder="취소, 초기화"
        actionArea={
          <PickerActionArea>
            <PickerActionAreaButton variant="cancel">취소</PickerActionAreaButton>
            <PickerActionAreaButton variant="reset">초기화</PickerActionAreaButton>
          </PickerActionArea>
        }
      />


      <DatePicker
        width="300px"
        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 { DatePicker, FlexBox, FormErrorMessage, FormField, FormLabel, FormControl } from '@wanteddev/wds';
import { Controller, useForm } from 'react-hook-form';

const minDate = new Date('2000-01-01');
const maxDate = new Date('2025-12-31');

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

  return (
    <FlexBox as="form">
      <Controller
        control={form.control}
        name="date"
        rules={{
          validate: (value) => {
            if (isNaN(new Date(value).getTime())) {
              return '유효한 날짜를 입력해주세요.';
            }

            if (new Date(value).getTime() < minDate.getTime()) {
              return '최소 날짜는 2000년 1월 1일 이상이어야 합니다.';
            }

            if (new Date(value).getTime() > maxDate.getTime()) {
              return '최대 날짜는 2025년 12월 31일 이하이어야 합니다.';
            }
            
          return true;
          },
        }}
        render={({ field, formState }) => (
          <FormField>
            <FormLabel>날짜</FormLabel>

            <FormControl>
              <DatePicker
                min={minDate}
                max={maxDate}
                format="YYYY.MM.DD"
                width="300px"
                inputRef={field.ref}
                value={field.value}
                onChange={field.onChange}
                invalid={!!formState.errors.date}
              />
            </FormControl>

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

export default Demo;

import { FlexBox, FormField, FormControl, FormLabel, FormMessage, FormErrorMessage, DatePicker } 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>
          <DatePicker width="100%" />
        </FormControl>
        <FormMessage>Helper Message</FormMessage>
      </FormField>
    </FlexBox>
  )
}

export default Demo;

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

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

const CustomFieldField = forwardRef<HTMLDivElement, DatePickerFieldProps>(
  ({ 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%' }}>
      <DatePicker
        width="40%"
        input={CustomChipField}
        open={open1}
        onOpenChange={setOpen1}
        onClick={() => setOpen1(true)}
      />
      <DatePicker
        width="40%"
        input={CustomFieldField}
        open={open2}
        onOpenChange={setOpen2}
      />
    </FlexBox>
  )
}

export default Demo;

import { DatePicker, 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%' }}>
      <DatePicker defaultValue={new Date()} width="40%" />
      <DatePicker value={value} onChange={setValue} width="40%" />
    </FlexBox>
  )
}

export default Demo;