@blueking/date-picker v2.0.0-beta.21
支持 Vue2/Vue3 版本 无差别使用
安装
npm i @blueking/date-picker
使用
- vue3框架下使用
<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';
import DatePicker from '@blueking/date-picker/vue3/vue3.css';
const value = ref(['now-2d/d', 'now',]);
const timezone = ref('Asia/Shanghai');
const handleValueChange = (value, info) => {
console.log(value, info);
};
</script>
- vue2框架下使用
<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/vue2/vue2.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>
属性列表
属性名 | 描述 | 属性类型 | 默认值 |
---|---|---|---|
behavior | 组件展示风格 | 'normal' \| 'simplicity' | 'normal' |
commonUseList | 常用列表 | DateValue[] | |
disabled | 是否禁用 | boolean | |
format | 日期转换显示格式 | string | |
modelValue | 日期值 | DateValue \| dayjs.Dayjs[] \| number[] \| string[] \| undefined | |
needTimezone | 是否展示时区 | boolean | |
timezone | 时区值 | string | 浏览器时区 |
validDateRange | 有效可选的日期范围 | DateValue \| undefined | |
version | 版本号 用于控制本地缓存 | number \| string | '1.0' |
事件列表
事件名 | 参数 | 参数类型 | 描述 |
---|---|---|---|
update:modelValue | value, info | value: IDatePickerProps'modelValue'info: Array{dayjs: dayjs.Dayjs | null;formatText: null | string;} | 更新date值的事件,以及相关信息 |
update:timezone | value, timezoneInfo | value: stringtimezoneInfo: ITimezoneItem | 更新时区值的事件,以及时区信息 |
11 days ago
11 days ago
12 days ago
12 days ago
12 days ago
12 days ago
14 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago