微信小程序?qū)崿F(xiàn)日歷功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)日歷功能的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
代碼:
<view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="date-wrap"> {{year}}年{{month}}月 </view> <view class="goright iconfont icon-jianzuo" bindtap="nextMonth"></view> </view> <view class="week"> <view wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key" style="width:{{param}}px;height:{{param-17}}px;line-height:{{param-17}}px">{{item}}</view> </view> <view class="date" style='width: {{ param * 7 }}px;'> <block wx:for="{{dateArr}}" wx:for-index="index" wx:for-item="item" wx:key="key"> <view style="{{index ==0?'margin-left:'+ param *firstDay +'px;':''}}width:{{param}}px;height:{{param-10}}px;line-height:{{param-10}}px;" class="{{index+1==day?'today':''}} {{index+1==day&&isClock?'clockOn':''}}"><view class="day">{{item}}</view></view> </block> </view> </view><!--end calendar-->
data: { year:'', month:'', day:'', weekArr: ['日', '一', '二', '三', '四', '五','六'], dateArr:[], firstDay:'', lastDay:'', param:null, clockNum:3, }, getDate: function () { //獲取當(dāng)月日期 var mydate = new Date(); var year = mydate.getFullYear(); var month = mydate.getMonth(); var months = month + 1; this.data.year = year; this.data.month = months; this.data.day = mydate.getDate(); var fist = new Date(year, month, 1); this.data.firstDay = fist.getDay(); var last = new Date(year, months, 0); this.data.lastDay = last.getDate(); this.setData({ year: this.data.year, month: this.data.month, day: this.data.day, firstDay: this.data.firstDay, lastDay: this.data.lastDay }) console.log("今天:" + this.data.day); }, setDate: function () { for (var i = 1; i < this.data.lastDay + 1; i++) { this.data.dateArr.push(i); } this.setData({ dateArr: this.data.dateArr, firstDay: this.data.firstDay }) }, prevMonth:function(){ //上一月 var months=""; var years=""; if(this.data.month ==1){ years=this.data.year-1 this.data.month=12; months=this.data.month; }else{ years=this.data.year; months = this.data.month - 1; } var first = new Date(years, months-1, 1); this.data.firstDay = first.getDay(); var last = new Date(years, months, 0); this.data.lastDay = last.getDate(); this.setData({ month: months, year:years, firstDay: this.data.firstDay, lastDay: this.data.lastDay }) this.data.dateArr = []; for (var i = 1; i < this.data.lastDay + 1; i++) { this.data.dateArr.push(i); } this.setData({ dateArr: this.data.dateArr }) }, nextMonth:function(){ //下一月 var months=""; var years=""; if(this.data.month== 12){ this.data.month=0; months = this.data.month; years = this.data.year+1; }else{ months = this.data.month+1; years = this.data.year; } var months = this.data.month + 1; var first = new Date(years, months-1,1); this.data.firstDay= first.getDay(); var last = new Date(years,months,0); this.data.lastDay= last.getDate(); this.setData({ month: months, year:years, firstDay:this.data.firstDay, lastDay:this.data.lastDay }) this.data.dateArr = []; for (var i = 1; i < this.data.lastDay + 1; i++) { this.data.dateArr.push(i); } this.setData({ dateArr: this.data.dateArr }) }, onLoad: function (options) { this.getDate(); this.setDate(); var res = wx.getSystemInfoSync(); this.setData({ param:res.windowHeight/12, }) },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
將Echarts圖表導(dǎo)出為圖片的3種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于將Echarts圖表導(dǎo)出為圖片的3種方法,Echarts是一種基于JavaScript的可視化庫(kù),用于創(chuàng)建豐富、交互式的圖表和地圖,而Excel是一種電子表格軟件,用于數(shù)據(jù)處理和分析,需要的朋友可以參考下2023-06-06JSON 數(shù)據(jù)詳解及實(shí)例代碼分析
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實(shí)例代碼分析的相關(guān)資料,需要的朋友可以參考下2017-01-01javascript打開新窗口同時(shí)關(guān)閉舊窗口
因業(yè)務(wù)需要,在網(wǎng)上查找這個(gè)問(wèn)題的解決辦法,但是昏天黑地地搞了半天,找到的方法雖然可以實(shí)現(xiàn)功能,但是總是會(huì)跳出討厭的“關(guān)閉窗口”的提示框,郁悶。2009-01-01Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)?lái)一篇js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08javascript+html5實(shí)現(xiàn)仿flash滾動(dòng)播放圖片的方法
這篇文章主要介紹了javascript+html5實(shí)現(xiàn)仿flash滾動(dòng)播放圖片的方法,可實(shí)現(xiàn)類似Flash滾動(dòng)播放的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04全面解析Bootstrap中form、navbar的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中form、navbar的使用方法,感興趣的朋友可以參考一下2016-05-05