小程序日期时间选择组件无bug版,不服来用

2024-05-10 09:18

本文主要是介绍小程序日期时间选择组件无bug版,不服来用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

该组件达到一个目的,就是日期和时间共同选择,时间精确到分钟。

<picker mode="multiSelector" bindchange="bindMultiPickerChangedb" bindcolumnchange="bindMultiPickerColumnChangedb" range="{{dateTimeArray1}}" value="{{dateTime1}}">

       <view class="weui-label fontlittle">取车时间</view>

      <view class="weui-label fontcolor">{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}}</view>

      <view class="weui-label fontlittle">{{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}</view>

</picker>

js代码:

const date = new Date();

Page({

      data:{

             "dateTimeArray1": [],

             "dateTime1":null,

             "dateTimeArray2": [],

             "dateTime2": null,

             "begintime":"",

             "endtime":"",

      },

     onLoad: function (options) {

            var that = this;

           if (wx.getStorageSync('begintime')) {

                     that.setData({

                            begintime: wx.getStorageSync('begintime')

                     });

           }else{

                     that.setData({

                            begintime: date.getFullYear() + '-' + (date.getMonth()) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':00'

                     });

           }

           var obj1 = app.dateTimePicker.dateTimePicker(date.getFullYear(), date.getFullYear() + 2,that.data.begintime);

           that.setData({

                   dateTimeArray1: obj1.dateTimeArray,

                   dateTime1: obj1.dateTime,

           });

    },

    bindMultiPickerChangedb:function(e){

           var that = this;

           that.setData({ dateTime1: e.detail.value });

    },

    bindMultiPickerColumnChangedb:function(e){

           var that = this;

           var arr = that.data.dateTime1;

           if(e.detail.column==1){

                    var rm = e.detail.value + 1;

                    var maxday = 31;

                    if(rm == 1||rm == 3||rm == 5||rm == 7||rm == 8||rm == 10||rm == 12){

                             maxday = 31;

                    }

                    if (rm == 4 || rm == 6 || rm == 9 || rm == 11) {

                            maxday = 30;

                    }

                    if (rm == 2){

                            maxday = (arr[0] % 400 == 0 || (arr[0] % 4 == 0 && arr[0] % 100 != 0))?29:28;

                    }

                    var array = [];

                    for (var i = 1; i <= maxday; i++) {

                          array.push(i < 10 ? '0' + i : '' + i);

                    }

                    that.data.dateTimeArray1[2] = array;

                    that.setData({

                             dateTimeArray1: that.data.dateTimeArray1,

                    });

           }

           var dateArr = that.data.dateTimeArray1;

           arr[e.detail.column] = e.detail.value;

           that.setData({

                     //dateTimeArray1: dateArr,

                    dateTime1: arr

            });

            var year = that.data.dateTimeArray1[0][that.data.dateTime1[0]];

            var month = that.data.dateTimeArray1[1][that.data.dateTime1[1]];

            var day = that.data.dateTimeArray1[2][that.data.dateTime1[2]];

            var hour = that.data.dateTimeArray1[3][that.data.dateTime1[3]];

            var minute = that.data.dateTimeArray1[4][that.data.dateTime1[4]];

            that.setData({

                     begintime: year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'

            });

           wx.setStorageSync('begintime', that.data.begintime);

   }

})

dateTimePicker.js

function withData(param) {

return param < 10 ? '0' + param : '' + param;

}

function getLoopArray(start, end) {

var start = start || 0;

var end = end || 1;

var array = [];

for (var i = start; i <= end; i++) {

array.push(withData(i));

}

return array;

}

function getMonthDay(year, month) {

var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;

switch (month) {

case '01':

case '03':

case '05':

case '07':

case '08':

case '10':

case '12':

array = getLoopArray(1, 31)

break;

case '04':

case '06':

case '09':

case '11':

array = getLoopArray(1, 30)

break;

case '02':

array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)

break;

default:

array = '月份格式不正确,请重新输入!'

}

return array;

}

function getNewDateArry() {

// 当前时间的处理

var newDate = new Date();

var year = withData(newDate.getFullYear()),

mont = withData(newDate.getMonth() + 1),

date = withData(newDate.getDate()),

hour = withData(newDate.getHours()),

minu = withData(newDate.getMinutes()),

seco = withData(newDate.getSeconds());

 

return [year, mont, date, hour, minu, seco];

}

function dateTimePicker(startYear, endYear, date) {

// 返回默认显示的数组和联动数组的声明

//var dateTime = [], month = [],dateTimeArray = [[], [], [], [], [], []];

var dateTime = [], month = [],dateTimeArray = [[], [], [], [], []];

var start = startYear || 1978;

var end = endYear || 2100;

// 默认开始显示数据

var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();

// 处理联动列表数据

month[1] = getMonthDay(defaultDate[0], 1);

month[2] = getMonthDay(defaultDate[0], 2);

month[3] = getMonthDay(defaultDate[0], 3);

month[4] = getMonthDay(defaultDate[0], 4);

month[5] = getMonthDay(defaultDate[0], 5);

/*年月日 时分秒*/

dateTimeArray[0] = getLoopArray(start, end);

dateTimeArray[1] = getLoopArray(1, 12);

dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);

dateTimeArray[3] = getLoopArray(0, 23);

dateTimeArray[4] = getLoopArray(0, 59);

//dateTimeArray[5] = getLoopArray(0, 59);

 

dateTimeArray.forEach((current, index) => {

dateTime.push(current.indexOf(defaultDate[index]));

});

//console.log(dateTimeArray);

return {

dateTimeArray: dateTimeArray,

dateTime: dateTime

}

}

module.exports = {

dateTimePicker: dateTimePicker,

getMonthDay: getMonthDay

}

 

 

这篇关于小程序日期时间选择组件无bug版,不服来用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/976024

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

go中的时间处理过程

《go中的时间处理过程》:本文主要介绍go中的时间处理过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 获取当前时间2 获取当前时间戳3 获取当前时间的字符串格式4 相互转化4.1 时间戳转时间字符串 (int64 > string)4.2 时间字符串转时间

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

Java日期类详解(最新推荐)

《Java日期类详解(最新推荐)》早期版本主要使用java.util.Date、java.util.Calendar等类,Java8及以后引入了新的日期和时间API(JSR310),包含在ja... 目录旧的日期时间API新的日期时间 API(Java 8+)获取时间戳时间计算与其他日期时间类型的转换Dur

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解