kvuseDatePicker 消息提示 #
基础使用 #
至
时间日期类型
至
vue
<template>
<k-date-picker v-model="time" @change="changeHandle" />
<div class="mt20 mb10">
时间日期类型
</div>
<k-date-picker type="datetimerange" v-model="time" @change="changeHandle" />
</template>
<script setup>
import { ref } from 'vue';
const time = ref('');
const changeHandle = (value) => {
console.log('value: ', value);
};
</script>
<style lang="scss" scoped>
</style>
选择模式 #
可设置daterange: true属性，在选择日类型的时候，设置为时间段选择
选择日 设置时间段：
至
vue
<template>
<k-date-picker v-model="time" select-type @change="changeHandle" />
<div class="mt20 mb10">
选择日 设置时间段：
</div>
<k-date-picker
v-model="timeRange" select-type daterange
@change="changeRangeHandle"
/>
</template>
<script setup>
import { ref } from 'vue';
const time = ref('');
const changeHandle = (value) => {
console.log('value: ', value);
};
const timeRange = ref('');
const changeRangeHandle = (range) => {
console.log('range: ', range);
};
</script>
<style lang="scss" scoped>
</style>
设置默认值 #
至
时间日期类型
至
选择类型模式
选择日 设置时间段：
至
vue
<template>
<k-date-picker v-model="time" @change="changeHandle" />
<div class="mt20 mb10">
时间日期类型
</div>
<k-date-picker type="datetimerange" v-model="time" @change="changeHandle" />
<div class="mt20 mb20">
选择类型模式
</div>
<k-date-picker v-model="time1" select-type @change="changeHandle" />
<div class="mt20 mb10">
选择日 设置时间段：
</div>
<k-date-picker
v-model="timeRange" select-type daterange
@change="changeRangeHandle"
/>
</template>
<script setup>
import { ref } from 'vue';
const time = ref(['2022-08-01 00:00:00', '2022-08-08 00:00:00']);
const time1 = ref('2022-08-01 00:00:00');
const timeRange = ref(['2022-08-01 00:00:00', '2022-08-08 00:00:00']);
const changeHandle = (value) => {
console.log('value: ', value);
};
const changeRangeHandle = (range) => {
console.log('range: ', range);
};
</script>
<style lang="scss" scoped>
</style>