小程序设计软件_微信小程序自界说带价格显示日历效果

微信小程序自定义带价格显示日历效果     -Love   这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序自定义日历效果的具体代码,供大家参考,具体内容如下

JS代码:

var Moment = require("../../utils/moment.js");
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
Page({
 data: {
 year: '',
 month: '',
 day: '',
 days: {},
 systemInfo: {},
 weekStr: ['日', '一', '二', '三', '四', '五', '六'],
 checkDate:[]
 onLoad: function(options) {
 var _this = this;
 let now = new Date();
 let year = now.getFullYear();
 let month = now.getMonth() + 1;
 // 页面初始化 options为页面跳转所带来的参数
 this.createDateListData();
 this.setData({
 year: year,
 month: month
 wx.getSystemInfo({
 success: function(res) {
 _this.setData({
 systemInfo: res,
 onReady: function() {
 // 页面渲染完成
 onShow: function() {
 /**创建日历数据 */
 createDateListData: function(setYear, setMonth) {
 //全部时间的月份都是按0~11基准,显示月份才+1
 let dateArr = []; //需要遍历的日历数组数据
 let arrLen = 0; //dateArr的数组长度
 let now = setYear new Date(setYear, setMonth) : new Date();
 let year = setYear || now.getFullYear();
 let nextYear = 0;
 let month = setMonth || now.getMonth();
 //没有+1方便后面计算当月总天数
 let nextMonth = (month + 1) 11 1 : (month + 1);
 console.log("当前选中月nextMonth:" + nextMonth);
 //目标月1号对应的星期
 let startWeek = this.getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay(); 
 console.log("目标月1号对应的星期startWeek:" + startWeek);
 //获取目标月有多少天
 let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate(); 
 console.log("获取目标月有多少天dayNums:" + dayNums);
 let obj = {};
 let num = 0;
 if (month + 1 11) {
 nextYear = year + 1;
 dayNums = new Date(nextYear, nextMonth, 0).getDate();
 for (var j = -startWeek + 1; j = dayNums; j++) {
 var tempWeek = -1;
 if (j 0) {
 tempWeek = this.getWeek(year, nextMonth, j);
 //console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek);
 var clazz = '';
 if (tempWeek == 0 || tempWeek == 6)
 clazz = 'week'
 if (j DATE_DAY year == DATE_YEAR nextMonth == DATE_MONTH)
 //当天之前的日期不可用
 clazz = 'unavailable ' + clazz;
 else
 clazz = '' + clazz
 /**如果当前日期已经选中,则变色 */
 var date = year + "-" + nextMonth + "-" + j;
 var index = this.checkItemExist(this.data.checkDate, date);
 if (index != -1) {
 clazz = clazz + ' active';
 dateArr.push({
 day: j,
 class: clazz,
 amount:'¥99.8'
 this.setData({
 days: dateArr
 * 上个月
 lastMonthEvent:function(){
 //全部时间的月份都是按0~11基准,显示月份才+1
 let year = this.data.month - 2 0 this.data.year - 1 : this.data.year;
 let month = this.data.month - 2 0 11 : this.data.month - 2;
 this.setData({
 year: year,
 month: (month + 1)
 this.createDateListData(year, month);
 * 下个月
 nextMonthEvent:function(){
 //全部时间的月份都是按0~11基准,显示月份才+1
 let year = this.data.month 11 this.data.year + 1 : this.data.year;
 let month = this.data.month 11 0 : this.data.month;
 this.setData({
 year: year,
 month: (month + 1)
 this.createDateListData(year, month);
 * 获取月的总天数
 getTotalDayByMonth: function(year, month) {
 month = parseInt(month, 10);
 var d = new Date(year, month, 0);
 return d.getDate();
 * 获取月的第一天是星期几
 getWeek: function(year, month, day) {
 var d = new Date(year, month - 1, day);
 return d.getDay();
 * 点击日期事件
 onPressDateEvent: function(e) {
 var {
 year,
 month,
 day,
 amount
 } = e.currentTarget.dataset;
 console.log("当前点击的日期:" + year + "-" + month + "-" + day);
 //当前选择的日期为同一个月并小于今天,或者点击了空白处(即day 0),不执行
 if ((day DATE_DAY month == DATE_MONTH) || day = 0)
 return;
 this.renderPressStyle(year, month, day, amount);
 renderPressStyle: function (year, month, day, amount) {
 var days = this.data.days;
 //渲染点击样式
 for (var j = 0; j days.length; j++) {
 var tempDay = days[j].day;
 if (tempDay == day) {
 var date = year + "-" + month + "-" + day;
 var obj = {
 day: date,
 amount: amount
 var checkDateJson = this.data.checkDate;
 var index = this.checkItemExist(checkDateJson, date);
 if (index == -1) {
 checkDateJson.push(obj);
 days[j].class = days[j].class + ' active';
 } else {
 checkDateJson.splice(index, 1);
 days[j].class = days[j].class.replace('active',' ');
 this.setData({
 checkDate: checkDateJson
 console.log(JSON.stringify(this.data.checkDate));
 break;
 this.setData({
 days: days
 /**检查数组中是否存在该元素 */
 checkItemExist: function (arr,value){
 for (var i = 0; i arr.length; i++) {
 if (value === arr[i].day) {
 return i;
 return -1;

WXML代码

 view image bindtap='lastMonthEvent' src='../../image/left.png' /image {{year}}年{{month}}月 image src='../../image/right.png' bindtap='nextMonthEvent' /image /view 
 view /view 
 view 
 view 
 view 
 text wx:for="{{weekStr}}" wx:key="{{index}}" 
 text wx:if="{{item !=='日' item !=='六'}}" {{item}} /text 
 text wx:if="{{item ==='日' || item ==='六'}}" {{item}} /text 
 /text 
 /view 
 /view 
 view 
 view class="date-day {{item.day =0 'bgwhite':item.class}}" data-year="{{year}}" data-month="{{month}}" data-day="{{item.day}}" data-amount="{{item.amount}}"bindtap="onPressDateEvent"
 wx:for="{{days}}" wx:key="{{index}}" 
 view 
 text {{item.day 0 (item.daytext item.daytext:item.day):''}} /text 
 text wx:if='{{item.day 0}}' {{item.amount}} /text 
 /view 
 /view 
 /view 
 /view 

WXSS代码

/* pages/dateSelect/dateSelect.wxss */
.date-day {
 display: flex;
 padding: 5px;
 text-align: center;
 justify-content: center;
 align-items: center;
 flex-direction: column;
.date-day.bgitem {
 background-color: #d8ecf9;
.date-day.active {
 background: #099fde;
 color: #fff;
.date-day.unavailable {
 color: #aaa;
.date-week {
 display: flex;
 justify-content: center;
 align-content: center;
 margin: 5px;
.week {
 color: #099fde;
.row {
 display: flex;
 flex-direction: row;
.item-days {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 font-size: 35rpx;
.amount{
 font-size: 30rpx;
.bgwhite {
 background-color: #fff;
.date-year-month {
 text-align: center;
 font-size: 35rpx;
 height: 100rpx;
 line-height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
.date-year-month image{
 height: 50rpx;
 width: 50rpx;
 margin: 0 30rpx;

moment.js

var Moment = function (date) {
 var date;
 if (date)
 this.date = new Date(date);
 else
 this.date = new Date();
 return this;
 * 对Date的扩展,将 Date 转化为指定格式的String 
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 
 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
 * eg: 
 * "yyyy-MM-dd hh:mm:ss.S" == :04.423 
 * "yyyy-M-d h:m:s.S" == :4.18 
 * "yyyy-MM-dd E HH:mm:ss" ==  二  
 * "yyyy-MM-dd EE hh:mm:ss" ==  周二  
 * "yyyy-MM-dd EEE hh:mm:ss" ==  星期二  
Moment.prototype.format = function (format) {
 var date = this.date;
 var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配) 
 r.exec('');
 s1=RegExp.$1;s2=RegExp.$2;s3=RegExp.$3;//结果为1985 10 15
 if (typeof date === 'string')
 date = this.parse(date);
 var o = {
 "M+": date.getMonth() + 1, //月份 
 "(d+|D+)": date.getDate(), //日 
 "(h+|H+)": date.getHours(), //小时 
 "m+": date.getMinutes(), //分 
 "s+": date.getSeconds(), //秒 
 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
 "S": date.getMilliseconds() //毫秒 
 var week = {
 "0": "/u65e5",
 "1": "/u4e00",
 "2": "/u4e8c",
 "3": "/u4e09",
 "4": "/u56db",
 "5": "/u4e94",
 "6": "/u516d"
 if (/(y+|Y+)/.test(format))
 format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
 if (/(E+)/.test(format))
 format = format.replace(RegExp.$1, ((RegExp.$1.length 1) (RegExp.$1.length 2 "/u661f/u671f" : "/u5468") : "") + week[date.getDay() + ""]);
 for (var k in o) {
 if (new RegExp("(" + k + ")").test(format))
 format = format.replace(RegExp.$1, (RegExp.$1.length == 1) (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 return format;
Moment.prototype.parse = function () {
 return this.date;
 * 计算两个日期差差
 * return day
Moment.prototype.differ = function (date) {
 var time1 = this.date.getTime();
 if (typeof date === 'string')
 date = new Date(date);
 var time1 = this.date.getTime();
 var time2 = date.getTime();
 var differ = Math.ceil((time1 - time2) / (1000 * 3600 * 24));//除不尽时,向上取整
 return differ;
Moment.prototype.add = function (num, optionType) {
 var date = this.date;
 if ('day' === optionType) {
 date.setDate(date.getDate() + num);
 if ('month' === optionType) {
 date.setMonth(date.getMonth() + num);
 if ('year' === optionType) {
 date.setFullYear(date.getFullYear() + num);
 this.date = date;
 return this;
Moment.prototype.before = function (date) {
 return this.date.getTime() new Date(date).getTime()
Moment.prototype.after = function (date) {
 return this.date.getTime() date.getTime()
module.exports = function (date) {
 return new Moment(date);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读