DatePicker

Control to enter or select a date.

Basic usage

Specify the selection box type by setting the picker property. Optional values: date, month, year, default is 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>

Date and time selection

Add isDateTime property to add time selection function. The default value is 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>

Range selector

Add the isRangePicker property and select a period of time. The default value is 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>

Date format

Using the format attribute, you can customize the date display 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>

Input box prompt text

Through placeholder, placeholderRange attribute, the custom input message text.

<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>

An optional date and time

The value of disabledDate and disabledTime disables partial date and time selection, respectively. The value of disabledTime and isDateTime are used together.

<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>

Holiday view

Add the showHolidays property to open the holiday view, default is 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>

Internationalization

Set lang property to en and switch to English with one click. The default value is 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

Attribute

name	description	type	default value	required
placeholder	Input box placeholder text	string		no
placeholderRange	Range selection input box placeholder text	string[]		no
picker	Selector type	year/month/date	date	no
format	Display date format, configuration reference dayjs	string	YYYY-MM-DD	no
isDateTime	Support time selection	boolean	false	no
isRangePicker	Choose a period of time	boolean	false	no
disabledDate	Set an optional date	Array<number[]>		no
disabledTime	Set an optional time	Array<number[]>		no
showHolidays	Lunar calendar, holidays show	boolean	false	no
lang	Language setting	zh / en	zh	no

Event

name	description	callback parameter
change	Triggered when the input box value changes. It is used to obtain the input value	(value: string / string[])

FAQ

About the date selection box component data acquisition

The date selector box component is an uncontrolled component, that is, its state is maintained internally by the component. The template reference of the component can be obtained by ref and the date data of the component can be obtained by .value . For example:

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)
// Print date data
console.log(datePickerRef.value?.value)
</script>

In the future, we will judge the design based on the user experience. For designs that don't make sense, we will refactor them in subsequent iterations.

DatePicker #

Basic usage #

Date and time selection #

Range selector #

Date format #

Input box prompt text #

An optional date and time #

Holiday view #

Internationalization #

API #

Attribute #

Event #

FAQ #

About the date selection box component data acquisition #