本篇文章給大家?guī)淼膬热菔顷P于微信小程序實例：實現自定義日期控件的代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
最近在研究微信小程序，需要實現一個自定義日期的功能，類似于貓眼app上選擇日期，可以按日、按周、按月、按年、自定義日期，為此特地將其寫成了一個組件，供有需要的朋友參考。
本人所用框架是wepy,所以此組件結構為wepy代碼結構。
大致介紹：
1.按日的日歷控件采用的極點日歷插件，詳情請看：https://github.com/czcaiwj/calendar；
2.組件中所用到的一些組件為ivew weapp組件，詳情使用請看我的另一篇分享：https://www.jianshu.com/p/e07b7cf5e494；
3.組件中按周選擇，周我是從2017年至今取的，具體實現可看我另一篇分享：https://www.jianshu.com/p/5112df795162；在本篇onLoad()方法里也有實現；因本人開發(fā)需要，設定功能為按周可多選，這個可以根據自身開發(fā)需求調整；
4.本組件時間默認從17年開始至今，也可根據自身實際需求調整。
實現效果：
代碼如下：
<style type="less">
.home {
height: 100%;
.calendar-header {
font-size: large;
color: #406BF8;
}
.calendar-board {
color: #406BF8;
}
.week_year_style {
font-size: 30 rpx;
padding: 20 rpx 15 rpx;
text-align: center;
}
.week_selectyear_style {
background-color: #fff;
color: #406BF8;
}
.calendar {
background-color: #fcfcfc;
//padding-top: 10px;
}
}
</style>
<template>
<view class="home page">
<i-tabs current="{{ currentTab }}" color="#406BF8" bindchange="handleChangeTab">
<i-tab key="按日" title="按日"></i-tab>
<i-tab key="按周" title="按周"></i-tab>
<i-tab key="按月" title="按月"></i-tab>
<i-tab key="按年" title="按年"></i-tab>
<i-tab key="自定義" title="自定義"></i-tab>
</i-tabs>
<view hidden="{{currentTab != '按日'}}" style="margin-top: 30rpx">
<calendar cell-size="40"
show-more-days="true"
lunar="true"
weeks-type="cn"
calendar-style="calendar"
header-style="calendar-header"
board-style="calendar-board"
days-color="{{days_style}}"
start-date="2017-01"
end-date="2018-08"
binddayClick="dayClick"
bindnextMonth="next"
bindprevMonth="prev"
/>
</view>
<view hidden="{{currentTab != '按周'}}">
<view style="display: flex">
<view style="width: 160rpx;background-color: #f6f6f6;border-right: 1rpx solid #e6e6e6">
<block wx:for="{{yearArray}}" wx:for-item="item" wx:key="item">
<view class="week_year_style {{weeksYears==item?'week_selectyear_style':''}}"
bindtap='changeWeekYear({{item}})'>{{item + '年'}}
</view>
</block>
</view>
<scroll-view scroll-y style="height: 600px;">
<i-cell-group>
<block wx:for="{{weeksArray[weeksYears]}}" wx:for-item="category" wx:key="category">
<i-cell title="{{category.weeks}}" bindtap="handleWeeksChange('{{index}}')">
<i-icon wx:if="{{category.select}}" type="right" size="20" color="#406BF8"
slot="footer"/>
</i-cell>
</block>
</i-cell-group>
</scroll-view>
</view>
</view>
<view hidden="{{currentTab != '按月'}}">
<view style="display: flex">
<view style="width: 160rpx;background-color: #f6f6f6;border-right: 1rpx solid #e6e6e6">
<block wx:for="{{yearArray}}" wx:for-item="item" wx:key="item">
<view class="week_year_style {{monthYear==item?'week_selectyear_style':''}}"
bindtap='changeMonthYear({{item}})'>{{item + '年'}}
</view>
</block>
</view>
<scroll-view scroll-y style="height: 600px;">
<i-cell-group>
<block wx:for="{{monthYear==year?currentMonthArray:fullMonthArray}}" wx:for-item="category"
wx:key="*this">
<i-cell title="{{category+'月'}}" bindtap="handleMonthChange('{{category}}')">
<i-icon wx:if="{{category==selectMonth}}" type="right" size="20" color="#406BF8"
slot="footer"/>
</i-cell>
</block>
</i-cell-group>
</scroll-view>
</view>
</view>
<view hidden="{{currentTab != '按年'}}">
<i-cell-group>
<block wx:for="{{yearArray}}" wx:for-item="category" wx:key="category">
<i-cell title="{{category+'年'}}" bindtap="handleYearChange('{{category}}')">
<i-icon wx:if="{{category==selectYear }}" type="right" size="20" color="#406BF8" slot="footer"/>
</i-cell>
</block>
</i-cell-group>
</view>
<view hidden="{{currentTab != '自定義'}}" style="margin-top: 30rpx">
<calendar cell-size="40"
show-more-days="true"
lunar="true"
weeks-type="cn"
calendar-style="calendar"
header-style="calendar-header"
board-style="calendar-board"
days-color="{{define_days_style}}"
start-date="2017-01"
end-date="2018-08"
binddayClick="dayClick_define"
bindnextMonth="next_define"
bindprevMonth="prev_define"
/>
</view>
</view>
</template>
<script>
import wepy from 'wepy';
const MONTHS = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.', 'July.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];
export default class TabsContent extends wepy.component {
props = {
openDateModal: {
type: Boolean,
default: false,
twoWay: true
},
dateSelect: {
type: String,
default: '',
twoWay: true
},
dateFilter: {
type: String,
default: '',
twoWay: true
},
filterWeekArray: {
type: String,
default: '',
twoWay: true
},
filterWeekSelect: {
type: String,
default: '',
twoWay: true
}
};
data = {
currentTab: '按日', //Tabs頁切換
year: new Date().getFullYear(), // 年份
month: new Date().getMonth() + 1, // 月份
day: new Date().getDate(),
str: MONTHS[new Date().getMonth()], // 月份字符串
days_style: [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'}], //按日選中日期樣式
selectDate: [], //按日選擇的日期
yearArray: [], //從2017年起至今
weeksYears: new Date().getFullYear(), //按周選擇了哪一年
weeksArray: {}, //從2017年起至今的所有周
selectWeekArray: [], //選擇的周
fullMonthArray: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
currentMonthArray: [], //今年過了幾個月
monthYear: new Date().getFullYear(), //按月選擇了哪一年
selectMonth: 0, //按月選擇了哪一月
selectYear: 0, //按年選擇了哪一年
define_days_style: [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'}], //自定義日期格式
selectDate_define: []
};
methods = {
handleChangeTab({detail}) {
this.currentTab = detail.key
this.dateFilter = this.currentTab
},
dayClick: function (event) {
let style = (event.detail.year == this.year && event.detail.month == this.month) ?
[{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'},
{month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}] :
[{month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}]
this.days_style = style
this.selectDate = [event.detail.year, event.detail.month, event.detail.day]
this.openDateModal = false
this.dateFilter = this.currentTab
this.dateSelect = [event.detail.year, event.detail.month, event.detail.day]
},
next: function (event) {
if (event.detail.currentYear == this.year && event.detail.currentMonth == this.month)
this.days_style = [{
month: 'current',
day: new Date().getDate(),
color: '#fff',
background: '#eb4986'
}]
else this.days_style = [vent.detail.year, event.detail.month, event.detail.day]
},
prev: function (event) {
this.days_style = []
},
changeWeekYear(year) {
this.weeksYears = year
},
handleWeeksChange(weekIndex) {
this.weeksArray[this.weeksYears][weekIndex].select = !this.weeksArray[this.weeksYears][weekIndex].select
if (this.selectWeekArray[this.weeksYears]) {
let bool = this.selectWeekArray[this.weeksYears].some(index => index == weekIndex)
if (bool) { //真 已存在 delete
//if(this.selectWeekArray[this.weeksYears].length>1)
this.selectWeekArray[this.weeksYears].remove(weekIndex)
} else { //假 push
this.selectWeekArray[this.weeksYears].push(weekIndex)
this.selectWeekArray[this.weeksYears].sort()
}
} else {
let temp = {}
temp[this.weeksYears] = []
let a = [weekIndex]
temp[this.weeksYears] = a
this.selectWeekArray = temp
}
this.filterWeekSelect = this.selectWeekArray //回調到父級頁面
},
changeMonthYear(year) {
this.monthYear = year
},
handleMonthChange(month) {
this.selectMonth = month
this.openDateModal = false
this.dateFilter = this.currentTab
this.dateSelect = [this.monthYear, this.selectMonth]
},
handleYearChange(year) {
this.selectYear = year
this.openDateModal = false
this.dateFilter = this.currentTab
this.dateSelect = [year]
},
dayClick_define: function (event) {
let style = []
if (this.selectDate_define.length == 0) { //第一次點擊
this.selectDate_define.push([event.detail.year, event.detail.month, event.detail.day])
if (event.detail.year == this.year && event.detail.month == this.mounth) {
style = [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'},
{month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}]
}
this.define_days_style = style
} else if (this.selectDate_define.length == 1) { //選中第二個日期就關閉頁面
this.selectDate_define.push([event.detail.year, event.detail.month, event.detail.day])
this.define_days_style.push({
month: 'current',
day: event.detail.day,
color: '#fff',
background: '#406BF8'
})
this.openDateModal = false
this.dateFilter = this.currentTab
this.dateSelect = this.selectDate_define
} else { //重新自定義日期
this.selectDate_define = [[event.detail.year, event.detail.month, event.detail.day]]
style = [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'},
{month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}]
this.define_days_style = style
}
},
next_define: function (event) {
if (event.detail.currentYear == this.year && event.detail.currentMonth == this.month)
this.define_days_style = [{
month: 'current',
day: new Date().getDate(),
color: '#fff',
background: '#eb4986'
}]
else this.define_days_style = [event.detail.year, event.detail.month, event.detail.day]
},
prev_define: function (event) {
this.define_days_style = []
},
};
onLoad() {
let currentYear = new Date().getFullYear()
let currentMonth = new Date().getMonth() + 1
for (var i = currentYear; i >= 2017; i--) {
this.yearArray.push(i)
}
for (var i = currentMonth; i >= 1; i--) {
this.currentMonthArray.push(i)
}
let weeksArray = {} //計算2017年至今的所有周
for (var i = 0; i <= this.yearArray.length; i++) {
let index = 1;
let temp = []
if (i == 0) { //今年
for (let i of createWeeks(this.yearArray[i])) {
let start = i[0],
end = i[1];
if (end <= new Date().getTime() || (start <= new Date().getTime() && end >= new Date().getTime())) {
let a = start <= new Date().getTime() && end >= new Date().getTime() ?
'第' + formatDig(index++) + '周（' + formatDate(start) + '日-' + formatDate(end) + '日)' + ' 本周' :
'第' + formatDig(index++) + '周（' + formatDate(start) + '日-' + formatDate(end) + '日)'
temp.push({'weeks': a, 'select': false})
}
}
} else {
for (let i of createWeeks(this.yearArray[i])) {
let start = i[0],
end = i[1];
let a = '第' + formatDig(index++) + '周（' + formatDate(start) + '日-' + formatDate(end) + '日)'
temp.push({'weeks': a, 'select': false})
}
}
if (this.yearArray[i] != undefined) {
weeksArray[this.yearArray[i]] = temp.reverse();
}
}
this.weeksArray = weeksArray
this.filterWeekArray = weeksArray
}
}
function formatDig(num) {
//return num>9?''+num:'0'+num;
return num;
}
function formatDate(mill) {
var y = new Date(mill);
let raws = [
//y.getFullYear(),
formatDig(y.getMonth() + 1),
formatDig(y.getDate()),
//y.getDay()||7 //獲取星期幾
];
//let format=['年','月','日 星期'];
let format = ['月', '日'];
return String.raw({raw: raws}, ...format);
}
function* createWeeks(year) {
const ONE_DAY = 24 * 3600 * 1000;
let start = new Date(year, 0, 1),
end = new Date(year, 11, 31);
let firstDay = start.getDay() || 7,
lastDay = end.getDay() || 7;
let startTime = +start,
endTime = startTime + (7 - firstDay) * ONE_DAY,
_endTime = end - (7 - lastDay) * ONE_DAY;
yield [startTime, endTime];
startTime = endTime + ONE_DAY;
endTime = endTime + 7 * ONE_DAY;
while (endTime < _endTime) {
yield [startTime, endTime];
startTime = endTime + ONE_DAY;
endTime = endTime + 7 * ONE_DAY;
}
yield [startTime, +end];
}
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
</script>相關推薦：
以上是微信小程序實例：實現自定義日期控件的代碼的詳細內容。更多信息請關注PHP中文網其他相關文章！
本站聲明
本文內容由網友自發(fā)貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容，請聯系admin@php.cn
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
如何修復KB5060999無法在Windows 11中安裝？
1 個月前
By DDD
Oguri Cap Build Guide |漂亮的德比志
1 周前
By Jack chen
指南：恒星刀片保存文件位置/保存文件丟失/不保存
3 周前
By DDD
沙丘：覺醒 - 高級行星學家Quest演練
3 周前
By Jack chen
Agnes Tachyon Build Guide |漂亮的德比志
1 周前
By Jack chen
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
使用Python開發(fā)微信小程序
Jun 17, 2023 pm 06:34 PM
隨著移動互聯網技術和智能手機的普及，微信成為了人們生活中不可或缺的一個應用。而微信小程序則讓人們可以在不需要下載安裝應用的情況下，直接使用小程序來解決一些簡單的需求。本文將介紹如何使用Python來開發(fā)微信小程序。一、準備工作在使用Python開發(fā)微信小程序之前，需要安裝相關的Python庫。這里推薦使用wxpy和itchat這兩個庫。wxpy是一個微信機器
實現微信小程序中的卡片翻轉特效
Nov 21, 2023 am 10:55 AM
實現微信小程序中的卡片翻轉特效在微信小程序中，實現卡片翻轉特效是一種常見的動畫效果，可以提升用戶體驗和界面交互的吸引力。下面將具體介紹如何在微信小程序中實現卡片翻轉的特效，并提供相關代碼示例。首先，需要在小程序的頁面布局文件中定義兩個卡片元素，一個用于顯示正面內容，一個用于顯示背面內容，具體示例代碼如下：<!--index.wxml-->&l
支付寶上線'漢字拾光-生僻字”小程序，用于征集、補充生僻字庫
Oct 31, 2023 pm 09:25 PM
本站10月31日消息，今年5月27日，螞蟻集團宣布啟動“漢字拾光計劃”，最近又迎來新進展：支付寶上線“漢字拾光-生僻字”小程序，用于向社會征集生僻字，補充生僻字庫，同時提供不同的生僻字輸入體驗，以幫助完善支付寶內的生僻字輸入方法。目前，用戶搜索“漢字拾光”、“生僻字”等關鍵詞就可以進入“生僻字”小程序。在小程序里，用戶可以提交尚未被系統識別錄入的生僻字圖片，支付寶工程師在確認后，將會對字庫進行補錄入。本站注意到，用戶還可以在小程序體驗最新的拆字輸入法，這一輸入法針對讀音不明確的生僻字設計。用戶拆
小程序能用react嗎
Dec 29, 2022 am 11:06 AM
小程序能用react，其使用方法：1、基于“react-reconciler”實現一個渲染器，生成一個DSL；2、創(chuàng)建一個小程序組件，去解析和渲染DSL；3、安裝npm，并執(zhí)行開發(fā)者工具中的構建npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。
uniapp如何實現小程序和H5的快速轉換
Oct 20, 2023 pm 02:12 PM
uniapp如何實現小程序和H5的快速轉換，需要具體代碼示例近年來，隨著移動互聯網的發(fā)展和智能手機的普及，小程序和H5成為了不可或缺的應用形式。而uniapp作為一個跨平臺的開發(fā)框架，可以在一套代碼的基礎上，快速實現小程序和H5的轉換，大大提高了開發(fā)效率。本文將介紹uniapp如何實現小程序和H5的快速轉換，并給出具體的代碼示例。一、uniapp簡介unia
教你如何在小程序中用公眾號模板消息（附詳細思路）
Nov 04, 2022 pm 04:53 PM
本篇文章給大家?guī)砹岁P于微信小程序的相關問題，其中主要介紹了如何在小程序中用公眾號模板消息，下面一起來看一下，希望對大家有幫助。
用Python編寫簡單的聊天程序教程
May 08, 2023 pm 06:37 PM
實現思路x01服務端的建立首先,在服務端,使用socket進行消息的接受,每接受一個socket的請求,就開啟一個新的線程來管理消息的分發(fā)與接受,同時,又存在一個handler來管理所有的線程,從而實現對聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務端簡單多了,客戶端的作用只是對消息的發(fā)送以及接受,以及按照特定的規(guī)則去輸入特定的字符從而實現不同的功能的使用,因此,在客戶端這里,只需要去使用兩個線程,一個是專門用于接受消息,一個是專門用于發(fā)送消息的至于為什么不用一個呢,那是因為,只
PHP與小程序的地理位置定位與地圖顯示
Jul 04, 2023 pm 04:01 PM
PHP與小程序的地理位置定位與地圖顯示地理位置定位與地圖顯示在現代科技中已經成為了必備的功能之一。隨著移動設備的普及，人們對于定位和地圖顯示的需求也越來越高。在開發(fā)過程中，PHP和小程序是常見的兩種技術選擇。本文將為大家介紹PHP與小程序中的地理位置定位與地圖顯示的實現方法，并附上相應的代碼示例。一、PHP中的地理位置定位在PHP中，我們可以使用第三方地理位
