Renderings:
1. Create a new folder in components
<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>
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)
},
},
})
.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;
z-index: 100;
}
.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;
}
{
"component": true,
"usingComponents": {}
}
Create a new date.js in utils
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
}
Introduced in app.json
"pickerDate": "/components/pickerDate/pickerDate"Use it on the page you want to use
<view class="time_box">
<view class="time_left"><pickerDate fields="month" selectDate="{
{startTime}}" placeholder="请选择开始时间" bind:changeDate="changeStart"></pickerDate></view>
<view class="time_middle">-</view>
<view class="time_left"><pickerDate fields="month" selectDate="{
{endTime}}" placeholder="请选择离职时间" quick bind:changeDate="changeEnd"></pickerDate></view>
</view>Page({
/**
* 页面的初始数据
*/
data: {
endTime: '',
startTime:''
},
changeStart(e) {
this.setData({
startTime:e.detail.date
})
},
changeEnd(e) {
this.setData({
endTime:e.detail.date
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})The following is the rendering:
Can be passed whether to pass 'quick', if passed, there will be a so far option, if not passed, there will be no
This is by far the option! ! !
It took me a long time to find it. I couldn’t use it when I searched before. Come on, ask me if you don’t understand anything. Now there is a small bug that scrolls too slowly.