本文實例為大家分享了微信小程序實現日歷功能的具體代碼,供大家參考,具體內容如下
專業從事成都網站設計、做網站,高端網站制作設計,重慶小程序開發,網站推廣的成都做網站的公司。優秀技術團隊竭力真誠服務,采用H5響應式網站+CSS3前端渲染技術,自適應網站建設,讓網站在手機、平板、PC、微信下都能呈現。建站過程建立專項小組,與您實時在線互動,隨時提供解決方案,暢聊想法和感受。
效果圖:
代碼:
<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" >{{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 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 () { //獲取當月日期 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, }) },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創新互聯。
本文題目:微信小程序實現日歷功能
標題網址:http://www.2m8n56k.cn/article24/ihgdce.html
成都網站建設公司_創新互聯,為您提供移動網站建設、云服務器、用戶體驗、品牌網站制作、動態網站、微信公眾號
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:[email protected]。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯