更新记录

0.0.2（2024-12-27） 下载此版本

• feat: 兼容vue2

0.0.1（2024-12-27） 下载此版本

• init

平台兼容性

lime-date-time-picker 时间选择器

• 用于选择时间，支持日期、时分等时间维度
• 插件依赖lime-shared, lime-picker不喜勿下

安装

在插件市场导入即可。首次导入可能需要重新编译

代码演示

基础使用

通过 v-model 绑定当前选中的日期，通过 start 和 end 属性来设定可选的时间范围。在实际场景中 通常搭配 Popup一起使用。

<l-date-time-picker 
    title="选择日期"
    v-model="value"
    confirm-btn="确认"
    cancel-btn="取消"
    start="2020-6-30"
    end="2025-6-30"
    @confirm="onConfirm"
    @pick="onPick">
</l-date-time-picker>

const value = ref('2024-05-02');

const onConfirm = (value: string) => {
    console.log('onConfirm', value)
}
const onPick = (value: string) => {
    console.log('onPick', value)
}

类型选择

通过 mode 属性可以控制选项的类型，它可以是number,也可以是中文或英文，支持以任意顺序对 1 = 年 = year 、 2 = 月 = month 、 4 = 日 = date 、 8 = 时 = hour 、 16 = 分 = minute 、 32 = 秒 = second 进行排列组合。

比如：

传入 1 来单独选择年份
。 传入 2 来单独选择月份
。 传入 1|2 来选择年份和月份，位运算结果：3传入3也可以
。 传入 2|4 来选择月份和日期，位运算结果：6传入6也可以
。 传入 1|2|4 来选择年月日，位运算结果：7传入7也可以
。 传入 4|8 来选择日时，位运算结果：12传入12也可以
。 传入 8|16 来选择时分，位运算结果：24传入24也可以
。 传入 8|16|32 来选择时分秒，位运算结果：56传入56也可以
。 传入 1|2|4|8 来选择年月日时，位运算结果：15传入15也可以
。 传入 1|2|4|8|16 来选择年月日时分，位运算结果：31传入31也可以
。 传入 1|2|4|8|16|32 来选择年月日时分秒，位运算结果：63传入63也可以
。 任意组合，但必须是连续的。不能相隔即不能日和分这种组合，如果觉得数字不够直观，也可以直接写对应的中文或英文

// 数值
<l-date-time-picker 
    title="选择日期"
    :mode="1|2|4"
    confirm-btn="确认"
    cancel-btn="取消"
    @confirm="onConfirm"
    @pick="onPick">
</l-date-time-picker>
//文本
<l-date-time-picker 
    title="选择日期"
    mode="年月日时分"
    confirm-btn="确认"
    cancel-btn="取消"
    @confirm="onConfirm"
    @pick="onPick">
</l-date-time-picker>

const value = ref('2024-05-02')

自定义label

通过传入 renderLabel 函数，可以对选项文字进行格式化处理。

<l-date-time-picker 
    title="选择日期" 
    confirm-btn="确认"
    cancel-btn="取消"
    start="2020-6-30"
    end="2025-6-30"
    format="YYYY-MM-DD"
    :renderLabel="renderLabel"
    @confirm="onConfirm"
    >
</l-date-time-picker>

import { TimeModeValues } from '@/uni_modules/lime-date-time-picker'
const renderLabel = (type: TimeModeValues, value: string): string => {
    if(type == 'year') {
        return `${value}年`
    }
    return value
}

过滤项

通过传入 customFilter 函数，可以对选项数组进行过滤，实现自定义选项间隔。这个方法存在响应不及时的问题，暂时搁置。

<l-date-time-picker 
    title="选择日期" 
    confirm-btn="确认"
    cancel-btn="取消"
    start="2020-6-30"
    end="2025-6-30"
    format="YYYY-MM-DD"
    :customFilter="filter"
    @confirm="onConfirm"
    >
</l-date-time-picker>

import { DateTimePickerColumn, TimeModeValues } from '@/uni_modules/lime-date-time-picker'
const filter = (type: TimeModeValues, columns: DateTimePickerColumn):DateTimePickerColumn => {
    if (type == 'month') {
        return columns.filter((option) => parseInt(option.value) % 6 == 0);
    }
    return columns
}

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-date-time-picker/compoents/lime-date-time-picker -->
<lime-date-time-picker />

插件标签

• 默认 l-date-time-picker 为 component
• 默认 lime-date-time-picker 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

API

Picker Props

Events

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。