TimePicker

Basic usage

Copy code

View source

<template>
	<dd-time-picker v-model:value="time" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const time = ref();
</script>

Hide source

Disabled

Set the value of disabled in dd-time-picker to true to disable this option.

Copy code

View source

<template>
	<dd-time-picker disabled />
</template>

Hide source

Size

Copy code

View source

<template>
	<dd-time-picker v-model:value="time" size="large" />
	<dd-time-picker v-model:value="time" />
	<dd-time-picker v-model:value="time" size="small" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const time = ref();
</script>

<style>
.dd-time-picker + .dd-time-picker {
	margin-left: 20px;
}
</style>

Hide source

Interval Option

Show stepped options by hourStep minuteStep secondStep

Copy code

View source

<template>
	<dd-time-picker v-model:value="time" :hourStep="1" :minuteStep="15" :secondStep="10" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const time = ref();
</script>

Hide source

Addon

renderExtraFooter Slot

Copy code

View source

<template>
	<dd-time-picker v-model:value="time">
		<template #renderExtraFooter>
			<dd-button>OK</dd-button>
		</template>
	</dd-time-picker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const time = ref();
</script>

Hide source

Time Range Picker

Copy code

View source

<template>
	<dd-time-range-picker v-model:value="time" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const time = ref();
</script>

Hide source

Bordered-less

Bordered-less style component.

Copy code

View source

<template>
	<div>
		<dd-time-picker v-model:value="time" :bordered="false" />
	</div>
	<div style="margin-top: 20px">
		<dd-time-range-picker v-model:value="time2" :bordered="false" />
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const time = ref();
const time2 = ref();
</script>

Hide source

TimePicker API

TimePicker Attributes

Name	Description	Type	Default	Version
value(v-model)	binding value	dayjs	—
open(v-model)	Whether to popup panel	boolean	false
placeholder	placeholder	string | [string, string]	Select a time
disabled	disabled	boolean	false
disabledTime	disabledTime	DisabledTime	—
hideDisabledOptions	Whether hide the options that can not be selected	boolean	false
size	size	large | default | small	—
readonly	readonly	boolean	false
clearable	can be cleared	boolean	false
bordered	Bordered-less	boolean	false
showNow	Whether to show Now button on panel	boolean	true
format	To set the time format	string	HH:mm:ss
valueFormat	format of binding value	string date formats	HH:mm:ss
hourStep	Interval between hours in picker	number	1
minuteStep	Interval between minutes in picker	number	1
secondStep	Interval between seconds in picker	number	1

DisabledTime

type DisabledTime = (now: Dayjs) => {
	disabledHours?: () => number[];
	disabledMinutes?: (selectedHour: number) => number[];
	disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

TimePicker Events

Name	Description	Type
change	a callback function, can be executed when the selected time is changing	(time: dayjs | string) => void
openChange	a callback function which will be called while panel opening/closing	(open: boolean) => void

TimePicker Slots

Name	Description
renderExtraFooter	Called from time picker panel to render some addon to its bottom
suffixIcon	The custom suffix icon

TimeRangePicker API

TimeRangePicker Attributes

Same props from TimePicker. And includes additional props:

Name	Description	Type	Default	Version
order	Order start and end time	boolean	true

Contributors

lazy

ChangeLog

f41a0 - fix: 修复时间选择器点击无反应 on 12/9/2024

56bb7 - fix: 修复TimeRangePicker样式问题 on 1/19/2024

33fd8 - style: 调整样式 on 1/2/2024

3ddb6 - fix: 修复无日期时时间无效 on 1/2/2024

9eadc - feat: readonly attribute on 12/29/2023

b3bb3 - style: 修改滚动条样式 on 12/27/2023

e1b61 - style: time抽离样式 on 12/26/2023

01f58 - fix: 修正disabledTime on 12/26/2023

23659 - feat: time-picker on 12/21/2023