黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

如何开发一个微信小程序的日期选择器

来源:黔优媒体网   时间:2024-09-19

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

就是在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: #39;成功 #39;,
icon: #39;success #39;,
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: #39;加载中... #39;,
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 + #39;年 #39; + setMonth + #39;月 #39; + setDay + #39;日 #39;);
if (setMonth === 2) {
if (setYear % 4 === 0 setYear % 100 !== 0) {
// console.log( #39;闰年 #39;)
this.setDays(28);
} else {
// console.log( #39;非闰年 #39;)
this.setDays(29);
}else {
if (this.contains(bigMonth, setMonth)){
this.setDays(31)
}else {
this.setDays(30)
this.setData({
year: setYear,
month: setMonth,
day: setDay
})

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

 !---wxml--- 与官方文档是一样的!
 view >

以上就是如何开发一个微信小程序的日期选择器的详细内容,更多请关注php中文网其它相关文章!

微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:如何开发一个微信小程序的日期选择器;欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)