微信小程序中日历/日期选择插件怎么用
这篇文章给大家分享的是有关微信小程序中日历/日期选择插件怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
我们提供的服务有:网站设计制作、成都做网站、微信公众号开发、网站优化、网站认证、钟祥ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的钟祥网站制作公司
具体内容如下
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 }) } } })
感谢各位的阅读!关于“微信小程序中日历/日期选择插件怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章题目:微信小程序中日历/日期选择插件怎么用
文章起源:http://ybzwz.com/article/jecdpc.html