支持 Vue2/Vue3 版本 无差别使用
安装
npm i @blueking/date-picker
使用
<template>
<div class="app">
<DatePicker
v-model="value"
v-model:timezone="timezone"
format="YYYY-MM-DD HH:mm:ss"
:behavior="'normal'"
:version="2"
:disabled="false"
@update:model-value="handleValueChange"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import DatePicker from '@blueking/date-picker';
// 如果项目没有安装bkui-vue, dayjs 则可使用全量版本
import DatePicker from '@blueking/date-picker/vue3';
import '@blueking/date-picker/dist/vue3-full.css';
const value = ref(['now-2d/d', 'now',]);
const timezone = ref('Asia/Shanghai');
const handleValueChange = (value, info) => {
console.log(value, info);
};
</script>
<template>
<div class="hello">
<DatePicker
:modelValue="modelValue"
:timezone.sync="timezone"
@update:modelValue="handleValueChange"/>
</div>
</template>
<script>
import DatePicker from '@blueking/date-picker/vue2'
import '@blueking/date-picker/dist/vue2-light.css'
export default {
data(){
return {
modelValue: ['now-2d/d', 'now'],
timezone: 'Asia/Shanghai'
}
},
components: {
DatePicker
},
methods: {
handleValueChange(v, info) {
console.log(v, info)
this.modelValue = v
}
}
}
</script>