在做项目时 用到可以选择时分秒的组件 百度了很多 跟自己的需求不太符合 于是请求公司前端大佬封装了一个可选择的年-月-日-时-分-秒组件
这是我要实现的效果：
单独建一个文件夹 在需要用到的页面引入
<!--
用途：日期时间拨盘选择
参数：
title
说明：当前组件的title名称
类型：String
默认值：弹窗信息
type
说明：日期时间筛选类型
类型：String
默认值：ymd
minDate
说明：最小选择时间
类型：String
默认值：2000-01-01 00:00:00
maxDate
说明：最大选择时间
类型：String
默认值：3000-01-01 00:00:00
initDate
说明：初始默认时间
类型：String
默认值：2020-05-20 00:00:00
confirmButtonText
说明：确认按钮文本
类型：String
默认值：确认
:showConfirmButton
说明：是否显示确认按钮
类型：Boolean
默认值：true
@confirmFunction
说明：确认按钮操作事件
类型：Function
@cancelFunction
说明：取消按钮操作事件
类型：Function
-->
<template>
<!-- <view class="datePicker" ref="datePicker" catchtouchmove="true"> -->
<view class="datePicker" ref="datePicker">
<uni-popup ref="popup" type="bottom">
<view class="popupBox">
<view class="dtitle">
<view class="name">{
{title}}</view>
<view class="close" @click="cancelFunction();"></view>
</view>
<picker-view
@change="onChange($event)"
class="picker-view"
@pickstart="pickStart($event)"
@pickend="pickEnd()"
:value="dateValue"
>
<picker-view-column v-for="(item,index) in data" :key="index">
<view class="item" v-for="(item1,index1) in item.data" :key="index1">{
{item1}}{
{item.$name}}</view>
</picker-view-column>
</picker-view>
<view class="operate">
<view class="btn confirm" :class="{'cur':isDataFinish}" @click="confirmFunction();">{
{confirmButtonText}}</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
components:{
uniPopup
},
data () {
return {
data:[], //初始化时间维度
changeObj:[], //初始化选中的数据
isDataFinish:true, //初始化数据是否选择完毕
normalDate:"", //初始化默认选择的时间
dateValue:[], //初始化拨盘选择默认值
tempChangeObj:[], //初始化滚动选中
}
},
props:{
// title名称，类型 String 默认 ""
"title":{
type:String,
default:"请选择时间"
},
// 拨盘类型，类型 String 默认 "yy-mm-dd"
"type":{
type:String,
default:"yy-mm-dd"
},
// 最小选择时间
"minDate":{
type:String,
default:"2000-01-01 00:00:00"
},
// 最小选择时间
"maxDate":{
type:String,
default:"3000-01-01 00:00:00"
},
// 初始默认时间
"initDate":{
type:String,
default:""
},
// 确认按钮名称 类型 String 默认 "确认"
'confirmButtonText':{
type:String,
default:'确认'
},
// 确认方法名-兼容微信小程序无法获取父组件是否传递过来参数的补丁
'mpWeixinConfirm':{
type:String
},
// 确认方法名-兼容微信小程序无法获取父组件是否传递过来参数的补丁
'mpWeixinCancel':{
type:String
}
},
methods: {
// open 开启弹窗方法
open(){
this.data=[];
// 重置默认选择的日期时间
if(!this.initDate||new Date(this.initDate).getTime()<new Date(this.minDate).getTime()||new Date(this.initDate).getTime()>new Date(this.maxDate).getTime()){
this.normalDate = this.minDate;
}else{
this.normalDate = this.initDate;
}
// 获取类型
switch(this.type){
case "yy":
// 追加年数据
var year = {};
year.name = "year";
year.$name = "年"
year.data = [];
var yearInterval = this.maxDate.split("-")[0] - this.minDate.split("-")[0];
for(let a=0;a<=yearInterval;a++){
year.data.push(parseInt(this.minDate.split("-")[0])+a);
if(this.normalDate.split("-")[0]==(parseInt(this.minDate.split("-")[0])+a)){
this.dateValue.push(a)
}
}
this.tempChangeObj = this.dateValue;
this.data.push(year);
break;
case "yy-mm":
//追加年数据
var year = {};
year.name = "year";
year.$name = "年"
year.data = [];
var yearInterval = this.maxDate.split("-")[0] - this.minDate.split("-")[0];
for(let a=0;a<=yearInterval;a++){
year.data.push(parseInt(this.minDate.split("-")[0])+a);
if(this.normalDate.split("-")[0]==(parseInt(this.minDate.split("-")[0])+a)){
this.dateValue.push(a)
}
}
this.data.push(year);
// 追加月数据
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// 判断年份如果在同一年
var monthInterval = 0;
if(yearInterval>0){
monthInterval = 12;
for(let b=1;b<=monthInterval;b++){
month.data.push(b<10?("0"+b):b);
if(this.normalDate.split(" ")[0].split("-")[1]==(b<10?("0"+b):b)){
this.dateValue.push(b-1)
}
}
}else{
monthInterval = this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1];
for(let b=0;b<=monthInterval;b++){
month.data.push((parseInt(this.minDate.split(" ")[0].split("-")[1])+b)<10?("0"+(parseInt(this.minDate.split(" ")[0].split("-")[1])+b)):(parseInt(this.minDate.split(" ")[0].split("-")[1])+b));
if(parseInt(this.normalDate.split(" ")[0].split("-")[1])==parseInt(this.minDate.split(" ")[0].split("-")[1])+b){
this.dateValue.push(b)
}
}
}
this.tempChangeObj = this.dateValue;
this.data.push(month);
break;
case "yy-mm-dd":
//追加年数据
var year = {};
year.name = "year";
year.$name = "年"
year.data = [];
var yearInterval = this.maxDate.split("-")[0] - this.minDate.split("-")[0];
for(let a=0;a<=yearInterval;a++){
year.data.push(parseInt(this.minDate.split("-")[0])+a);
if(this.normalDate.split("-")[0]==(parseInt(this.minDate.split("-")[0])+a)){
this.dateValue.push(a)
}
}
this.data.push(year);
// 追加月数据
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// 判断年份如果在同一年
var monthInterval = 0;
if(yearInterval>0){
monthInterval = 12;
for(let b=1;b<=monthInterval;b++){
month.data.push(b<10?("0"+b):b);
if(this.normalDate.split(" ")[0].split("-")[1]==(b<10?("0"+b):b)){
this.dateValue.push(b-1)
}
}
}else{
monthInterval = this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1];
for(let b=0;b<=monthInterval;b++){
month.data.push((parseInt(this.minDate.spli
最低0.47元/天 解锁文章
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
