微信小程序的日期选择器

客官°小女子只卖身不卖艺 2022-06-08 12:54 299阅读 0赞

关于微信小程序中的日期选择器大家用过都会发现有个很大的问题，

就是在2月的时候会有31天，没有进行对闰年的判断等各种情况。看了

官方文档提供的源码后进行了一些修改，测试修复了上面所说的bug！

下面源码：

\-----------------------我是分割线--------------------------

<!---js---》

const date =  new Date(); //获取系统日期

const years = \[\]

const months = \[\]

const days = \[\]

const bigMonth = \[ 1, 3, 5, 7, 8, 10, 12\]

//将日期分开写入对应数组

//年

for ( let i = 1990; i <= date.getFullYear(); i++) \{

years.push(i);

//月

for ( let i = 1; i <= 12; i++) \{

months.push(i);

//日

for ( let i = 1; i <= 31; i++) \{

days.push(i);

Page(\{

/\*\*

\* 页面的初始数据

\*/

data: \{

years: years,

year: date.getFullYear(),

months: months,

month: 2,

days: days,

day: 2,

value: \[ 9999,  1, 1\],

\},

showToask: function() \{

wx.showToast(\{

title: '成功',

icon: 'success',

duration: 2000

\})

\},

//判断元素是否在一个数组

contains: function(arr, obj) \{

var i = arr.length;

while(i--) \{

if (arr\[i\] === obj) \{

return true;

return false;

\},

setDays: function (day) \{

const temp = \[\];

for( let i = 1; i<=day; i++) \{

temp.push(i)

this.setData(\{

days: temp,

\})

\},

showLoading: function () \{

wx.showLoading(\{

title: '加载中...',

\}),

setTimeout( function () \{

wx.hideLoading()

\}, 2000)

\},

//选择滚动器改变触发事件

bindChange: function (e) \{

const val = e.detail.value;

//判断月的天数

const setYear =  this.data.years\[val\[ 0\]\];

const setMonth =  this.data.months\[val\[ 1\]\];

const setDay =  this.data.days\[val\[ 2\]\]

// console.log(setYear + '年' + setMonth + '月' + setDay + '日');

//闰年

if (setMonth ===  2) \{

if (setYear %  4 === 0 && setYear %  100 !== 0) \{

// console.log('闰年')

this.setDays( 28);

\} else \{

// console.log('非闰年')

this.setDays( 29);

\} else \{

//大月

if ( this.contains(bigMonth, setMonth))\{

this.setDays( 31)

\} else \{

this.setDays( 30)

this.setData(\{

year: setYear,

month: setMonth,

day: setDay

\})

\-------------------------我是分割线--------------------

与官方文档是一样的！

< view  style= 'text-align:center;margin-top:30px;'>\{ \{year\}\}年\{ \{month\}\}月\{ \{day\}\}日 </ view >

< picker-view indicator-style= "height:50px;" style= 'width:100%;height:300px;text-align:center' value= "\{ \{value\}\}" bindchange= "bindChange">

< picker-view-column >

< view  wx:for= "\{ \{years\}\}"  wx:key= "year"  style= 'line=height:50px;'>

\{ \{item\}\}年

</ view >

</ picker-view-column >

< picker-view-column >

< view  wx:for= "\{ \{months\}\}"  wx:key= "month">

\{ \{item\}\}月

</ view >

</ picker-view-column >

< picker-view-column >

< view  wx:for= "\{ \{days\}\}"  wx:key= "day">

\{ \{item\}\}日

</ view >

</ picker-view-column >

</ picker-view >

</ view >

微信小程序的日期选择器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序- 选择器合并时间和日期

相关微信小程序开发之选择器时间选择器日期选择器地区选择器

相关微信小程序的时间选择器

相关微信小程序自制多列选择器

相关微信小程序日期选择器显示当前系统年月日时分

相关微信小程序日期选择器显示当前系统年月日时分

相关微信小程序的日期选择器

相关微信小程序----日期时间选择器(年月日时分秒)

相关微信小程序、mpvue小程序 picker-view日期选择器的使用

相关微信小程序picker日期-时间段选择