一个简单的小程序点击显示和隐藏的时间搜索框

最新推荐文章于 2023-05-30 23:15:55 发布

sole.mjc

最新推荐文章于 2023-05-30 23:15:55 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序时分秒的检索

本文链接：https://blog.youkuaiyun.com/mjcays/article/details/84976323

本文介绍如何在小程序中实现一个点击显示和隐藏的时间搜索框，包括时间选择器的创建和时间格式处理，以及在页面加载时初始化时间和触发事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击右侧上的搜索显示和隐藏时间搜索框

先在utils 中单独写一个js做时间数组保存；

timePicker.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 getNewTimeArry() {

// 当前时间的处理

var newDate = new Date();

var hour = withData(newDate.getHours()),

minu = withData(newDate.getMinutes()),

seco = withData(newDate.getSeconds());

return [hour, minu, seco];

}

function timePicker(date) {

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

var time = [];

var timeArray = [[], [], []];

// 默认开始显示数据

var defaultTime = date ? [...date.split(':')] : getNewTimeArry();

// 处理联动列表数据

/*时分秒*/

timeArray[0] = getLoopArray(0, 23);

timeArray[1] = getLoopArray(0, 59);

timeArray[2] = getLoopArray(0, 59);

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

time.push(current.indexOf(defaultTime[index]));

});

return {

timeArray: timeArray,

time:time,

}

function timeResult(time){

var timeArray = time;

if (timeArray[0] < 10){

timeArray[0] = '0' +timeArray[0];

}

if (timeArray[1] < 10) {

timeArray[1] = '0' + timeArray[1];

}

if (timeArray[2] < 10) {

timeArray[2] = '0' + timeArray[2];

}

return timeArray[0] + ":" + timeArray[1] + ":" + timeArray[2];

}

module.exports = {

timePicker: timePicker,

timeResult: timeResult,

}

在页面js中调用timePicker.js

var util = require('../../utils/util.js');

var timePicker = require('../../utils/timePicker.js');

//获取系统当前日期时间

var dateNow = new Date();

//传递到https协议中的时间戳

var timeStamp = null;

Page({

/**

* 页面的初始数据

data: {

showSearch: true,

startDate: util.formatDate(dateNow),

startTime: util.formatTime(dateNow),

endDate: util.formatDate(dateNow),

endTime: util.formatTime(dateNow),

startTimeArray: null,

endTimeArray:null,

onLoad: function (options) {

showSearch: (options.showSearch == "true" ? true : false)

// 获取时分秒数组，在页面中显示

var obj = timePicker.timePicker(util.formatTime(dateNow));

console.log(obj);

this.setData({

startTimeArray: obj.timeArray,

endTimeArray: obj.timeArray,

startTime:obj.time,

endTime:obj.time,

});

openSearch: function () {

var that = this;

that.setData({

showSearch: !that.data.showSearch,

})

startDateChange: function (e) {

this.setData({

startDate: e.detail.value,

endDate: e.detail.value

})

startTimeColumn(e) {

var startTimeArr = this.data.startTime;

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

this.setData({

startTime: startTimeArr

});

startTimeChange: function (e) {

var startTimeArr = this.data.startTime;

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

this.setData({

startTime: startTimeArr

});

endDateChange: function (e) {

this.setData({

endDate: e.detail.value

})

endTimeColumn(e) {

var endTimeArr = this.data.endTime;

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

this.setData({

endTime: endTimeArr

});

endTimeChange: function (e) {

var endTimeArr = this.data.endTime;

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

this.setData({

endTime: endTimeArr

});

formSubmit: function (e) {

//关闭查询表单

var that = this;

that.setData({

showSearch: !that.data.showSearch,

})

timeStamp = e.detail.value.startDate + " " + e.detail.value.startTime + " - " + e.detail.value.endDate + " " + e.detail.value.endTime;

console.log(timeStamp);

cancel: function () {

//关闭查询表单

var that = this;

that.setData({

showSearch: !that.data.showSearch,

})

}

})

创建页面date4.wxml

检索

</view>

</view>

</picker>

</view>

</view>

</picker>

</view>

</view>

</picker>

</view>

</view>

</picker>

</view>

</view>

</form>

</view>

样式wxss

.openSearch{

padding: 10px 10px 0 0;

float: right;

}

/*隐藏样式*/

.hide{

display: none;

font-size: 15px;

}

/*显示样式*/

.show{

display: block;

font-size: 15px;

}

/*关闭按钮样式*/

.cancel{

padding: 0px 5px 0px 0px;

float: right;

}

/*检索框整体样式*/

.drawer_box {

width: 650rpx;

overflow: hidden;

position: fixed;

top: 50%;

left: 0;

z-index: 2;

background: #FAFAFA;

margin: -150px 50rpx 0 50rpx;

border-radius: 3px;

}

/*标题样式*/

.drawer_title{

padding:15px;

font: 20px "microsoft yahei";

text-align: center;

}

/*检索框内容部分样式*/

.drawer_content {

height: 230px;

overflow-y: scroll; /*超出父盒子高度可滚动*/

}

/*检索样式-检索按钮*/

.btn-area{

padding: 10px 0px;

}

.btn_ok{

padding: 10px;

font: 20px "microsoft yahei";

text-align: center;

border-top: 1px solid #E8E8EA;

color: #3CC51F;

}

/*输入框顶部和底部边距*/

.top{

padding-top:8px;

}

.bottom {

padding-bottom:8px;

}

/*字体样式*/

.title {

height: 30px;

line-height: 30px;

width: 160rpx;

text-align: center;

display: inline-block;

font: 300 28rpx/30px "microsoft yahei";

}

/*输入框样式*/

.input_base {

border: 2rpx solid #ccc;

padding-left: 10rpx;

margin-right: 50rpx;

}

.input_h30{

height: 30px;

line-height: 30px;

}

/*input标签*/

input {

font: 12px "microsoft yahei";

background: #fff;

color:#000 ;

}

.grid { display: -webkit-box; display: box; }

.col-0 {-webkit-box-flex:0;box-flex:0;}

.col-1 {-webkit-box-flex:1;box-flex:1;}

.fl { float: left;}

.fr { float: right;}