背景

项目使用的ui框架为uView UI，因项目功能需求需要实现时间选择器可以选择秒，但是uview不支持，所以自行解决。

最终版是基于uview UI的时间组件代码做修改，实现功能。

基于uniapp picker-view 组件封装（功能不完善）

最后实现功能如图：

插曲：vue 自定义 v-model 的实现查看我的另一篇文章：

UI组件二次封装之自定义 v-model。

HTML

<template><u-popup :show="show && !disabled" mode="bottom" :round="round"><view class="time-content"><view class="header-top"><slot name="header"><view class="cancel" @click="cancel">{{cancelText}}</view><view class="title">{{title}}</view><view class="confirm" @click="confirm">{{confirmText}}</view></slot></view><view class="time-wrapper"><picker-view:value="pickerValue" indicator-class="picker-box":indicator-style="indicatorStyle"@change="bindChange"><picker-view-column v-for="(item,index) in innerColumns" :key="index"><view class="item" v-for="(item1,index1) in item.values" :key="index1">{{item1}}{{item.label}}</view></picker-view-column></picker-view></view></view></u-popup>
</template>

<script>export default {name: 'GDatepicker',/*** 插槽* header  自定义头部样式*/props:{value:{type: [String,Number],default:''},show: {type:[Boolean,String],default:false},cancelText: {type:String,default:'取消'},confirmText: {type:String,default:'确定'},title: {type:String,default:'时间选择'},/*** 是否格式化时间* format 格式同 uView timeFormat API，如："yyyy-mm-dd"* 格式可以自由搭配: 年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，* 注意分为 大写M*/format: {type:String,default:''},// 是否转换成json格式数据 如：2020-01-01T19:19:20.253ZformatToJson: {type: Boolean,default: false},/*** 时间模式（选择器可选时间格式）(如果mode为date,则format不应包含时分秒格式)* datetime  全时间：年月日时分秒* date  只包含年月日*/mode: {type: String,default: 'datetime'},// 可选的最大时间 时间戳毫秒 默认后十年maxDate: {type: [String, Number],default: new Date(new Date().getFullYear() + 10, 0, 1).getTime(),},// 可选的最小时间 时间戳毫秒 默认前十年minDate: {type: [String, Number],default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),},minMonth: {type: [String, Number],default: 1},maxMonth: {type: [String, Number],default: 12},minDay: {type: [String, Number],default: 1},maxDay: {type: [String, Number],default: 31},// 弹窗圆角值round: {type: [String, Number],default:0},disabled:{type:Boolean,default:false}},model: {prop: 'value',event: 'input'},data() {return {year: 2022,month: 0,day: 0,hour: 0,minute: 0,second: 0,pickerValue: [], // picker-view绑定值innerColumns: [],indicatorStyle: `color: red;!important`}},watch:{show(val) { if(val) {this.initData()if(this.value) {this.setData(this.value)} else {this.setData()}}}},// mounted() {// this.initData()// },methods: {initData() {const startYear = new Date(Number(this.minDate)).getFullYear()const endYear = new Date(Number(this.maxDate)).getFullYear()let result = [{type: 'year',label: '年',range: [startYear, endYear]},{type: 'month',label: '月',range: [this.minMonth, this.maxMonth]},{type: 'day',label: '日',range: [this.minDay, this.maxDay]},{type: 'hour',label: '时',range: [0,23]},{type: 'minute',label: '分',range: [0, 59]},{type: 'secode',label: '秒',range: [0, 59]}]this.innerColumns = result.map(({ type, label, range }) => {const num = range[1] - range[0] + 1;let values = this.getColumnTimes(num, (index) => {let value = range[0] + indexvalue = type === 'year' ? `${value}` : this.padZero(value)return value})return { type, label, values }})if(this.mode === "date") {this.innerColumns.splice(3,3)}},bindChange (e) {const val = e.detail.value;const date = new Date();this.year = this.getCurrCol(0)[val[0]] || date.getFullYear()this.month = this.getCurrCol(1)[val[1]] ||date.getMonth() + 1;this.day = this.getCurrCol(2)[val[2]] || date.getDate()this.hour = this.getCurrCol(3)[val[3]] || date.getHours();this.minute = this.getCurrCol(4)[val[4]] || date.getMinutes();this.second = this.getCurrCol(5)[val[5]] || date.getSeconds();/* // change事件 需要启用取消注释const currentTime = new Date(this.year,this.month - 1,this.day,this.hour,this.minute,this.second).getTime()if(this.format) {this.$emit('change',uni.$u.timeFormat(currentTime,this.format))} else {this.$emit('change',currentTime)} */},getCurrCol(index) {if(!this.innerColumns[index]) {return []}return this.innerColumns[index].values},cancel() {this.$emit('cancel')this.$emit('update:show',false)},confirm() {const str = `${this.year}/${this.month}/${this.day} ${this.hour}:${this.minute}:${this.second}`const time = new Date(str).getTime()this.$emit('confirm',this.formatDate(time))this.$emit('input', this.formatDate(time));},// set datasetData(value) {let date;if(value) {const n = isNaN(value) ? value : Number(value)date = new Date(n)} else {date = new Date()}const startYear = new Date(Number(this.minDate)).getFullYear()this.year = date.getFullYear()// 绑定时间小于当前时间列表的开始时间则取第一项const yearColumnIndex = this.year > startYear ? this.year - startYear : 0this.day = date.getDate()this.month = date.getMonth() + 1this.hour = date.getHours()this.minute = date.getMinutes()this.second = date.getSeconds()// pickerValue数组中的项依次表示 picker-view 内的 picker-view-column 选择的第几项this.pickerValue = [yearColumnIndex,this.month - 1,this.day - 1,this.hour,this.minute,this.second]this.$nextTick(() => {if(this.mode === "date") {this.pickerValue.splice(3,3)}})},formatDate(time) {if(this.format) {return uni.$u.timeFormat(time,this.format)} else if(this.formatToJson) {return new Date(time).toJSON()} else {return time}},// 设置列数据getColumnTimes(n, iteratee) {let index = -1const result = Array(n < 0 ? 0 : n)while (++index < n) {result[index] = iteratee(index)}return result},// 字符串转换padZero(num, targetLength = 2) {let str = `${num}`while (str.length < targetLength) {str = `0${str}`}return str}}}
</script>

CSS

<style lang="scss" scoped>picker-view {width: 100%;height: 100%;}.time-content {height: 280px;.header-top {height: 44px;line-height: 44px;display: flex;padding: 0 16px;font-size: 15px;border-bottom: 1px solid #EEEEEE;overflow: hidden;.cancel {color: #999999;}.title {flex: 1;text-align: center;color: #666666;}.confirm {color: #27B57D;}}.time-wrapper {height: calc(100% - 44px);box-sizing: border-box;text-align: center;.picker-box {height: 44px;font-size: 18px!important;font-weight: 800!important;color: #333333!important;}.item {line-height: 44px;text-align: center;}}}
</style>

使用

<template><g-time-picker:show="show":title="'选择装货时间'"v-model="value"@cancel="cancelFn"@confirm="confirmFn":format="'yyyy-mm-dd hh:MM:ss'":minDate="'1587524800000'":maxDate="'1786778555000'"></g-time-picker>
</template><script>import GTimePicker from "@/components/Time/index.vue"export default {name:'timePicker-demo',components:{GTimePicker},data() {return {show: false,// value: "" ,value: "2024-11-11 11:11:11" ,inputValue: ''}},methods: {btnClick(e) {this.show = true;},cancelFn() {console.log(this.value,'cancel');this.show = false;},confirmFn(e) {console.log(this.value,'confirm');// this.inputValue = this.valuethis.show = false;}}}
</script>

基于uView UI的时间选择器代码修改

项目使用uview ui 的方式为本地安装，时间组件中使用到了其他的uview ui 基础组件，使用请自行处理，全局安装，或者按需引入都可以，下面是我基于uview 时间选择器源码修改后的代码：

百度网盘请输入提取码

提取码：i3ng

uniapp 封装时间选择器组件相关推荐

uni-app 超好用的时间选择器组件(起止时间)
uni-app 超好用的时间选择器组件(起止时间) uni-app 时间组件选择开始时间和结束时间可以单填一个也可以不填时间组件效果图 1. 引入插件点击进入下载页面 2. 根据步骤引入到项 ...
小程序日期（日历）时间选择器组件
封装一个小程序日期(日历)时间选择器组件简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 ...
微信小程序 - 公农历通用时间选择器组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码序最近做了个小程序,需要用到支持公农历的通用时间选择器,找了一圈没有现成的,只能自己撸一 ...
使用Layui的时间选择器组件不显示问题
初次使用Layui 最近在做一个springboot项目,前端的知识我不太会,为了页面美观就使用了layui的时间选择组件,但是怎么都显示不出来时间组件. 以下就是记录我的使用历程. 我先去layui ...
uniapp日期时间选择器的实现
由于项目需求需要,尝试过使用Vant组件库但是一直出现问题插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下: 首先现在根目录下创建util文件夹放dateTimePicker. ...
vue TimePicker时间选择器组件的回显与格式转变
我们监听打印出来是这种格式: Tue Mar 30 2021 17:44:12 GMT+0800 而我们需要的是这种格式: 17:44:12 实现: 方法一(注:这种方法可回显):文档里有一个属性:v ...
uniapp picker时间选择器
//第一种 <picker @change="bindPickerChange" :value="index" :range="appointL ...
element-UI组件之日期时间选择器与时间格式转化
element-UI组件之日期时间选择器与时间格式转化日期选择器与时间选择器的一般使用日期时间选择器选择日期时间点选择日期范围日期选择器月份范围选择器禁选日期用time.getTime ...
js日期控件_11个开源的Github开源日期选择器组件，供你选择
介绍本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...

uniapp 封装时间选择器组件

背景

基于uniapp picker-view 组件封装（功能不完善）

基于uView UI的时间选择器代码修改

uniapp 封装时间选择器组件相关推荐

最新文章

热门文章