微信小程序自定义日期选择组件(带 “至今” 选项)微信小程序自定义日期选择组件(带 “至今” 选项)
页面使用:
- fields 属性值有:year、month、day 不填默认为day
- quick 添加该属性表示年份数组中会添加一个【至今】选项】
- electDate 属性值为选择的日期
//html 代码块
<view>
<text>选中日期:{{endTime}}</text>
<time fields="day" selectDate="{{endTime}}" placeholder="请选择日期" quick bind:changeDate="onChangeDate"></time>
</view>
//Js 文件代码块
Page({
/**
* 页面的初始数据
*/
data: {
endTime: ''
},
onChangeDate(e) {
this.setData({
endTime: e.detail
})
},
})
组件引用方式:
全局引用就是在 app.json 文件添加:
"usingComponents": {
"time": "./components/time/time"
},
同理:组件局部引用就是在需要用到该组件的页面的.json文件中添加上面代码
组件代码块
index.wxml
<view class="birthday" bindtap="showBirthday">
<text wx:if="{{selectDate !== ''}}">{{selectDate}}</text>
<text class="ph-class" wx:else>{{placeholder}}</text>
</view>
<view class="birthday-mask" hidden="{{!pickerDateshow}}"></view>
<view class="birthday-box {{pickerDateshow?'birthday-show':''}}">
<view class="picker-header">
<view class="picker-btn" data-index="{{index}}" wx:for="{{picker_btn}}" wx:key bindtap="selectBirthday">{{item}}</view>
</view>
<picker-view class="birthday-picker" indicator-class="birthday-indicator" value="{{value}}" bindchange="bindChange">
<picker-view-column wx:if="{{fields === 'year' || fields === 'month' || fields === 'day'}}">
<view wx:for="{{years}}" wx:key>{{item === '至今' ? item : item + '年'}}</view>
</picker-view-column>
<picker-view-column wx:if="{{fields === 'month' || fields === 'day'}}" hidden="{{year === '至今'}}">
<view wx:for="{{months}}" wx:key>{{item}}月</view>
</picker-view-column>
<picker-view-column wx:if="{{fields === 'day'}}" hidden="{{year === '至今'}}">
<view wx:for="{{days}}" wx:key>{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
index.js
const date = require("../../utils/date.js");
Component({
/**
* 组件的属性列表
*/
properties: {
fields: {
type: String,
value: 'day'
},
quick: {
type: Boolean,
value: false
},
placeholder: {
type: String,
value: ''
},
selectDate: {
type: String,
value: '',
}
},
observers: { //监听日期是否改变并给年月日赋值
selectDate: function(val){
if(val !== ''){
let arr = val.split('-')
if(arr.length === 1) {
this.setData({
year: Number(arr[0])
})
} else if (arr.length === 2) {
this.setData({
year: Number(arr[0]),
month: Number(arr[1])
})
} else if (arr.length === 3) {
this.setData({
year: Number(arr[0]),
month: Number(arr[1]),
day: Number(arr[2])
})
}
}
}
},
/**
* 页面的初始数据
*/
data: {
pickerDateshow: false,
picker_btn: ['取消', '确定'],
years: [],
months: [],
days: [],
year: date.nowYear,
month: date.nowMonth,
day: date.nowDay,
value: [], //选中值的下标
selectDate: ''
},
methods: {
// 打开选框
showBirthday: function () {
date.setDate(this.data.quick, this.data.year, this.data.month, this.data.day, this)
this.setData({
pickerDateshow: true
})
this.value = this.data.value;// 记录改变前的日期
},
// 关闭选框
selectBirthday: function (e) {
let index = e.currentTarget.dataset.index;
if (index && index == 1) { // 确定选择 更换改变后的日期
if (this.val) {
date.setDate(this.data.quick, this.data.years[this.val[0]], this.data.months[this.val[1]], this.data.days[this.val[2]], this)
} else {
date.setDate(this.data.quick, this.data.years[this.value[0]], this.data.months[this.value[1]], this.data.days[this.value[2]], this)
}
let res = ''
let data = {}
if (this.data.year === '至今') {
res = this.data.year
data.date = res
data.year = this.data.year
} else if (this.data.fields === 'year') {
res = this.data.year
data.date = res
data.year = this.data.year
} else if (this.data.fields === 'month') {
res = this.data.year + '-' + this.data.month
data.date = res
data.year = this.data.year
data.month = this.data.month
} else {
res = this.data.year + '-' + this.data.month + '-' + this.data.day
data.date = res
data.year = this.data.year
data.month = this.data.month
data.day = this.data.day
}
this.triggerEvent('changeDate', data)
} else { // 取消选择 还原改变前的日期
date.setDate(this.data.quick, this.data.years[this.value[0]], this.data.months[this.value[1]], this.data.days[this.value[2]], this)
}
this.setData({
pickerDateshow: false,
})
},
bindChange: function (e) {
let val = e.detail.value;
this.val = e.detail.value; //记录改变后的日期
date.setDate(this.data.quick, this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this)
},
},
})
index.wxss
.birthday {
font-size: 32rpx;
color: #16233D;
}
.birthday .ph-class{
font-size: 32rpx;
color: #C5C8CE;
}
/* 自定义遮罩层*/
.birthday-mask {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
bottom: 0;
left: 0;
}
/* 自定义按钮 */
.picker-header {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background-color: rgba(0,0,0,0.01);
z-index: 999;
}
.picker-btn {
padding: 0 30rpx;
line-height: 80rpx;
color: #999;
font-size: 32rpx;
}
.picker-btn:last-child {
color: #FF4C00;
}
/* 自定义动画 */
.birthday-box {
width: 100%;
padding-top: 80rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
transform: translateY(100%);
transition: 0.5s;
}
.birthday-show {
transform: translateY(0);
}
.birthday-picker {
width: 100%;
height: 450rpx;
text-align: center;
}
.birthday-indicator {
height: 80rpx;
}
.birthday-picker picker-view-column view {
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 32rpx;
color: #525B6E;
}
index.json
{
"component": true,
"usingComponents": {}
}
日期数据文件(utils/date.js)
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = formatNumber(date.getMonth() + 1)
const nowDay = formatNumber(date.getDate())
// 每月的天数
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// 根据年月 获取当月的总天数
function getDays(year, month) {
if (month == 2) {
return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
} else {
return daysInMonth[month - 1]
}
}
// 根据年月日设置当前月有多少天 并更新年月日数组
function setDate(quick, year, month, day, that) {
let daysNum = getDays(year, month)
month = month ? month : 1
day = day ? day : 1
let monthsNum = 12
let years = quick ? ['至今'] : []
let months = []
let days = []
let yearIdx = 0
let monthIdx = 0
let dayIdx = 0
// 重新设置年份列表
if (quick){
for (let i = nowYear; i >= 1900; i--) {
years.push(i)
}
} else {
for (let i = nowYear + 10; i >= 1900; i--) {
years.push(i)
}
}
years.map((v, idx) => {
if (v === year) {
yearIdx = idx
}
})
// 重新设置月份列表
for (let i = 1; i <= monthsNum; i++) {
months.push(formatNumber(i))
}
months.map((v, idx) => {
if (v === month) {
monthIdx = idx
}
})
// 重新设置日期列表
for (let i = 1; i <= daysNum; i++) {
days.push(formatNumber(i))
}
days.map((v, idx) => {
if (v === day) {
dayIdx = idx
}
})
that.setData({
years,//年份列表
months,//月份列表
days,//日期列表
year,
month: formatNumber(month),
day: formatNumber(day),
})
// 年月日数组有数据后,重新再设置一下vualue才能跳转到对应位置
that.setData({
value: [yearIdx, monthIdx, dayIdx],
})
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
nowYear: nowYear,
nowMonth: nowMonth,
nowDay: nowDay,
setDate: setDate,
formatNumber: formatNumber
}
亲测好用 有问题留言嗷.
转载自:https://juejin.cn/post/7408086889590226998