当前位置：网站首页>uniapp time component encapsulates year-month-day-hour-minute-second
uniapp time component encapsulates year-month-day-hour-minute-second
2022-08-05 07:27:00 【Y small pudding】
在做项目时 Use a component that can select hours, minutes and seconds 百度了很多 does not meet your needs So the front-end boss of the company was asked to encapsulate an optional year-月-日-时-分-second component
This is the effect I want to achieve：
单独建一个文件夹 在需要用到的页面引入
<!--
用途：Date time dial selection
参数：
title
说明：当前组件的title名称
类型：String
默认值：弹窗信息
type
说明：Datetime filter type
类型：String
默认值：ymd
minDate
说明：Minimum selection time
类型：String
默认值：2000-01-01 00:00:00
maxDate
说明：Maximum selection time
类型：String
默认值：3000-01-01 00:00:00
initDate
说明：Initial default time
类型：String
默认值：2020-05-20 00:00:00
confirmButtonText
说明：Confirm button text
类型：String
默认值：确认
:showConfirmButton
说明：是否显示确认按钮
类型：Boolean
默认值：true
@confirmFunction
说明：Confirm button action event
类型：Function
@cancelFunction
说明：Cancel button action event
类型：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:[], //Initialize the time dimension
changeObj:[], //Initialize the selected data
isDataFinish:true, //Whether the initialization data is selected
normalDate:"", //Time to initialize the default selection
dateValue:[], //The initialization dial selects the default value
tempChangeObj:[], //Initialize scroll selection
}
},
props:{
// title名称,类型 String 默认 ""
"title":{
type:String,
default:"请选择时间"
},
// dial type,类型 String 默认 "yy-mm-dd"
"type":{
type:String,
default:"yy-mm-dd"
},
// Minimum selection time
"minDate":{
type:String,
default:"2000-01-01 00:00:00"
},
// Minimum selection time
"maxDate":{
type:String,
default:"3000-01-01 00:00:00"
},
// Initial default time
"initDate":{
type:String,
default:""
},
// 确认按钮名称 类型 String 默认 "确认"
'confirmButtonText':{
type:String,
default:'确认'
},
// Confirm the method name-Compatible with the patch that WeChat applet cannot get the parameters passed from the parent component
'mpWeixinConfirm':{
type:String
},
// Confirm the method name-Compatible with the patch that WeChat applet cannot get the parameters passed from the parent component
'mpWeixinCancel':{
type:String
}
},
methods: {
// open Open the popup method
open(){
this.data=[];
// Reset the default selected datetime
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":
// Append year data
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":
//Append year data
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);
// Append monthly data
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// Determine if the year is in the same year
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":
//Append year data
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);
// Append monthly data
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// Determine if the year is in the same year
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.data.push(month);
// Append daily data
var day = {};
day.name = "day";
day.$name = "日";
day.data = [];
// Determine if the year and month are in the same month and year
var dayInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)){
dayInterval = this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2];
for(let c=0;c<=dayInterval;c++){
day.data.push((parseInt(this.minDate.split(" ")[0].split("-")[2])+c)<10?("0"+(parseInt(this.minDate.split(" ")[0].split("-")[2])+c)):(parseInt(this.minDate.split(" ")[0].split("-")[2])+c));
if(parseInt(this.normalDate.split(" ")[0].split("-")[2])==parseInt(this.minDate.split(" ")[0].split("-")[2])+c){
this.dateValue.push(c)
}
}
}else{
var tempMonth = this.normalDate.split(" ")[0].split("-")[1];
// 判断是否为2月
if(tempMonth==2){
// Judge the current selection,是否闰年
if(this.normalDate.split(" ")[0].split("-")[0] % 4 == 0 && !(this.normalDate.split(" ")[0].split("-")[0] % 100 == 0) || this.normalDate.split(" ")[0].split("-")[0] % 400 == 0) {
dayInterval = 29;
}else{
dayInterval = 28;
}
}else if(tempMonth==1||tempMonth==3||tempMonth==5||tempMonth==7||tempMonth==8||tempMonth==10||tempMonth==12){
dayInterval = 31;
}else{
dayInterval = 30;
}
for(let c=1;c<=dayInterval;c++){
day.data.push(c<10?("0"+c):c);
if(this.normalDate.split(" ")[0].split("-")[2]==(c<10?("0"+c):c)){
this.dateValue.push(c-1)
}
}
}
this.tempChangeObj = this.dateValue;
this.data.push(day);
break;
case "yy-mm-dd hh":
//Append year data
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);
// Append monthly data
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// Determine if the year is in the same year
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.data.push(month);
// Append daily data
var day = {};
day.name = "day";
day.$name = "日";
day.data = [];
// Determine if the year and month are in the same month and year
var dayInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)){
dayInterval = this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2];
for(let c=0;c<=dayInterval;c++){
day.data.push((parseInt(this.minDate.split(" ")[0].split("-")[2])+c)<10?("0"+(parseInt(this.minDate.split(" ")[0].split("-")[2])+c)):(parseInt(this.minDate.split(" ")[0].split("-")[2])+c));
if(parseInt(this.normalDate.split(" ")[0].split("-")[2])==parseInt(this.minDate.split(" ")[0].split("-")[2])+c){
this.dateValue.push(c)
}
}
}else{
var tempMonth = this.normalDate.split(" ")[0].split("-")[1];
// 判断是否为2月
if(tempMonth==2){
// Judge the current selection,是否闰年
if(this.normalDate.split(" ")[0].split("-")[0] % 4 == 0 && !(this.normalDate.split(" ")[0].split("-")[0] % 100 == 0) || this.normalDate.split(" ")[0].split("-")[0] % 400 == 0) {
dayInterval = 29;
}else{
dayInterval = 28;
}
}else if(tempMonth==1||tempMonth==3||tempMonth==5||tempMonth==7||tempMonth==8||tempMonth==10||tempMonth==12){
dayInterval = 31;
}else{
dayInterval = 30;
}
for(let c=1;c<=dayInterval;c++){
day.data.push(c<10?("0"+c):c);
if(this.normalDate.split(" ")[0].split("-")[2]==(c<10?("0"+c):c)){
this.dateValue.push(c-1)
}
}
}
this.data.push(day);
// data when appending
var hour = {};
hour.name = "hour";
hour.$name = "时";
hour.data = [];
// Determine whether the year, month, and day are the same
var hourInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)&&(this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2]==0)){
hourInterval = this.maxDate.split(" ")[1].split(":")[0] - this.minDate.split(" ")[1].split(":")[0];
for(let d=0;d<=hourInterval;d++){
hour.data.push((parseInt(this.minDate.split(" ")[1].split(":")[0])+d)<10?("0"+(parseInt(this.minDate.split(" ")[1].split(":")[0])+d)):(parseInt(this.minDate.split(" ")[1].split(":")[0])+d));
if(parseInt(this.normalDate.split(" ")[1].split(":")[0])==parseInt(this.minDate.split(" ")[1].split(":")[0])+d){
this.dateValue.push(d)
}
}
}else{
hourInterval = 23
for(let d=0;d<=hourInterval;d++){
hour.data.push(d<10?("0"+d):d);
if(this.normalDate.split(" ")[1].split(":")[0]==(d<10?("0"+d):d)){
this.dateValue.push(d)
}
}
}
this.tempChangeObj = this.dateValue;
this.data.push(hour);
break;
case "yy-mm-dd hh:mm":
//Append year data
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);
// Append monthly data
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// Determine if the year is in the same year
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.data.push(month);
// Append daily data
var day = {};
day.name = "day";
day.$name = "日";
day.data = [];
// Determine if the year and month are in the same month and year
var dayInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)){
dayInterval = this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2];
for(let c=0;c<=dayInterval;c++){
day.data.push((parseInt(this.minDate.split(" ")[0].split("-")[2])+c)<10?("0"+(parseInt(this.minDate.split(" ")[0].split("-")[2])+c)):(parseInt(this.minDate.split(" ")[0].split("-")[2])+c));
if(parseInt(this.normalDate.split(" ")[0].split("-")[2])==parseInt(this.minDate.split(" ")[0].split("-")[2])+c){
this.dateValue.push(c)
}
}
}else{
var tempMonth = this.normalDate.split(" ")[0].split("-")[1];
// 判断是否为2月
if(tempMonth==2){
// Judge the current selection,是否闰年
if(this.normalDate.split(" ")[0].split("-")[0] % 4 == 0 && !(this.normalDate.split(" ")[0].split("-")[0] % 100 == 0) || this.normalDate.split(" ")[0].split("-")[0] % 400 == 0) {
dayInterval = 29;
}else{
dayInterval = 28;
}
}else if(tempMonth==1||tempMonth==3||tempMonth==5||tempMonth==7||tempMonth==8||tempMonth==10||tempMonth==12){
dayInterval = 31;
}else{
dayInterval = 30;
}
for(let c=1;c<=dayInterval;c++){
day.data.push(c<10?("0"+c):c);
if(this.normalDate.split(" ")[0].split("-")[2]==(c<10?("0"+c):c)){
this.dateValue.push(c-1)
}
}
}
this.data.push(day);
// data when appending
var hour = {};
hour.name = "hour";
hour.$name = "时";
hour.data = [];
// Determine whether the year, month, and day are the same
var hourInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)&&(this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2]==0)){
hourInterval = this.maxDate.split(" ")[1].split(":")[0] - this.minDate.split(" ")[1].split(":")[0];
for(let d=0;d<=hourInterval;d++){
hour.data.push((parseInt(this.minDate.split(" ")[1].split(":")[0])+d)<10?("0"+(parseInt(this.minDate.split(" ")[1].split(":")[0])+d)):(parseInt(this.minDate.split(" ")[1].split(":")[0])+d));
if(parseInt(this.normalDate.split(" ")[1].split(":")[0])==parseInt(this.minDate.split(" ")[1].split(":")[0])+d){
this.dateValue.push(d)
}
}
}else{
hourInterval = 23
for(let d=0;d<=hourInterval;d++){
hour.data.push(d<10?("0"+d):d);
if(this.normalDate.split(" ")[1].split(":")[0]==(d<10?("0"+d):d)){
this.dateValue.push(d)
}
}
}
this.data.push(hour);
// Append score data
var minute = {};
minute.name = "minute";
minute.$name = "分";
minute.data = [];
// Determine whether the year, month, date and time are the same
var minuteInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)&&(this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2]==0)&&(this.maxDate.split(" ")[1].split(":")[0] - this.minDate.split(" ")[1].split(":")[0]==0)){
minuteInterval = this.maxDate.split(" ")[1].split(":")[1] - this.minDate.split(" ")[1].split(":")[1];
for(let e=0;e<=minuteInterval;e++){
minute.data.push((parseInt(this.minDate.split(" ")[1].split(":")[1])+e)<10?("0"+(parseInt(this.minDate.split(" ")[1].split(":")[1])+e)):(parseInt(this.minDate.split(" ")[1].split(":")[1])+e));
if(parseInt(this.normalDate.split(" ")[1].split(":")[1])==parseInt(this.minDate.split(" ")[1].split(":")[1])+e){
this.dateValue.push(e)
}
}
}else{
minuteInterval = 59
for(let e=0;e<=minuteInterval;e++){
minute.data.push(e<10?("0"+e):e);
if(this.normalDate.split(" ")[1].split(":")[1]==(e<10?("0"+e):e)){
this.dateValue.push(e)
}
}
}
this.tempChangeObj = this.dateValue;
this.data.push(minute);
break;
case "yy-mm-dd hh:mm:ss":
//Append year data
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);
// Append monthly data
var month = {};
month.name = "month";
month.$name = "月";
month.data = [];
// Determine if the year is in the same year
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.data.push(month);
// Append daily data
var day = {};
day.name = "day";
day.$name = "日";
day.data = [];
// Determine if the year and month are in the same month and year
var dayInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)){
dayInterval = this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2];
for(let c=0;c<=dayInterval;c++){
day.data.push((parseInt(this.minDate.split(" ")[0].split("-")[2])+c)<10?("0"+(parseInt(this.minDate.split(" ")[0].split("-")[2])+c)):(parseInt(this.minDate.split(" ")[0].split("-")[2])+c));
if(parseInt(this.normalDate.split(" ")[0].split("-")[2])==parseInt(this.minDate.split(" ")[0].split("-")[2])+c){
this.dateValue.push(c)
}
}
}else{
var tempMonth = this.normalDate.split(" ")[0].split("-")[1];
// 判断是否为2月
if(tempMonth==2){
// Judge the current selection,是否闰年
if(this.normalDate.split(" ")[0].split("-")[0] % 4 == 0 && !(this.normalDate.split(" ")[0].split("-")[0] % 100 == 0) || this.normalDate.split(" ")[0].split("-")[0] % 400 == 0) {
dayInterval = 29;
}else{
dayInterval = 28;
}
}else if(tempMonth==1||tempMonth==3||tempMonth==5||tempMonth==7||tempMonth==8||tempMonth==10||tempMonth==12){
dayInterval = 31;
}else{
dayInterval = 30;
}
for(let c=1;c<=dayInterval;c++){
day.data.push(c<10?("0"+c):c);
if(this.normalDate.split(" ")[0].split("-")[2]==(c<10?("0"+c):c)){
this.dateValue.push(c-1)
}
}
}
this.data.push(day);
// data when appending
var hour = {};
hour.name = "hour";
hour.$name = "时";
hour.data = [];
// Determine whether the year, month, and day are the same
var hourInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)&&(this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2]==0)){
hourInterval = this.maxDate.split(" ")[1].split(":")[0] - this.minDate.split(" ")[1].split(":")[0];
for(let d=0;d<=hourInterval;d++){
hour.data.push((parseInt(this.minDate.split(" ")[1].split(":")[0])+d)<10?("0"+(parseInt(this.minDate.split(" ")[1].split(":")[0])+d)):(parseInt(this.minDate.split(" ")[1].split(":")[0])+d));
if(parseInt(this.normalDate.split(" ")[1].split(":")[0])==parseInt(this.minDate.split(" ")[1].split(":")[0])+d){
this.dateValue.push(d)
}
}
}else{
hourInterval = 23
for(let d=0;d<=hourInterval;d++){
hour.data.push(d<10?("0"+d):d);
if(this.normalDate.split(" ")[1].split(":")[0]==(d<10?("0"+d):d)){
this.dateValue.push(d)
}
}
}
this.data.push(hour);
// Append score data
var minute = {};
minute.name = "minute";
minute.$name = "分";
minute.data = [];
// Determine whether the year, month, date and time are the same
var minuteInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)&&(this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2]==0)&&(this.maxDate.split(" ")[1].split(":")[0] - this.minDate.split(" ")[1].split(":")[0]==0)){
minuteInterval = this.maxDate.split(" ")[1].split(":")[1] - this.minDate.split(" ")[1].split(":")[1];
for(let e=0;e<=minuteInterval;e++){
minute.data.push((parseInt(this.minDate.split(" ")[1].split(":")[1])+e)<10?("0"+(parseInt(this.minDate.split(" ")[1].split(":")[1])+e)):(parseInt(this.minDate.split(" ")[1].split(":")[1])+e));
if(parseInt(this.normalDate.split(" ")[1].split(":")[1])==parseInt(this.minDate.split(" ")[1].split(":")[1])+e){
this.dateValue.push(e)
}
}
}else{
minuteInterval = 59
for(let e=0;e<=minuteInterval;e++){
minute.data.push(e<10?("0"+e):e);
if(this.normalDate.split(" ")[1].split(":")[1]==(e<10?("0"+e):e)){
this.dateValue.push(e)
}
}
}
this.data.push(minute);
// Append seconds data
var seconds = {};
seconds.name = "seconds";
seconds.$name = "秒";
seconds.data = [];
// Determine whether the year, month, day, and hour are consistent
var secondsInterval = 0;
if(yearInterval==0&&(this.maxDate.split(" ")[0].split("-")[1] - this.minDate.split(" ")[0].split("-")[1]==0)&&(this.maxDate.split(" ")[0].split("-")[2] - this.minDate.split(" ")[0].split("-")[2]==0)&&(this.maxDate.split(" ")[1].split(":")[0] - this.minDate.split(" ")[1].split(":")[0]==0)&&(this.maxDate.split(" ")[1].split(":")[1] - this.minDate.split(" ")[1].split(":")[1]==0)){
secondsInterval = this.maxDate.split(" ")[1].split(":")[2] - this.minDate.split(" ")[1].split(":")[2];
for(let f=0;f<=secondsInterval;f++){
seconds.data.push((parseInt(this.minDate.split(" ")[1].split(":")[2])+f)<10?("0"+(parseInt(this.minDate.split(" ")[1].split(":")[2])+f)):(parseInt(this.minDate.split(" ")[1].split(":")[2])+f));
if(parseInt(this.normalDate.split(" ")[1].split(":")[2])==parseInt(this.minDate.split(" ")[1].split(":")[2])+f){
this.dateValue.push(f)
}
}
}else{
secondsInterval = 59
for(let f=0;f<=secondsInterval;f++){
seconds.data.push(f<10?("0"+f):f);
if(this.normalDate.split(" ")[1].split(":")[2]==(f<10?("0"+f):f)){
this.dateValue.push(f)
}
}
}
this.tempChangeObj = this.dateValue;
this.data.push(seconds);
break;
}
this.$refs.popup.open();
},
// close 关闭弹窗方法
close(){
this.$refs.popup.close();
},
// Dial selection
onChange($event){
// 此处请注意,The WeChat applet returns the default value,h5end will not return
var tempArray = $event.detail.value;
// Determine if the year and month have changed
if((tempArray[0]!=this.tempChangeObj[0]||tempArray[1]!=this.tempChangeObj[1])&&(this.data[0].data.length>1||this.data[1].data.length>1)){
var daySize = 0;
// Determine the dial type
if((this.type=="yy-mm-dd"||this.type=="yy-mm-dd hh"||this.type=="yy-mm-dd hh:mm"||this.type=="yy-mm-dd hh:mm:ss")&&parseInt(this.data[1].data[tempArray[1]])==2){
// Judge the current selection,是否闰年
if(parseInt(this.data[0].data[tempArray[0]]) % 4 == 0 && !(parseInt(this.data[0].data[tempArray[0]]) % 100 == 0) || parseInt(this.data[0].data[tempArray[0]]) % 400 == 0) {
daySize = 29;
}else{
daySize = 28;
}
}else if((this.type=="yy-mm-dd"||this.type=="yy-mm-dd hh"||this.type=="yy-mm-dd hh:mm"||this.type=="yy-mm-dd hh:mm:ss")&&(parseInt(this.data[1].data[tempArray[1]])==1||parseInt(this.data[1].data[tempArray[1]])==3||parseInt(this.data[1].data[tempArray[1]])==5||parseInt(this.data[1].data[tempArray[1]])==7||parseInt(this.data[1].data[tempArray[1]])==8||parseInt(this.data[1].data[tempArray[1]])==10||parseInt(this.data[1].data[tempArray[1]])==12)){
daySize = 31;
}else{
daySize = 30;
}
var temDay = [];
for(let x=1;x<=daySize;x++){
temDay.push(x<10?("0"+x):x)
}
this.data[2].data = temDay;
}
this.tempChangeObj=tempArray;
},
// Dial scrolling starts
pickStart($event){
this.isDataFinish = false;
},
// Dial scrolling ends
pickEnd(){
this.isDataFinish = true;
},
// Execute the component confirm button binding method
confirmFunction(){
this.changeObj = [];
// Assemble the output data
for(let x=0;x<this.data.length;x++){
this.changeObj.push({
name:this.data[x].name,
$name:this.data[x].$name,
value:this.data[x].data[this.tempChangeObj[x]]
})
}
console.log(this.changeObj)
// Determines whether a scrolling selection is in progress
if(!this.isDataFinish){
return false;
}
// 执行默认方法
this.$refs.popup.close();
// #ifdef MP-WEIXIN
// Determine whether the parent component has passed the confirmation method
// Differential treatment,用以为 this.$listenersObtained in the WeChat applet as {}对象
if(this.$parent[this.mpWeixinConfirm]){
// Execute the method passed by the parent component
this.$emit("confirm",this.changeObj);
}
return false;
// #endif
// Determine whether the parent component has passed the confirmation method
if(this.$listeners['confirm']){
// Execute the method passed by the parent component
this.$emit("confirm",this.changeObj);
}
},
// Execute the component cancel button binding method
cancelFunction(){
// #ifdef MP-WEIXIN
// Determine whether the parent component is passed to cancel the method
// Differential treatment,用以为 this.$listenersObtained in the WeChat applet as {}对象
if(this.$parent[this.mpWeixinCancel]){
// Execute the method passed by the parent component
this.$emit("cancel");
}else{
// 执行默认方法
this.$refs.popup.close();
}
return false;
// #endif
// Determine whether the parent component is passed to cancel the method
if(this.$listeners['cancel']){
// Execute the method passed by the parent component
this.$emit("cancel");
}else{
// 执行默认方法
this.$refs.popup.close();
}
},
}
}
</script>
<style>
.popupBox .dtitle{
position: relative;
}
.popupBox .dtitle .name{
text-align: center;
font-size: 36rpx;
font-weight: bold;
}
.popupBox .dtitle .close{
width: 54rpx;
height: 50rpx;
background: url("https://img.ssddjj.com/images/base/closeIcon.png") center center no-repeat;
background-size: 27rpx 25rpx;
position: absolute;
top: 0rpx;
right: 0rpx;
}
.popupBox .operate{
display: flex;
justify-content: space-evenly;
}
.popupBox .operate .btn{
width: 510rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: white;
border-radius: 40rpx;
}
.popupBox .operate .btn.cancel{
background-color: #666666;
}
.popupBox .operate .btn.confirm{
background-color: #fed7d9;
}
.popupBox .operate .btn.confirm.cur{
background-color: #FA2228;
}
/* Dial public style */
.picker-view {
/* width: 750rpx; */
height: 500rpx;
}
.picker-view .item {
height: 50px;
display: block;
line-height: 34px;
// #ifdef H5
line-height: 50px;
// #endif
align-items: center;
justify-content: center;
text-align: center;
}
// #ifdef H5
.uni-picker-view-indicator{
height: 50px;
line-height: 50px;
}
// #endif
/deep/.indicatorClassA{
height: 50px;
line-height: 50px;
border-top: 1rpx solid #FFA2A5;
border-bottom: 1rpx solid #FFA2A5;
}
/deep/.indicatorClassB{
height: 50px;
line-height: 50px;
}
</style>
Used in parent page：
页面展示
<view class="lis">
<view class="th">有效期</view>
<view class="lineBox">
<view class="lines">
<view class="row">
<view class="th" @click="openDatePicker(1)">起始时间</view>
<view class="uni-input" @click="openDatePicker(1)">{
{timeFilterStartTime?timeFilterStartTime:startInitDate}}</view>
</view>
</view>
</view>
</view>
<view class="lis">
<view class="th"></view>
<view class="lineBox">
<view class="lines">
<view class="row">
<view class="th" @click="openDatePicker(2)">结束时间</view>
<view class="uni-input" @click="openDatePicker(2)">{
{timeFilterEndTime?timeFilterEndTime:endInitDate}}</view>
</view>
</view>
</view>
</view>Because I have a start time and an introduction time So I wrote the component twice
The following are the components that the popup opens（记得importImport components!!）
<!-- Date time dial to select components -->
<datePicker
title="起始时间"
type="yy-mm-dd hh:mm:ss"
minDate="2020-05-20 10:20:20"
maxDate="2025-05-20 10:20:50"
:initDate="startInitDate"
ref="startDatePicker"
@confirm="confirmFunction($event)"
mpWeixinConfirm="confirmFunction"
>
</datePicker>
<!-- Date time dial to select components -->
<datePicker
title="结束时间"
type="yy-mm-dd hh:mm:ss"
minDate="2020-05-20 10:20:20"
maxDate="2025-05-20 10:20:50"
:initDate="endInitDate"
ref="endDatePicker"
@confirm="confirmFunction($event)"
mpWeixinConfirm="confirmFunction"
>
</datePicker>data数据：
data() {
return {
timeFilterStartTime: '', //Initialize the filter time start time
startInitDate:'', //Initialize the default start time
endInitDate:'', //Initialize the default end time
timeFilterEndTime: '', //Initialize the filter time end time
open:'', //Determine the time picker type
}
},These two fields are the values I want to display on the page
methods：
// 打开时间选择器
openDatePicker(type) {
this.open = type
if(this.open == 1){
this.$refs.startDatePicker.open();
}else{
this.$refs.endDatePicker.open();
}
},
// Time picker confirmation
confirmFunction($event){
if(this.open == 1){
this.timeFilterStartTime = $event[0].value+"-"+$event[1].value+"-"+$event[2].value+" "+$event[3].value+":"+$event[4].value+":"+$event[5].value;
}else{
this.timeFilterEndTime = $event[0].value+"-"+$event[1].value+"-"+$event[2].value+" "+$event[3].value+":"+$event[4].value+":"+$event[5].value;
}
},
// Get the initial start time
getStartInitDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var houer = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds();
this.startInitDate = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
this.timeFilterStartTime = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
},
// Get the initial end time
getEndInitDate(){
var date = new Date().getTime()+604800000;
date = new Date(date);
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var houer = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds();
this.endInitDate = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
this.timeFilterEndTime = year+"-"+(month>9?month:("0"+month))+"-"+(day>9?day:("0"+day))+" "+(houer?houer:("0"+houer))+":"+(minute?minute:("0"+minute))+":"+(second?second:("0"+second));
},
Remember to call gettime on page load
onLoad() {
// Get the default time
this.getStartInitDate();
this.getEndInitDate();
},看着好乱 But it shouldn't be a problem to use it directly！
边栏推荐
猜你喜欢
随机推荐
C-Eighty seven(背包+bitset)
Shiny04---DT和进度条在shiny中的应用
MobileNetV2架构解析
Unity—物理引擎+“武器模块”
window.open 全屏展示
Falsely bamboo brother today and found a localization of API to use tools
2022 Fusion Welding and Thermal Cutting Operation Certificate Exam Questions and Mock Exams
MAYA大炮建模
行业应用软件项目经理三步曲
Hash these knowledge you should also know
Mysql为什么 建立数据库失败
栈与队列的基本介绍和创建、销毁、出入、计算元素数量、查看元素等功能的c语言实现，以及栈的压入、弹出序列判断，栈结构的链式表示与实现
国家强制性灯具安全标准GB7000.1-2015
Flink Learning 10: Use idea to write WordCount and package and run
[Shanghai] Hiring .Net Senior Software Engineer & BI Data Warehouse Engineer (Urgent)
Tencent Business Security Post IDP Talk Summary
《基于R语言的自动数据收集》--第3章 XML和JSON
今天虚竹哥又发现了一款好用的国产化API工具
MySQL：order by排序查询，group by分组查询
Game Thinking 19: Multi-dimensional calculation related to games: point product, cross product, point-line-surface distance calculation