KvcTimePicker

時刻選択コンポーネントです。時刻を入力・選択できます。

ライブデモ

基本的な使い方

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

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

const time = ref('09:00')
</script>

プロパティ

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

イベント

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

使用例

基本的な使用

<template>
  <kvc-field label="開始時刻">
    <kvc-time-picker
      v-model="startTime"
      placeholder="開始時刻を選択してください"
    />
  </kvc-field>
  <p>選択された時刻: {{ startTime }}</p>
</template>

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

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

業務時間の設定

<template>
  <kvc-wrap>
    <kvc-field label="始業時刻">
      <kvc-time-picker v-model="workStartTime" />
    </kvc-field>

    <kvc-field label="終業時刻">
      <kvc-time-picker v-model="workEndTime" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const workStartTime = ref('09:00')
const workEndTime = ref('18:00')
</script>

初期値を現在時刻に設定

<template>
  <kvc-field label="現在時刻">
    <kvc-time-picker v-model="currentTime" />
  </kvc-field>
</template>

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

const currentTime = ref(dayjs().format('HH:mm'))
</script>

読み取り専用

<template>
  <kvc-field label="登録時刻">
    <kvc-time-picker
      v-model="registeredTime"
      :read-only="true"
    />
  </kvc-field>
</template>

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

const registeredTime = ref('14:30')
</script>

時刻フォーマット

時刻は HH:mm 形式（24時間制）で保存・取得されます。

// 例: 14:30
const time = ref('14:30')

TypeScript サポート

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

const props: KvcTimePickerProps = {
  modelValue: '09:00',
  placeholder: '時刻を選択',
  readOnly: false,
  disabled: false
}