@blueking/date-picker

支持 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'
minDuration	最小可选时间跨度毫秒值	number
maxDuration	最大可选时间跨度毫秒值	number
enableFormatClick	可支持的时间格式是否可以点击切换	boolean	false

事件列表

事件名	参数	参数类型	描述
update:modelValue	value, info	value: IDatePickerProps['modelValue'] info: Array { dayjs: dayjs.Dayjs | null; formatText: null | string; }	更新date值的事件，以及相关信息
update:timezone	value, timezoneInfo	value: string timezoneInfo: ITimezoneItem	更新时区值的事件，以及时区信息
update:format	value	value: string	更新时间格式的值