您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)微信小程序中怎么自定義一個帶價格的顯示的日歷效果,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
具體內(nèi)容如下
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為頁面跳轉(zhuǎn)所帶來的參數(shù) this.createDateListData(); this.setData({ year: year, month: month }) wx.getSystemInfo({ success: function(res) { _this.setData({ systemInfo: res, }); } }) }, onReady: function() { // 頁面渲染完成 }, onShow: function() { }, /**創(chuàng)建日歷數(shù)據(jù) */ createDateListData: function(setYear, setMonth) { //全部時間的月份都是按0~11基準,顯示月份才+1 let dateArr = []; //需要遍歷的日歷數(shù)組數(shù)據(jù) let arrLen = 0; //dateArr的數(shù)組長度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear || now.getFullYear(); let nextYear = 0; let month = setMonth || now.getMonth(); //沒有+1方便后面計算當月總天數(shù) 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 /**如果當前日期已經(jīng)選中,則變色 */ 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); }, /* * 獲取月的總天數(shù) */ 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),不執(zhí)行 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 }); }, /**檢查數(shù)組中是否存在該元素 */ 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 > <view class="layout-flex row" > <text class="date-week" 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" > <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 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 轉(zhuǎn)化為指定格式的String * 月(M)、日(d)、12小時(h)、24小時(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 個占位符 * 年(y)可以用 1-4 個占位符,毫秒(S)只能用 1 個占位符(是 1-3 位的數(shù)字) * 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;//結(jié)果為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); }
以上就是微信小程序中怎么自定義一個帶價格的顯示的日歷效果,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。