微信小程序自定義帶價(jià)格顯示日歷效果
更新時(shí)間：2021年04月27日 11:44:23 作者：only-Love
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義帶價(jià)格顯示日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
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為頁面跳轉(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) {
//全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+1
let dateArr = []; //需要遍歷的日歷數(shù)組數(shù)據(jù)
let arrLen = 0; //dateArr的數(shù)組長(zhǎng)度
let now = setYear ? new Date(setYear, setMonth) : new Date();
let year = setYear || now.getFullYear();
let nextYear = 0;
let month = setMonth || now.getMonth();
//沒有+1方便后面計(jì)算當(dāng)月總天數(shù)
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
console.log("當(dāng)前選中月nextMonth：" + nextMonth);
//目標(biāo)月1號(hào)對(duì)應(yīng)的星期
let startWeek = this.getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay();
console.log("目標(biāo)月1號(hào)對(duì)應(yīng)的星期startWeek:" + startWeek);
//獲取目標(biāo)月有多少天
let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate();
console.log("獲取目標(biāo)月有多少天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)
//當(dāng)天之前的日期不可用
clazz = 'unavailable ' + clazz;
else
clazz = '' + clazz
/**如果當(dāng)前日期已經(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
})
},
/**
* 上個(gè)月
*/
lastMonthEvent:function(){
//全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+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);
},
/**
* 下個(gè)月
*/
nextMonthEvent:function(){
//全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+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();
},
/**
* 點(diǎn)擊日期事件
*/
onPressDateEvent: function(e) {
var {
year,
month,
day,
amount
} = e.currentTarget.dataset;
console.log("當(dāng)前點(diǎn)擊的日期：" + year + "-" + month + "-" + day);
//當(dāng)前選擇的日期為同一個(gè)月并小于今天，或者點(diǎn)擊了空白處（即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;
//渲染點(diǎn)擊樣式
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 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;
};
/**
* 對(duì)Date的擴(kuò)展，將 Date 轉(zhuǎn)化為指定格式的String
* 月(M)、日(d)、12小時(shí)(h)、24小時(shí)(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 個(gè)占位符
* 年(y)可以用 1-4 個(gè)占位符，毫秒(S)只能用 1 個(gè)占位符(是 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})$/; //正則表達(dá)式 匹配出生日期(簡(jiǎn)單匹配)
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(), //小時(shí)
"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;
}
/**
* 計(jì)算兩個(gè)日期差差
* 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));//除不盡時(shí),向上取整
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);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了bootstrap輪播模板的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
javascript封裝 Cookie 應(yīng)用接口
本文通過幾個(gè)簡(jiǎn)單的示例向大家展示了javascript封裝cookie的注意事項(xiàng)及操作方法，非常的簡(jiǎn)單實(shí)用，最后附上一則具體實(shí)例，有需要的小火把可以參考下。2015-08-08
uniapp頁面通訊講解之uni.$emit、uni.$on、uni.$once和uni.$off
uni-app?是一個(gè)使用vue.js開發(fā)所有前端應(yīng)用的框架,下面這篇文章主要給大家介紹了關(guān)于uniapp頁面通訊之uni.$emit、uni.$on、uni.$once和uni.$off的相關(guān)資料,需要的朋友可以參考下2022-09-09
先來說eval的用法，內(nèi)容比較簡(jiǎn)單，熟悉的可以跳過2012-03-03
測(cè)量JavaScript函數(shù)的性能各種方式對(duì)比
這篇文章主要介紹了測(cè)量JavaScript函數(shù)的性能各種方式對(duì)比，對(duì)性能感興趣的同學(xué)，可以多實(shí)驗(yàn)一下2021-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹形菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹形菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
有一id=test的下拉框，怎么拿到選中的那個(gè)值呢？本文將采用javascript原生的方法及jquery方法（前提是已經(jīng)加載了jquery庫）來簡(jiǎn)單實(shí)現(xiàn)下2013-10-10
在Web開發(fā)中,處理圖片、字體等資源文件是一個(gè)常見的需求,傳統(tǒng)的做法是將這些資源文件放在靜態(tài)目錄中,然后在HTML或CSS中引用,然而,這種方法在構(gòu)建工具（如Webpack）中并不總是最理想的,為了解決這個(gè)問題,可以使用url-loader,需要的朋友可以參考下2025-04-04
實(shí)際過程中你會(huì)發(fā)現(xiàn)圖表在div中的位置不太理想,這時(shí)怎么去調(diào)整呢?下面這篇文章主要給大家介紹了關(guān)于Echarts圖表位置調(diào)整的相關(guān)資料,需要的朋友可以參考下2022-10-10
js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前
本篇文章主要介紹了js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04