日期-日历-选择器实现并茂
源的世界
帮助1人
日历模板效果图展示
功能点介绍
相当于留言谱，用于记录留言的历史纪录功能。主要实现的功能点在于-前端页面日历的动态搭建，哪一年哪一月哪一日对应的历史纪录。进行显示-当点击回忆录时跳转页面或者模态框实现显示。扩展-页面还可以整的更好看些，作为打卡等，本猿能力有限。
完整代码（cv即可）
微信小程序前端-跟vuejs基本没有多大差别-view改成div即可。也就是说都适用。
index.wxml
<view class="calendar">
<view class="calendarTop">
<text class="calendarTopL" catchtap="prev">{{'<'}}< /text>
<text class="calendarTopC">{{nowYear}}年{{nowMonthStr}}月</text>
<text class="calendarTopR" catchtap="next">{{'>'}}</text>
</view>
<view class="calendarWeek">
<text class="calendarWeekItem" wx:for="{{weekList}}" wx:key="item">{{item}}</text>
</view>
<view class="calendarDate">
<text class="calendarDateItem {{item.now ? 'dateItemNow' : ''}} {{item.gray ? 'dateItemGray' : ''}}" wx:for="{{month}}" bindtap="memoirbtn" data-time="{{item.timeDate}}" wx:key="index">{{item.text}}
<text class="memoirNow">{{item.memoir}}</text>
</text>
</view>
</view>
index.wxss
.calendar {
width: 100%;
border-top: 1rpx solid #00000005;
background-color: #FFF2C7;
margin: 0 auto;
}
.calendarTop {
padding-top: 22rpx;
display: flex;
justify-content: center;
position: relative;
}
.calendarTopL {
font-size: 32rpx;
font-weight: 400;
color: #333333;
height: 36rpx;
line-height: 36rpx;
position: absolute;
left: 34rpx;
top: 22rpx;
}
.calendarTopC {
font-size: 26rpx;
font-weight: 600;
color: #333333;
height: 36rpx;
line-height: 36rpx;
}
.calendarTopR {
font-size: 32rpx;
font-weight: 400;
color: #333333;
height: 36rpx;
line-height: 36rpx;
position: absolute;
right: 34rpx;
top: 22rpx;
}
.calendarWeek {
display: flex;
flex-direction: row;
padding-top: 24rpx;
}
.calendarWeekItem {
width: 60rpx;
height: 60rpx;
font-size: 20rpx;
font-weight: 400;
color: #999999;
line-height: 60rpx;
text-align: center;
margin-left: 40rpx;
}
.calendarDate {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.calendarDateItem {
width: 100rpx;
height: 200rpx;
font-size: 26rpx;
font-weight: bold;
color: #333333;
line-height: 60rpx;
text-align: center;
border: 1rpx solid rgba(0, 0, 0, 0.4);
}
.memoirNow {
display: flex;
width: 100%;
height: 140rpx;
background: #FCC001;
}
.dateItemNow {
background: #2E8CFF;
color: #FFFFFF;
}
.dateItemGray {
color: #CCCCCC;
}
index.js
Page({
/**
* 页面的初始数据
*/
data: {
weekList: ['一', '二', '三', '四', '五', '六', '日'], //一周
month: [
{
// text 此值为日期值，类型为number
// now 此值为今天，在本月的周末为false，其它时候为true，类型为布尔
// gray 此值为日期置灰，本月中的上月和下月日期以及本月的周末，类型为布尔
}
],//一个月所有数据
nowYear: 0,//选择的年
nowMonth: 0,//选择的月
nowMonthStr: '',//转换格式的月
today: 0,//今天
memorandum: [{ "creationTime": "2022-12-12" }, { "creationTime": "2022-12-16" }, { "creationTime": "2022-12-03" }], //为了演示，此为模拟数据，也可从后端获取数据源
},
//回忆录 进行点击查看内容-（作为参考）
// memoirbtn(e) {
// //根据前端传过来的时间，还有用户标识，进行表查询，最终跳转页面-显示到前端页面上内容
// var index = e.currentTarget.dataset.time;
// console.log("传过来的值是想要的" index);
// if (index != "") {
// wx.navigateTo({
// url: '/pages/time_record/index?dateTime=' index,
// })
// } else {
// wx.showToast({
// title: '当日未建立任务点',
// icon: 'error',
// duration: 1500
// })
// }
// },
// 获取当前年月日
gainDate() {
let d = Reflect.construct(Date, []);
this.setData({
nowYear: d.getFullYear(),
nowMonth: d.getMonth() 1,
today: d.getDate(),
nowMonthStr: (d.getMonth() 1).toString().padStart(2, '0')
})
},
// 上个月
prev() {
if (this.data.nowMonth > 1) {
this.setData({
nowMonth: this.data.nowMonth - 1,
nowMonthStr: (this.data.nowMonth - 1).toString().padStart(2, '0')
})
} else {
this.setData({
nowYear: this.data.nowYear - 1,
nowMonth: 12,
nowMonthStr: "12"
})
};
this.todayProminent()
this.dateInit()
},
// 下个月
next() {
if (this.data.nowMonth < 12) {
this.setData({
nowMonth: this.data.nowMonth 1,
nowMonthStr: (this.data.nowMonth 1).toString().padStart(2, '0')
})
} else {
this.setData({
nowYear: this.data.nowYear 1,
nowMonth: 1,
nowMonthStr: "01"
})
}
this.todayProminent()
this.dateInit()
},
//今天日期凸显
todayProminent() {
// 将今天置为0
this.setData({
today: 0
})
let d = Reflect.construct(Date, []);
if (d.getFullYear() == this.data.nowYear && d.getMonth() 1 == this.data.nowMonth) {
this.setData({
today: d.getMonth() 1 > this.data.nowMonth 1 ? 0 : d.getDate()
})
}
},
// 日历主体
dateInit() {
let now = Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth - 1]); //当前月份的一号
let startWeekNow = now.getDay(); //当前月份的一号对应的星期
let end = Reflect.construct(Date, [Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth]) - 10]);// 当前月份的最后一号
let endWeekNow = end.getDay(); //当前月份的最后一天对应的星期
let dayNumNow = Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth, 0]).getDate(); //当前月有多少天
let dayNumPrev = Reflect.construct(Date, [this.data.nowYear - 1 ? this.data.nowYear : this.data.nowYear - 1, this.data.nowMonth - 1 ? this.data.nowMonth - 1 : 12, 0]).getDate(); //上个月有多少天
let prevMonthShow = []; //上个月日期展示的数据
let nowMonthShow = []; //本月日期展示的数据
let nextMonthShow = []; //下个月日期展示的数据
//进行判断是否有内容 先确认当今是几年几月，然后调用后端方法，查询出全部数据，进行匹配
console.log("当前年月" this.data.nowYear "-" this.data.nowMonth)
var memoir = "";
var timeDate = "";
var times = "";
//标记几年几月几日，标记是否有值
for (let i = 1; i < (startWeekNow ? startWeekNow : 7); i ) {
if (this.data.nowMonth == 1) {
timeDate = (this.data.nowYear - 1) "-" 12
} else {
timeDate = (this.data.nowYear) "-" (this.data.nowMonth - 1)
}
if ((dayNumPrev - i 1) < 10) {
times = "0" (dayNumPrev - i 1);
} else {
times = dayNumPrev - i 1
}
timeDate = timeDate "-" times;
memoir = this.creationTime(timeDate);
prevMonthShow.unshift( //头部添加
{
text: dayNumPrev - i 1, //30 29 28
now: false,
gray: true,
timeDate: timeDate,
memoir: memoir
}
)
};
for (let i = 1; i <= dayNumNow; i ) {
if (i < 10) {
times = "0" i;
} else {
times = i;
}
timeDate = this.data.nowYear "-" this.data.nowMonth "-" times;
memoir = this.creationTime(timeDate);
if (this.data.today == i) {
nowMonthShow.push(
{
text: i,
now: true,
gray: false,
timeDate: timeDate,
memoir: memoir
}
)
} else {
nowMonthShow.push(
{
text: i,
now: false,
gray: false,
timeDate: timeDate,
memoir: memoir
}
)
}
};
for (let i = 1; i <= (endWeekNow ? 7 - endWeekNow : 0); i ) {
if (this.data.nowMonth == 12) {
timeDate = (this.data.nowYear 1) "-" "01"
} else {
timeDate = (this.data.nowYear) "-" (this.data.nowMonth 1)
}
if (i < 10) {
times = "0" i;
} else {
times = i;
}
timeDate = timeDate "-" times;
memoir = this.creationTime(timeDate);
nextMonthShow.push(
{
text: i,
now: false,
gray: true,
timeDate: timeDate,
memoir: memoir
}
)
};
this.setData({
month: [...prevMonthShow, ...nowMonthShow, ...nextMonthShow]
})
},
creationTime(timeDate) {
var memoir = "";
let memorandum = this.data.memorandum || [];
console.log("后端传过来的值为：" memorandum.length);
memorandum.forEach(element => {
//把标准时间转换成自己想要的格式类型
var dateee = new Date(element.creationTime).toJSON();
var time1 = new Date( new Date(dateee) 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
//进行转换-例如2022-12-12 12:12:36 转成 2022-12-12 省略时分秒
var date2 = /\d{4}-\d{1,2}-\d{1,2}/g.exec(time1)
if ((new Date(date2).getTime()) == (new Date(timeDate).getTime())) {
memoir = "回忆录";
}
});
return memoir;
},
// duckMemorandum() { //初始化数据-（作为参考）
// var that = this;
// wx.request({
// url: 'http://localhost:8081/duckMemorandum/list',
// method: 'GET',
// data: {
// userId: 1
// //需要传入用户id
// },
// // 请求成功时的处理
// success: function (res) {
// // 一般在这一打印下看看是否拿到数据
// console.log(res.data)
// if (res.data.code = 200) {
// that.setData({
// memorandum: [...res.data.data]
// })
// }
// },
// // 请求失败时的一些处理
// fail: function () {
// wx.showToast({
// icon: "none",
// mask: true,
// title: "接口调用失败，请稍后再试。",
// });
// }
// })
// },
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// this.duckMemorandum();
this.gainDate();
this.dateInit()
},
})
日期时间选择器效果图展示
1、使用小程序原生的picker
从底部弹起的滚动选择器。
①普通选择器：mode = selector
选择器用mode来区别,默认是普通选择器,e.detail.value拿到的值是选择了项的索引index,再通过array拿到值.在data里面做初始化的时候,将备选项加入array即可.
选择时触发bindPickerChange事件,获取index.
index.wxml
<picker bindchange="pickChange" value="{{index}}" range="{{array}}">
<view>
当前选择的国家：{{array[index]}}
</view>
</picker>
index.js
Page({
data:{
array:['中国','美国','日本','韩国'],
index:0
},
pickChange:function(e){
this.setData({
index:e.detail.value
});
}
})
②多列选择器：mode = multiSelector
index.wxml
<view>
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}" range="{{newArr}}">
<view class="picker">
当前选择： <van-button type="primary">
{{newArr[0][multiIndex[0]]}}，{{newArr[1][multiIndex[1]]}}，{{newArr[2][multiIndex[2]]}}</van-button>
</view>
</picker>
</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
multiArray: [{
id: 1,
label: "河南省",
children: [{
id: 2,
label: "郑州市",
children: [{
id: 3,
label: "中原区",
},
{
id: 4,
label: "二七区",
},
{
id: 5,
label: "金水区",
},
],
},
{
id: 7,
label: "商丘市",
children: [{
id: 8,
label: "民权县",
},
{
id: 9,
label: "柘城县",
},
{
id: 10,
label: "宁陵县",
},
],
},
],
},
{
id: 17,
label: "浙江省",
children: [{
id: 18,
label: "杭州市",
children: [{
id: 19,
label: "西湖区",
},
{
id: 20,
label: "萧山区",
},
],
},
{
id: 21,
label: "金华市",
children: [{
id: 22,
label: "金东区",
},
{
id: 23,
label: "婺城区",
},
],
},
],
},
],
multiIndex: [0, 0, 0],
multiIds: [],
newArr: [],
},
bindMultiPickerChange(e) {
console.log(this.data.multiIds);
},
bindMultiPickerColumnChange(e) {
let data = {
newArr: this.data.newArr,
multiIndex: this.data.multiIndex,
multiIds: this.data.multiIds,
};
data.multiIndex[e.detail.column] = e.detail.value;
let searchColumn = () => {
let arr1 = [];
let arr2 = [];
this.data.multiArray.map((v, vk) => {
if (data.multiIndex[0] === vk) {
data.multiIds[0] = {
...v,
};
v.children.map((c, ck) => {
arr1.push(c.label);
if (data.multiIndex[1] === ck) {
data.multiIds[1] = {
...c,
};
c.children.map((t, vt) => {
arr2.push(t.label);
if (data.multiIndex[2] === vt) {
data.multiIds[2] = {
...t,
};
}
});
}
});
}
});
data.newArr[1] = arr1;
data.newArr[2] = arr2;
};
switch (e.detail.column) {
case 0:
// 每次切换还原初始值
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
// 执行函数处理
searchColumn();
break;
case 1:
data.multiIndex[2] = 0;
searchColumn();
break;
}
this.setData(data);
},
multiArrayshow() {
let state = {
arr: [],
arr1: [],
arr2: [],
arr3: [],
multiIds: []
}
this.data.multiArray.map((v, vk) => {
state.arr1.push(v.label);
if (this.data.multiIndex[0] === vk) {
state.multiIds[0] = v;
}
if (state.arr2.length <= 0) {
v.children.map((c, ck) => {
state.arr2.push(c.label);
if (this.data.multiIndex[1] === ck) {
state.multiIds[1] = c;
}
if (state.arr3.length <= 0) {
c.children.map((t, tk) => {
state.arr3.push(t.label);
if (this.data.multiIndex[2] === tk) {
state.multiIds[2] = t;
}
});
}
});
}
});
state.arr[0] = state.arr1;
state.arr[1] = state.arr2;
state.arr[2] = state.arr3;
this.setData({
newArr: state.arr,
multiIds: state.multiIds,
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.multiArrayshow();
},
});
index.wcss
.section__title{
display: flex;
align-content: center;
justify-content: center;
font-size: 42rpx;
font-weight: bold;
}
.picker{
font-size: 36rpx;
color: red;
background: black;
}
③时间选择器：mode = time
mode = time时,是时间选择器.start,end分别是有效时间范围的开始和结束.格式hh:mm
选择时触发bindTimeChange事件,获取time.
index.wxml
<view class="title_rq">
<picker mode="time" name="creationTime" value="{{creationTime}}" start="00:00" end="24:60" bindchange="bindDateChange">
{{creationTime}}
</picker>
</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
creationTime: "请选择时间"
},
// 点击日期组件确定事件
bindDateChange: function (e) {
this.setData({
creationTime: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
index.wcss
.title_rq {
position: absolute;
top: 12%;
left: 5%;
width: 90%;
height: 70rpx;
background: #f3e306;
border: 1rpx solid black;
font-size: 36rpx;
color: #3D3D3D;
}
④日期选择器(上面有效果图)
mode = date时,是时间选择器.start,end分别是有效日期范围的开始和结束.格式yyyy-MM-dd
选择时触发bindDateChange事件,获取date
index.wxml
<view class="title_rq">
<picker mode="date" name="creationTime" value="{{creationTime}}" start="1920-01-01" end="2099-01-01" bindchange="bindDateChange">
{{creationTime}}
</picker>
</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
creationTime: "请选择日期"
},
// 点击日期组件确定事件
bindDateChange: function (e) {
this.setData({
creationTime: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
index.wcss
.title_rq {
position: absolute;
top: 12%;
left: 5%;
width: 90%;
height: 70rpx;
background: #f3e306;
border: 1rpx solid black;
font-size: 36rpx;
color: #3D3D3D;
}
⑤省市区选择器：mode = region
之前单独做过一栏：可供参考：
简易实现
java前后端实现
java-vue前后端实现
2、如何使用原生的picker年月日 时分秒=共同选择
思路：加一起就行了
效果图
完整代码
index.wxml
<view class="container">
<view class="tui-picker-name">日期时间选择器（精确到秒）</view>
<picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
<view class="tui-picker-detail">
选择日期时间: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
</view>
</picker>
</view>
index.js
var dateTimePicker = require('../../utils/dateTimePicker.js');
Page({
data: {
dateTimeArray: null,
dateTime: null,
startYear: 2000,
endYear: 2050
},
onLoad(){
// 获取完整的年月日 时分秒，以及默认显示的数组
var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
this.setData({
dateTime: obj.dateTime,
dateTimeArray: obj.dateTimeArray,
});
},
changeDateTime(e){
this.setData({ dateTime: e.detail.value });
},
changeDateTimeColumn(e){
var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;
arr[e.detail.column] = e.detail.value;
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
},
})
dateTimePicker.js
function withData(param){
return param < 10 ? '0' param : '' param;
}
function getLoopArray(start,end){
var start = start || 0;
var end = end || 1;
var array = [];
for (var i = start; i <= end; i ) {
array.push(withData(i));
}
return array;
}
function getMonthDay(year,month){
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
switch (month) {
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12':
array = getLoopArray(1, 31)
break;
case '04':
case '06':
case '09':
case '11':
array = getLoopArray(1, 30)
break;
case '02':
array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
break;
default:
array = '月份格式不正确，请重新输入！'
}
return array;
}
function getNewDateArry(){
// 当前时间的处理
var newDate = new Date();
var year = withData(newDate.getFullYear()),
mont = withData(newDate.getMonth() 1),
date = withData(newDate.getDate()),
hour = withData(newDate.getHours()),
minu = withData(newDate.getMinutes()),
seco = withData(newDate.getSeconds());
return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear,endYear,date) {
// 返回默认显示的数组和联动数组的声明
var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
var start = startYear || 1978;
var end = endYear || 2100;
// 默认开始显示数据
var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
// 处理联动列表数据
/*年月日 时分秒*/
dateTimeArray[0] = getLoopArray(start,end);
dateTimeArray[1] = getLoopArray(1, 12);
dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
dateTimeArray[3] = getLoopArray(0, 23);
dateTimeArray[4] = getLoopArray(0, 59);
dateTimeArray[5] = getLoopArray(0, 59);
dateTimeArray.forEach((current,index) => {
dateTime.push(current.indexOf(defaultDate[index]));
});
return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}
各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。
免责声明：本文章仅用于学习参考
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgehjfk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
