LimeDateTimePicker 时间选择器

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

文档

date-time-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"
	@change="onChange">
</l-date-time-picker>

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

const onConfirm = (value: string) => {
	console.log('onConfirm', value)
}
const onChange = (value: string) => {
	console.log('onChange', 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"
	@change="onChange">
</l-date-time-picker>
//文本
<l-date-time-picker 
	title="选择日期"
	mode="年月日时分"
	confirm-btn="确认"
	cancel-btn="取消"
	@confirm="onConfirm"
	@change="onChange">
</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

参数	说明	类型	默认值
v-model	当前选中的日期	string	-
value	当前选中的日期	string	-
start	选择器的最小可选时间，默认为当前时间-10年	string|number	-
end	选择器的最大可选时间，默认为当前时间+10年	string|number	-
format	用于confirm事件参数格式化详细文档	string	``
mode	1=年、2=月、4=日、8=时、16=分、32=秒,任意组合。	string|numbr	`1
customFilter	选项过滤函数(type 可能值为 year, month, day, hour, minute)。	Func	``
renderLabel	选项格式化函数(type 可能值为 year, month, day, hour, minute)。	Func	``
showUnit	label后面是否显示单位	boolean	true
minHour	可选的最小小时	number	0
maxHour	可选的最大小时	number	23
minMinute	可选的最小分钟	number	0
maxMinute	可选的最大分种	number	59
cancelBtn	取消按钮文字	string	``
cancelStyle	取消按钮样式	string	``
confirmBtn	确定按钮文字	string	``
confirmStyle	确定按钮样式	string	``
title	标题	string	``
titleStyle	标题样式	string	``
itemHeight	每项高度	string	50px
itemColor	每项文本颜色	string	``
itemFontSize	每项文本字体大小	string	``
itemActiveColor	每项文本选中颜色	string	``
indicatorStyle	选择器中间选中框的样式	string	``
bgColor	选择器背景色	string	``
groupHeight	选项组高度	string	400rpx
radius	圆角	string

Events

事件名	说明	回调参数
cancel	点击取消按钮时触发	__
change	选中变化时候触发	value: string
confirm	点击确认按钮时触发	value:string
pick	任何一列选中都会触发	value:string

主题定制

样式变量

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

名称	默认值	描述
--l-picker-border-radius	24rpx	-
--l-picker-bg-color	$bg-color-container	-
--l-picker-toolbar-height	116rpx	-
--l-picker-cancel-color	text-color-2	-
--l-picker-confirm-color	$primary-color	-
--l-picker-button-font-size	32rpx	-
--l-picker-title-font-size	36rpx	-
--l-picker-title-font-weight	700	-
--l-picker-title-line-height	52rpx	-
--l-picker-title-color	$text-color-1	-
--l-picker-group-height	400rpx	-
--l-picker-indicator-bg-color	$fill-4	-
--l-picker-indicator-border-radius	12rpx	-
--l-picker-item-height	50px	-
--l-picker-item-color	$text-color-1	-
--l-picker-item-active-color	$text-color-1	-
--l-picker-item-active-color	$text-color-1	-
--l-picker-loading-mask-color	rgba(255,255,255,.9)	-
--l-picker-item-font-size	$font-size-md	-

打赏

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

源代码

组件源码