更新记录

1.0.1(2023-09-15) 下载此版本

v1.0.1 leke-datetime-styler 修复mode属性值为['year', 'month'] 年、月, 在IOS端不能正常显示。

1.0.0(2023-09-01) 下载此版本

v1.0.0 leke-datetime-styler 初始化版本


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.10 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × ×

leke-datetime-styler

基于picker-view内置组件的vue3+ts版本时间选择器组件,支持按年、月、日、时、分、秒选择时间日期,兼容H5、小程序。支持自由切换暗黑主题。

特点和功能:

  • 可定制外观: 提供主题颜色和样式选项,让你的时间选择器与应用外观一致。
  • 平滑动画效果: 通过动画和过渡效果,提供出色的用户体验,使时间选择变得更加流畅。
  • 简单集成: 详细的文档和示例代码,让你在应用中轻松地集成和使用时间精选器。

安装使用

  • 可在右侧的使用 HBuilderX 导入插件下载示例项目ZIP,方便快速上手。
  • 提示:使用该插件确保你安装了sass编译插件

基本用法

template 中使用组件

<template>
  <view class="mainstay">
    <button class="mainstay-btn" @click="showDateStyler = true">
      选择时间
    </button>
    <view class="mainstay-text">已选时间:{{ dateInitValue || '--' }}</view>
  </view>
  <lekeDatetimeStyler
    :value="dateInitValue"
    :visible="showDateStyler"
    :model="model"
    @cancel="handCancel"
    @confirm="handConfirm"
  ></lekeDatetimeStyler>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import lekeDatetimeStyler from '@/components/leke-datetime-styler/leke-datetime-styler.vue'

const showDateStyler = ref(false)
const dateInitValue = ref<string | number | Date>('')
const model = ['year', 'month', 'day']

// 确认选择回调
const handConfirm = (e: string | number | Date): void => {
  showDateStyler.value = false
  dateInitValue.value = e
  console.log('回调时间===>', e)
}

// 取消选择回调
const handCancel = (): void => {
  showDateStyler.value = false
  console.log('取消===>')
}
</script>

组件属性

属性名 类型 默认值 必填 说明
visible Boolean false 是否显示弹窗
value Date|String|Number - 默认选中的时间
model Array ['year', 'month', 'day'] 选择时间类型,详见下文 model属性说明
yearsArr Array - 可选年份范围,默认为前10年,后10年,格式[2000,2023]
isDark Boolean false 是否切换为暗黑模式
title String '选择日期' 顶部栏文字
titleColor String '#000' 顶部栏文字颜色
confirmButtonText String '确定' 确认按钮文字
cancelButtonText String '取消' 取消按钮文字
confirmButtonStyle Object {color: '#fff',backgroundColor: '#1aad19'} 确认按钮文字样式对象
cancelButtonStyle Object {color: '#1aad19'} 取消按钮文字样式对象
visibleOptionNum Number 3 可见的选项个数(可选值 3 , 5 , 7
closeOverlay Boolean true 是否在点击遮罩层后关闭弹窗

组件事件

事件名称 回调参数 说明
@confirm (value: Date) => void 确认选择时回调,详见下文model属性说明
@cancel () => void 取消选择时回调

model属性说明

时间格式 @confirm返回值示例 说明
['year', 'month', 'day', 'hour', 'minute', 'second'] yyyy-mm-dd HH:MM:SS "2023-08-31 08:30:10" 选择年、月、日、时、分、秒
['year', 'month', 'day', 'hour', 'minute'] yyyy-mm-dd HH:MM "2023-08-31 08:30" 选择年、月、日、时、分
['year', 'month', 'day'] yyyy-mm-dd "2023-08-30" 选择年、月、日
['year', 'month'] yyyy-mm "2023-08" 选择年、月
['year'] yyyy "2023" 选择年
['hour', 'minute', 'second'] HH:MM:SS 08:30:10 选择时、分、秒
['hour', 'minute'] HH:MM 08:30 选择时、分

在线预览演示(H5)

组件版本

v1.0.1

有问题可以联系作者(qq:1923487191),在使用过程遇到问题可以提出来讨论,也可以在评论区发布留言交流心得。🎈🎈🎈

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问