DatePicker 日期选择框

输入或选择日期的控件。

基础用法

通过设置 picker 属性，指定选择框类型。可选值：date、month、year，默认值为date。

<template>
    <div class="kl-date-picker">
        <kl-date-picker></kl-date-picker>
        <kl-date-picker picker="month"></kl-date-picker>
        <kl-date-picker picker="year"></kl-date-picker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

日期时间选择

添加 isDateTime 属性，增加选择时间功能。默认值为false。

<template>
    <div class="kl-date-picker">
        <kl-date-picker isDateTime></kl-date-picker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

范围选择器

添加 isRangePicker 属性，选择一段时间。默认值为false。

<template>
    <div class="kl-date-picker">
        <kl-date-picker isRangePicker></kl-date-picker>
        <kl-date-picker isRangePicker picker="month"></kl-date-picker>
        <kl-date-picker isRangePicker picker="year"></kl-date-picker>
        <kl-date-picker isDateTime isRangePicker></kl-date-picker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

日期格式

使用format属性，可以自定义日期显示格式。

<template>
    <div class="kl-date-picker">
        <kl-date-picker format="YYYY/MM/DD"></kl-date-picker>
        <kl-date-picker format="MM/DD/YYYY"></kl-date-picker>
        <kl-date-picker picker="month" format="YYYY/MM"></kl-date-picker>
        <kl-date-picker picker="month" format="YYYY.M"></kl-date-picker>
        <kl-date-picker isDateTime format="YYYY/MM/DD HH:mm:ss"></kl-date-picker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

输入框提示文字

通过placeholder、placeholderRange属性，自定义输入框提示文字。

<template>
    <div class="kl-date-picker">
        <kl-date-picker placeholder="Hello World"></kl-date-picker>
        <kl-date-picker
            isRangePicker
            :placeholderRange="['Hello World', '你好，世界']"
        ></kl-date-picker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

不可选择的日期和时间

可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 isDateTime 一起使用。

<template>
    <div class="kl-date-picker">
        <kl-date-picker :disabledDate="disabledDate"></kl-date-picker>
        <kl-date-picker isDateTime :disabledTime="disabledTime"></kl-date-picker>
    </div>
</template>

<script setup lang="ts">
const disabledDate = [
    [2023, 2, 26],
    [2023, 2, 27],
    [2023, 2, 28]
]

const disabledTime = [
    [2, 3],
    [5, 6],
    [8, 9]
]
</script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

节假日视图

添加showHolidays属性，开启节假日视图，默认值为false。

<template>
    <div class="kl-date-picker">
        <kl-date-picker showHolidays></kl-date-picker>
        <kl-date-picker isDateTime showHolidays></kl-date-picker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

国际化

设置lang属性为en，一键切换为英文。默认值为ch。

<template>
    <div class="kl-date-picker">
        <KlDatePicker lang="en"></KlDatePicker>
        <KlDatePicker picker="month" lang="en"></KlDatePicker>
        <KlDatePicker picker="year" lang="en"></KlDatePicker>
        <KlDatePicker isDateTime lang="en"></KlDatePicker>
        <KlDatePicker isRangePicker lang="en"></KlDatePicker>
        <KlDatePicker picker="month" isRangePicker lang="en"></KlDatePicker>
        <KlDatePicker picker="year" isRangePicker lang="en"></KlDatePicker>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-date-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
        margin-bottom: 20px;
    }
}
</style>

API

属性

名称	描述	类型	默认值	必填
placeholder	输入框占位文本	string		否
placeholderRange	范围选择输入框占位文本	string[]		否
picker	选择器类型	year/month/date	date	否
format	展示的日期格式，配置参考 dayjs	string	YYYY-MM-DD	否
isDateTime	支持时间选择	boolean	false	否
isRangePicker	选择一段时间	boolean	false	否
disabledDate	设置不可选日期	Array<number[]>		否
disabledTime	设置不可选时间	Array<number[]>		否
showHolidays	农历，节假日显示	boolean	false	否
lang	语言设置	zh / en	zh	否

事件

事件名	说明	回调参数
change	input 框值改变时触发，用于获取输入值	(value: string / string[])

FAQ

关于日期选择框组件数据获取

日期选择框组件是一个非受控组件，即其状态由组件内部维护，可以通过ref获取组件的模板引用，通过.value获取组件日期数据。例：

vue

<template>
    <div>
        <kl-date-picker ref="datePickerRef"></kl-date-picker>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { KlDatePicker } from 'kunlun-design'
const datePickerRef = ref<InstanceType<typeof KlDatePicker> | null>(null)
// 打印日期数据
console.log(datePickerRef.value?.value)
</script>

在后续，我们会根据用户体验来评判这种设计是否合理。对于不合理的设计，我们将会在后续版本迭代中进行相应的重构。

DatePicker 日期选择框 #

基础用法 #

日期时间选择 #

范围选择器 #

日期格式 #

输入框提示文字 #

不可选择的日期和时间 #

节假日视图 #

国际化 #

API #

属性 #

事件 #

FAQ #

关于日期选择框组件数据获取 #