支持 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: stringtimezoneInfo: ITimezoneItem | 更新时区值的事件，以及时区信息 | | update:format | value | value: string | 更新时间格式的值 |

TimezonePicker 时区选择器

支持 Vue2/Vue3 版本使用

时区选择器组件，支持搜索和选择全球时区。

注：TimezonePicker 组件来源于 Select组件 所以这里 select 的所有属性和事件都一致使用

使用

• vue3框架下使用

<template>
  <div class="app">
    <TimezonePicker
      v-model:value="timezone"
      :timezoneOptions="customTimezoneOptions"
      @update:value="handleTimezoneChange"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

import { TimezonePicker } from '@blueking/date-picker';
import '@blueking/date-picker/vue3/vue3.css';

const timezone = ref('Asia/Shanghai');
const customTimezoneOptions = ref(); // 可选，自定义时区选项

const handleTimezoneChange = (value, timezoneInfo) => {
  console.log('选中的时区:', value);
  console.log('时区信息:', timezoneInfo);
};
</script>

• vue2框架下使用

<template>
  <div class="hello">
    <TimezonePicker
      :value="timezone"
      :timezoneOptions="customTimezoneOptions"
      @update:value="handleTimezoneChange"
      @change="handleTimezoneChange"
    />
  </div>
</template>

<script>
import {TimezonePicker } from '@blueking/date-picker/vue2'
import '@blueking/date-picker/vue2/vue2.css'

export default {
  data() {
    return {
      timezone: 'Asia/Shanghai',
      customTimezoneOptions: undefined // 可选，自定义时区选项
    }
  },
  components: {
    TimeZonePicker
  },
  methods: {
    handleTimezoneChange(value, timezoneInfo) {
      console.log('选中的时区:', value);
      console.log('时区信息:', timezoneInfo);
      this.timezone = value;
    }
  }
}
</script>

TimezonePicker 属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | --------------- | ------------------ | ------------------ | ---------------- | | value | 当前选中的时区值 | string | | | timezoneOptions | 自定义时区选项列表 | ITimeZoneGroup[] | 内置全球时区列表 |

TimezonePicker 事件列表

| 事件名 | 参数 | 参数类型 | 描述 | | ------------ | ------------------- | ------------------------------------------ | ------------------------------ | | update:value | value, timezoneInfo | value: string``timezoneInfo: ITimezoneItem | 更新时区值的事件，以及时区信息 |

类型定义

interface ITimezoneItem {
  abbreviation?: string; // 时区缩写
  country?: string; // 国家名称
  countryCode?: string; // 国家代码
  label: string; // 时区标识符（如 Asia/Shanghai）
  utc?: string; // UTC偏移量（如 UTC+08:00）
}

interface ITimeZoneGroup {
  label: string; // 分组标签
  options: ITimezoneItem[]; // 该分组下的时区选项
}