KvcDatePicker

日付選択コンポーネントです。カレンダーから日付を選択できます。

ライブデモ

基本的な使い方

<template>
  <kvc-date-picker v-model="date" />
</template>

<script setup>
import { ref } from 'vue'

const date = ref('2024-01-01')
</script>

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	`''`	日付値 (YYYY-MM-DD形式)
placeholder	`string`	`'日付を選択'`	プレースホルダーテキスト
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態
min	`string`	-	選択可能な最小日付
max	`string`	-	選択可能な最大日付

イベント

イベント名	ペイロード	説明
update:modelValue	`string`	日付が変更されたときに発火

使用例

基本的な使用

<template>
  <kvc-field label="生年月日">
    <kvc-date-picker
      v-model="birthDate"
      placeholder="生年月日を選択してください"
    />
  </kvc-field>
  <p>選択された日付: {{ birthDate }}</p>
</template>

<script setup>
import { ref } from 'vue'

const birthDate = ref('')
</script>

日付範囲の制限

<template>
  <kvc-field label="予約日">
    <kvc-date-picker
      v-model="reservationDate"
      :min="minDate"
      :max="maxDate"
      placeholder="予約日を選択"
    />
  </kvc-field>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const minDate = computed(() => dayjs().format('YYYY-MM-DD'))
const maxDate = computed(() => dayjs().add(30, 'day').format('YYYY-MM-DD'))

const reservationDate = ref('')
</script>

今日の日付を初期値に設定

<template>
  <kvc-field label="作成日">
    <kvc-date-picker v-model="createdDate" />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

const createdDate = ref(dayjs().format('YYYY-MM-DD'))
</script>

開始日と終了日

<template>
  <kvc-wrap>
    <kvc-field label="開始日">
      <kvc-date-picker
        v-model="startDate"
        :max="endDate"
      />
    </kvc-field>

    <kvc-field label="終了日">
      <kvc-date-picker
        v-model="endDate"
        :min="startDate"
      />
    </kvc-field>
  </kvc-wrap>
</template>

<script setup>
import { ref } from 'vue'

const startDate = ref('')
const endDate = ref('')
</script>

読み取り専用

<template>
  <kvc-field label="登録日">
    <kvc-date-picker
      v-model="registeredDate"
      :read-only="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const registeredDate = ref('2024-01-15')
</script>

日付フォーマット

日付は YYYY-MM-DD 形式で保存・取得されます。

// 例: 2024-01-15
const date = ref('2024-01-15')

表示形式を変更したい場合は、dayjsなどのライブラリを使用して変換してください。

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const date = ref('2024-01-15')

const formattedDate = computed(() => {
  return dayjs(date.value).format('YYYY年MM月DD日')
})
</script>

<template>
  <kvc-field label="日付">
    <kvc-date-picker v-model="date" />
  </kvc-field>
  <p>表示: {{ formattedDate }}</p>
</template>

TypeScript サポート

import type { KvcDatePickerProps } from '@zygapp/kintone-vue3-component'

const props: KvcDatePickerProps = {
  modelValue: '2024-01-01',
  placeholder: '日付を選択',
  min: '2024-01-01',
  max: '2024-12-31',
  readOnly: false,
  disabled: false
}