本篇内容主要讲解“微信小程序中的日期选择插件如何用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序中的日期选择插件如何用”吧!
效果图:
wxml
<view class="canlendarBgView">
<view class="canlendarView">
<view class="canlendarTopView">
<view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
<view class="leftView">《</view>
</view>
<view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
<view class="rightBgView" bindtap="handleCalendar" data-handle="next">
<view class="rightView">》</view>
</view>
</view>
<view class="weekBgView">
<view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class="dateBgView">
<view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
</view>
<view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
<view class="datesView {{index == todayIndex ? 'dateSelectView' : ''}}">{{item}}</view>
</view>
</view>
</view>
<view>点击日期选择</view>
</view>
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
})
}
}
})
到此,相信大家对“微信小程序中的日期选择插件如何用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.xuebuyuan.com/3287345.html