KvcDateTimePicker

日時選択コンポーネントです。日付と時刻を同時に選択できます。

ライブデモ

基本的な使い方

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

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

const datetime = ref('2024-01-01T09:00')
</script>

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	`''`	日時値 (YYYY-MM-DDTHH:mm形式)
placeholder	`string`	`'日時を選択'`	プレースホルダーテキスト
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態

イベント

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

使用例

基本的な使用

<template>
  <kvc-field label="イベント開始日時">
    <kvc-date-time-picker
      v-model="eventStartDateTime"
      placeholder="開始日時を選択してください"
    />
  </kvc-field>
  <p>選択された日時: {{ eventStartDateTime }}</p>
</template>

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

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

予約システムの例

<template>
  <kvc-wrap>
    <kvc-field label="予約開始日時">
      <kvc-date-time-picker v-model="reservationStart" />
    </kvc-field>

    <kvc-field label="予約終了日時">
      <kvc-date-time-picker v-model="reservationEnd" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const reservationStart = ref('')
const reservationEnd = ref('')
</script>

現在日時を初期値に設定

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

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

const createdDateTime = ref(dayjs().format('YYYY-MM-DDTHH:mm'))
</script>

ミーティングスケジュール

<template>
  <kvc-wrap>
    <kvc-field label="ミーティング開始">
      <kvc-date-time-picker v-model="meetingStart" />
    </kvc-field>

    <kvc-field label="ミーティング終了">
      <kvc-date-time-picker v-model="meetingEnd" />
    </kvc-field>

    <kvc-button @click="scheduleMeeting">
      スケジュールを登録
    </kvc-button>
  </kvc-wrap>
</template>

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

const meetingStart = ref('')
const meetingEnd = ref('')

const scheduleMeeting = () => {
  console.log('Meeting scheduled:', {
    start: meetingStart.value,
    end: meetingEnd.value
  })
}
</script>

読み取り専用

<template>
  <kvc-field label="最終更新日時">
    <kvc-date-time-picker
      v-model="lastUpdated"
      :read-only="true"
    />
  </kvc-field>
</template>

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

const lastUpdated = ref('2024-01-15T14:30')
</script>

日時フォーマット

日時は YYYY-MM-DDTHH:mm 形式で保存・取得されます。

// 例: 2024-01-15T14:30
const datetime = ref('2024-01-15T14:30')

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

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

const datetime = ref('2024-01-15T14:30')

const formattedDateTime = computed(() => {
  return dayjs(datetime.value).format('YYYY年MM月DD日 HH:mm')
})
</script>

<template>
  <kvc-field label="日時">
    <kvc-date-time-picker v-model="datetime" />
  </kvc-field>
  <p>表示: {{ formattedDateTime }}</p>
</template>

TypeScript サポート

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

const props: KvcDateTimePickerProps = {
  modelValue: '2024-01-01T09:00',
  placeholder: '日時を選択',
  readOnly: false,
  disabled: false
}