Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

MonthPicker

MonthPickerは、ユーザーが月を選択するために使用されるコンポーネントです。

ソース@yamada-ui/calendar

インポート

import { MonthPicker } from "@yamada-ui/calendar"
Copied!

使い方

編集可能な例

<MonthPicker placeholder="basic" />
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <MonthPicker variant="outline" placeholder="outline" />
  <MonthPicker variant="filled" placeholder="filled" />
  <MonthPicker variant="flushed" placeholder="flushed" />
  <MonthPicker variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

カレンダーのバリアントを変更する場合は、variantを設定します。

編集可能な例

<VStack>
  <MonthPicker placeholder="solid" calendarVariant="solid" />
  <MonthPicker placeholder="subtle" calendarVariant="subtle" />
</VStack>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <MonthPicker placeholder="extra small size" size="xs" />
  <MonthPicker placeholder="small size" size="sm" />
  <MonthPicker placeholder="medium size" size="md" />
  <MonthPicker placeholder="large size" size="lg" />
</VStack>
Copied!

カレンダーのサイズを変更する場合は、calendarSizeを設定します。

編集可能な例

<VStack>
  <MonthPicker placeholder="small size" calendarSize="sm" />
  <MonthPicker placeholder="medium size" calendarSize="md" />
  <MonthPicker placeholder="large size" calendarSize="lg" />
</VStack>
Copied!

カラースキーマを変更する

編集可能な例

<VStack>
  <MonthPicker
    calendarVariant="solid"
    calendarColorScheme="secondary"
    today
    defaultValue={new Date()}
  />
  <MonthPicker
    calendarVariant="subtle"
    calendarColorScheme="green"
    today
    defaultValue={new Date()}
  />
</VStack>
Copied!

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueにDateを設定します。

編集可能な例

<MonthPicker defaultValue={new Date()} placeholder="YYYY/MM" />
Copied!

デフォルトのタイプを変更する

デフォルトのタイプを変更する場合は、defaultTypeにmonthまたはyearを設定します。デフォルトでは、monthが設定されています。

編集可能な例

<VStack>
  <MonthPicker placeholder="month" defaultType="month" />
  <MonthPicker placeholder="year" defaultType="year" />
</VStack>
Copied!

デフォルトの月を設定する

デフォルトの月を設定する場合は、defaultMonthにDateを設定します。

編集可能な例

<MonthPicker placeholder="YYYY/MM" defaultMonth={new Date("1993-08")} />
Copied!

パターンを設定する

パターンを設定する場合は、patternに正規表現を設定します。デフォルトでは、'/[^0-9\-\/]/g'が設定されています。

編集可能な例

<MonthPicker
  placeholder="MMM YYYY"
  inputFormat="MMM YYYY"
  pattern={/[^\w, ]/g}
  defaultValue={new Date()}
/>
Copied!

日付の解析

日付の解析方法をカスタマイズすることができます。

編集可能な例

<MonthPicker
  placeholder="YYYY/MM"
  inputFormat="YYYY/MM"
  parseDate={(value) => new Date(value)}
/>
Copied!

最小と最大の月を設定する

選択可能な最小と最大の月を設定する場合は、minDateとmaxDateにDateを設定します。

編集可能な例

<MonthPicker
  placeholder="YYYY/MM"
  defaultValue={new Date(1997, 0)}
  minDate={new Date(1993, 8)}
  maxDate={new Date(2000, 10)}
/>
Copied!

ロケールを設定する

ロケールを設定する場合は、データをインポートして、localeに対象のロケールを設定します。

import "dayjs/locale/ja"
Copied!

編集可能な例

<MonthPicker locale="ja" placeholder="YYYY/MM" />
Copied!

年月のフォーマットを変更する

年月のフォーマットを変更する場合は、inputFormatやyearFormatに文字列を設定します。

編集可能な例

<VStack>
  <MonthPicker placeholder="YYYY-MM" inputFormat="YYYY-MM" />
  <MonthPicker
    placeholder="YYYY/MM"
    locale="ja"
    defaultType="month"
    yearFormat="YYYY年"
  />
</VStack>
Copied!

選択時にカレンダーを閉じない

デフォルトでは、選択時に自動的にカレンダーを閉じます。選択時にカレンダーを閉じないようにする場合は、closeOnSelectをfalseに設定します。

編集可能な例

<MonthPicker placeholder="YYYY/MM" closeOnSelect={false} />
Copied!

ブラー時にカレンダーを閉じない

デフォルトでは、ブラー時に自動的にカレンダーを閉じます。ブラー時にカレンダーを閉じないようにする場合は、closeOnBlurをfalseに設定します。

編集可能な例

<MonthPicker placeholder="YYYY/MM" closeOnBlur={false} />
Copied!

クリアを無効化する

クリアを無効化する場合は、isClearableをfalseに設定します。

編集可能な例

<MonthPicker placeholder="YYYY/MM" isClearable={false} />
Copied!

入力を許可しない

入力を許可しない場合は、allowInputをfalseに設定します。

編集可能な例

<MonthPicker placeholder="YYYY/MM" allowInput={false} />
Copied!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

<MonthPicker placeholder="YYYY/MM" placement="bottom-end" />
Copied!

オフセットを変更する

要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<VStack>
  <MonthPicker placeholder="YYYY/MM" gutter={32} />
  <MonthPicker placeholder="YYYY/MM" offset={[16, 16]} />
</VStack>
Copied!

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<VStack>
  <MonthPicker focusBorderColor="green.500" placeholder="custom border color" />
  <MonthPicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<VStack>
  <MonthPicker isDisabled variant="outline" placeholder="outline" />
  <MonthPicker isDisabled variant="filled" placeholder="filled" />
  <MonthPicker isDisabled variant="flushed" placeholder="flushed" />
</VStack>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<VStack>
  <MonthPicker isReadOnly variant="outline" placeholder="outline" />
  <MonthPicker isReadOnly variant="filled" placeholder="filled" />
  <MonthPicker isReadOnly variant="flushed" placeholder="flushed" />
</VStack>
Copied!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

<VStack>
  <MonthPicker isInvalid variant="outline" placeholder="outline" />
  <MonthPicker isInvalid variant="filled" placeholder="filled" />
  <MonthPicker isInvalid variant="flushed" placeholder="flushed" />
</VStack>
Copied!

アイコンをカスタマイズする

アイコンをカスタマイズする場合は、iconPropsにpropsを設定します。

編集可能な例

<VStack>
  <MonthPicker placeholder="YYYY/MM" iconProps={{ color: "primary" }} />
  <MonthPicker placeholder="YYYY/MM" iconProps={{ children: <Ghost /> }} />
</VStack>
Copied!

ドロップダウンに要素を追加する

ドロップダウンに要素を追加する場合は、childrenに要素を設定します。
childrenには、valueとonCloseのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。

編集可能な例

<VStack>
  <MonthPicker placeholder="MMM YYYY">
    <VStack mt="sm">
      <Button>Submit</Button>
    </VStack>
  </MonthPicker>

  <MonthPicker placeholder="MMM YYYY" closeOnSelect={false}>
    {({ value, onClose }) => (
      <VStack mt="sm">
        <Button isDisabled={!value} onClick={onClose}>
          Submit
          {value
            ? ` ${
                value.getFullYear() +
                "/" +
                String(value.getMonth() + 1).padStart(2, "0")
              }`
            : ""}
        </Button>
      </VStack>
    )}
  </MonthPicker>
</VStack>
Copied!

制御する

編集可能な例

const [value, onChange] = useState<Date | null>(new Date())

return <MonthPicker placeholder="YYYY/MM" value={value} onChange={onChange} />
Copied!

編集可能な例

const [type, onChangeType] = useState<MonthPickerProps["type"]>("month")

return (
  <MonthPicker placeholder="YYYY/MM" type={type} onChangeType={onChangeType} />
)
Copied!

編集可能な例

const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18"))

return (
  <MonthPicker
    placeholder="YYYY/MM"
    month={month}
    onChangeMonth={onChangeMonth}
  />
)
Copied!

React Hook Formを使う

編集可能な例

type Data = { monthPicker: Date | null }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.monthPicker}
      label="Birthday"
      errorMessage={errors.monthPicker ? errors.monthPicker.message : undefined}
    >
      <Controller
        name="monthPicker"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => <MonthPicker placeholder="YYYY/MM" {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

GitHubでこのページを編集する

前TimePicker次YearPicker