微信小程序自定义带价格显示日历效果

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

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 class="date-year-month"><image bindtap='lastmonthevent' src='../../image/left.png'></image>{{year}}年{{month}}月<image src='../../image/right.png' bindtap='nextmonthevent' ></image></view>
 
<view ></view>
<view>
<view style="background:#f5f5f5;font-size: 30rpx; ">
 <view class="layout-flex row" style="background-color: #f5f5f5;">
 <text class="date-week" style="width:{{systeminfo.windowwidth/7-10}}px;height:20px" wx:for="{{weekstr}}" wx:key="{{index}}">
     <text wx:if="{{item !=='日' && item !=='六'}}">{{item}}</text>
 <text wx:if="{{item ==='日' || item ==='六'}}" class="week">{{item}}</text>
 </text>
 </view>
</view>
 <view class="layout-flex row" style="flex-wrap: wrap;margin-top:30rpx;">
 <view class="date-day {{item.day<=0?'bgwhite':item.class}}" style="width:{{systeminfo.windowwidth/7-10}}px;height:{{systeminfo.windowwidth/7}}px;" data-year="{{year}}" data-month="{{month}}" data-day="{{item.day}}" data-amount="{{item.amount}}"bindtap="onpressdateevent"
  wx:for="{{days}}" wx:key="{{index}}">
  <view class='item-days'>
  <text>{{item.day>0?(item.daytext?item.daytext:item.day):''}}</text>
  <text class='amount' 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" ==> 2006-07-02 08:09:04.423 
 * "yyyy-m-d h:m:s.s" ==> 2006-7-2 8:9:4.18  
 * "yyyy-mm-dd e hh:mm:ss" ==> 2009-03-10 二 20:09:04  
 * "yyyy-mm-dd ee hh:mm:ss" ==> 2009-03-10 周二 08:09:04  
 * "yyyy-mm-dd eee hh:mm:ss" ==> 2009-03-10 星期二 08:09:04 
 */
moment.prototype.format = function (format) {
 var date = this.date;
 /*
  var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)  
  r.exec('1985-10-15');
  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);
}

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