小程序日期时间选择器

从底部弹起的滚动选择器。类型有普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。

没有现成的时间和日期合并在一起的，从demo里面可以看到可以用多列选择器来实现。

wxml

  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><input value='{{time}}' placeholder='选择时间'/></picker>

js

const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
//获取年
for (let i = 2018; i <= date.getFullYear() + 5; i++) {
years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {i = "0" + i;
}
months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
if (i < 10) {i = "0" + i;
}
days.push("" + i);
}
//获取小时
for (let i = 0; i < 24; i++) {
if (i < 10) {i = "0" + i;
}
hours.push("" + i);
}
//获取分钟
for (let i = 0; i < 60; i++) {
if (i < 10) {i = "0" + i;
}
minutes.push("" + i);
}
Page({
data: {time: '',multiArray: [years, months, days, hours, minutes],multiIndex: [0, 9, 16, 10, 17],choose_year: '',
},
onLoad: function() {//设置默认的年份this.setData({choose_year: this.data.multiArray[0][0]})
},
//获取时间日期
bindMultiPickerChange: function(e) {// console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({multiIndex: e.detail.value})const index = this.data.multiIndex;const year = this.data.multiArray[0][index[0]];const month = this.data.multiArray[1][index[1]];const day = this.data.multiArray[2][index[2]];const hour = this.data.multiArray[3][index[3]];const minute = this.data.multiArray[4][index[4]];// console.log(`${year}-${month}-${day}-${hour}-${minute}`);this.setData({time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute})// console.log(this.data.time);
},
//监听picker的滚动事件
bindMultiPickerColumnChange: function(e) {//获取年份if (e.detail.column == 0) {let choose_year = this.data.multiArray[e.detail.column][e.detail.value];console.log(choose_year);this.setData({choose_year})}//console.log('修改的列为', e.detail.column, '，值为', e.detail.value);if (e.detail.column == 1) {let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);let temp = [];if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份for (let i = 1; i <= 31; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份for (let i = 1; i <= 30; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});} else if (num == 2) { //判断2月份天数let year = parseInt(this.data.choose_year);console.log(year);if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {for (let i = 1; i <= 29; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});} else {for (let i = 1; i <= 28; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});}}console.log(this.data.multiArray[2]);}var data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;this.setData(data);
},
})

小程序日期时间选择器相关推荐

微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...
微信小程序-日期时间选择器
我在官方表单组件的基础上改出了几种比较常用的日期(时间)选择器,为了更清晰,我没给任何样式,wxss可根据个人喜好添加. 一.picker-view (嵌入页面的滚动选择器) 注意:其中只可放置组件, ...
【转】微信小程序日期时间选择器（年月日时分秒）
公司需要用到秒但是小程序提供的只到分钟 vantui也只到分钟,真的是有问题啊从网上找了一个试了试可以用如下: <picker mode="multiSelector" ...
微信小程序 - 日期时间选择器（年月日时分秒）
前言您只需要跟着步骤一路复制粘贴,最后看一下使用示例即可. 由于微信官方的 <picker> 组件不支持同时选择年月日时分, 所以在此官方组件上再次封装,可靠性毋庸置疑. 您将获得一个 ...
js 微信小程序日期时间转时间戳
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信小程序开发交流qq群 173683895 日期转换成时间戳:new Date('2018-09-03 ...
微信小程序时间加法_微信小程序-日期时间计算
//new Date():系统当前时间,先将当前时间转化为时间戳的形式 var timestamp = Date.parse(new Date()); //想在系统当前时间基础上,想加的天数或小时 v ...
小程序日期（日历）时间选择器组件
封装一个小程序日期(日历)时间选择器组件简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 ...
小程序日期加时间筛选组件
小程序日期加时间筛选组件新建component->date-time-picker .wxml <picker mode="multiSelector" class= ...

小程序日期时间选择器

wxml

js

小程序日期时间选择器相关推荐

最新文章

热门文章