微信小程序中的日期选择插件如何用

本篇内容主要讲解"微信小程序中的日期选择插件如何用"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"微信小程序中的日期选择插件如何用"吧!

效果图：

wxml

          《      {{cur_year || "--"}} 年 {{cur_month || "--"}} 月       》          {{item}}                 {{item}}       点击日期选择

js

//index.js//获取应用实例Page({ data: {  hasEmptyGrid: false,  cur_year: '',  cur_month: '', }, onLoad(options) {  this.setNowDate(); },  dateSelectAction: function (e) {  var cur_day = e.currentTarget.dataset.idx;  this.setData({   todayIndex: cur_day  })  console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`); },  setNowDate: function () {  const date = new Date();  const cur_year = date.getFullYear();  const cur_month = date.getMonth() + 1;  const todayIndex = date.getDate() - 1;  console.log(`日期：${todayIndex}`)  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];  this.calculateEmptyGrids(cur_year, cur_month);  this.calculateDays(cur_year, cur_month);  this.setData({   cur_year: cur_year,   cur_month: cur_month,   weeks_ch,   todayIndex,  }) },  getThisMonthDays(year, month) {  return new Date(year, month, 0).getDate(); }, getFirstDayOfWeek(year, month) {  return new Date(Date.UTC(year, month - 1, 1)).getDay(); }, calculateEmptyGrids(year, month) {  const firstDayOfWeek = this.getFirstDayOfWeek(year, month);  let empytGrids = [];  if (firstDayOfWeek > 0) {   for (let i = 0; i < firstDayOfWeek; i++) {    empytGrids.push(i);   }   this.setData({    hasEmptyGrid: true,    empytGrids   });  } else {   this.setData({    hasEmptyGrid: false,    empytGrids: []   });  } }, calculateDays(year, month) {  let days = [];   const thisMonthDays = this.getThisMonthDays(year, month);   for (let i = 1; i <= thisMonthDays; i++) {   days.push(i);  }   this.setData({   days  }); }, handleCalendar(e) {  const handle = e.currentTarget.dataset.handle;  const cur_year = this.data.cur_year;  const cur_month = this.data.cur_month;  if (handle === 'prev') {   let newMonth = cur_month - 1;   let newYear = cur_year;   if (newMonth < 1) {    newYear = cur_year - 1;    newMonth = 12;   }    this.calculateDays(newYear, newMonth);   this.calculateEmptyGrids(newYear, newMonth);    this.setData({    cur_year: newYear,    cur_month: newMonth   })   } else {   let newMonth = cur_month + 1;   let newYear = cur_year;   if (newMonth > 12) {    newYear = cur_year + 1;    newMonth = 1;   }    this.calculateDays(newYear, newMonth);   this.calculateEmptyGrids(newYear, newMonth);    this.setData({    cur_year: newYear,    cur_month: newMonth   })  } }})

到此，相信大家对"微信小程序中的日期选择插件如何用"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！