这里写自定义目录标题
微信小程序--多种类型日期选择器（年月、月日...）
时间选择器（年月日）
时间选择器（年月）
时间选择器（年）
时间选择器（月日）
时间选择器（月）
时间选择器（日）
微信小程序–多种类型日期选择器（年月、月日…）
在业务开发的过程中，有许多对picker选择器的使用场景，根据开发需要列出了几种常见的类型，可供大家共同参考、学习
时间选择器（年月日）
效果图：
wxml：
<picker mode="date" header-text="选择时间" value="{{date}}" bindchange="bindDateChange">
<view class="font30">
<text class="color3">填报时间：</text>
<text class="color6">{{date}}</text>
<text class="timeIcon">▼</text>
</view>
</picker>
js
data:{
date:'2021-01-01',
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
wxss
.font30{
font-size: 30rpx;
}
.color3{
color: #333;
}
.color6{
color: #666;
}
.timeIcon{
color:#666;
font-size:18rpx;
margin-left: 5rpx;
}
时间选择器（年月）
效果图：
wxml：
<picker mode="date" header-text="选择时间" fields="month" value="{{date}}" bindchange="bindDateChange">
<view class="font30">
<text class="color3">填报时间：</text>
<text class="color6">{{date}}</text>
<text class="timeIcon">▼</text>
</view>
</picker>
js
data:{
date:'2021-01',
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
wxss
.font30{
font-size: 30rpx;
}
.color3{
color: #333;
}
.color6{
color: #666;
}
.timeIcon{
color:#666;
font-size:18rpx;
margin-left: 5rpx;
}
时间选择器（年）
wxml：
<picker mode="date" header-text="选择时间" fields="year" value="{{date}}" bindchange="bindDateChange">
<view class="font30">
<text class="color3">填报时间：</text>
<text class="color6">{{date}}</text>
<text class="timeIcon">▼</text>
</view>
</picker>
js
data:{
date:'2021',
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
wxss
.font30{
font-size: 30rpx;
}
.color3{
color: #333;
}
.color6{
color: #666;
}
.timeIcon{
color:#666;
font-size:18rpx;
margin-left: 5rpx;
}
时间选择器（月日）
(转载文章 如有雷同 纯属巧合）
这个官方没有给案例 只能自己自定义一个component组件（datePicker）
datePicker.wxml：
<view class='modal-mask' wx:if="{{ showDatePickerPlus }}" bindtap='closeDatePickerPlus'></view>
<view class='datepicker' wx:if="{{ showDatePickerPlus }}" animation="{{animationData}}">
<view class='datepicker-header'>
<view class='datepicker-header-left' bindtap='closeDatePickerPlus'>取消</view>
<view class='datepicker-header-right' bindtap='submitSelectDate'>确定</view>
</view>
<view class='datepicker-content'>
<picker-view value="{{glDateNoYearMutiIndex}}" bindchange="bindDateGlNoYear">
<picker-view-column class="picker-view-column">
<view wx:for="{{glMonthsNoYear}}" wx:key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view wx:for="{{glDaysNoYear}}" wx:key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</view>
datePicker.js：
// component/DatePicker/DatePicker.js
// 公历日期 1900年 - 今天
const glYear = [];
for (let i = 1900; i <= 2049; i++) {
glYear.push(i)
}
// 公历月份
const glMonth = [];
for (let i = 1; i <= 12; i++) {
glMonth.push(i < 10 ? ('0' + i) : i)
}
// 公历天份 28天
const glDay28 = [];
for (let i = 1; i <= 28; i++) {
glDay28.push(i < 10 ? ('0' + i) : i)
}
// 公历天份 29天
const glDay29 = [];
for (let i = 1; i <= 29; i++) {
glDay29.push(i < 10 ? ('0' + i) : i)
}
// 公历天份 30天
const glDay30 = [];
for (let i = 1; i <= 30; i++) {
glDay30.push(i < 10 ? ('0' + i) : i)
}
// 公历天份 31天
const glDay31 = [];
for (let i = 1; i <= 31; i++) {
glDay31.push(i < 10 ? ('0' + i) : i)
}
/**
* 公历年月日处理
*/
function glDateHandler(arr) {
let indexArr = arr
let data = {
"yearCol": glYear,
"monthCol": glMonth,
"dayCol": []
}
if (arr[1] == 0 || arr[1] == 2 || arr[1] == 4 || arr[1] == 6 || arr[1] == 7 || arr[1] == 9 || arr[1] == 11)
data.dayCol = glDay31
else if (arr[1] != 1)
data.dayCol = glDay30
else {
let year = glYear[arr[0]];
data.dayCol = glDay28;
// 判断闰年
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
data.dayCol = glDay29;
}
}
return data;
}
/**
* 公历月日处理 不带年份
*/
function glDateHandlerNoYear(arr) {
let indexArr = arr
let data = {
"monthCol": [],
"dayCol": []
}
data.monthCol = glMonth
if (arr[0] == 0 || arr[0] == 2 || arr[0] == 4 || arr[0] == 6 || arr[0] == 7 || arr[0] == 9 || arr[0] == 11)
data.dayCol = glDay31
else if (arr[0] != 1)
data.dayCol = glDay30
else
data.dayCol = glDay29
return data;
}
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return [year, month, day].map(formatNumber).join('-')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
Component({
behaviors: [],
properties: {
// 控制是否显示日期选择组件的flag
showDatePickerPlus: {
type: Boolean, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: false, // 属性初始值（可选），如果未指定则会根据类型选择一个
// 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
observer: function (newVal, oldVal) {
if (newVal != oldVal) {
if (newVal)
this.showDatePickerPlus()
else
this.closeDatePickerPlus()
}
}
},
initDate: {
type: String,
value: formatTime(new Date())
}
},
// 私有数据，可用于模版渲染
data: {
glDateMutiIndex: [90, 0, 0],
glDateNoYearMutiIndex: [0, 0],
glYears: [],
glMonths: [],
glMonthsNoYear: [],
glDays: [],
glDaysNoYear: [],
animationData: {},// 动画
showDatePickerPlus: false,
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
/**
* 初始化阴阳历数据
*/
let glDateMutiIndex = this.data.glDateMutiIndex;
let glDateNoYearMutiIndex = this.data.glDateNoYearMutiIndex;
let [y,m,d] = this.data.initDate.split('-');
glDateMutiIndex = [glYear.indexOf(parseInt(y)), parseInt(m) - 1, parseInt(d) - 1];
let glDate = glDateHandler(glDateMutiIndex);
glDateNoYearMutiIndex = [parseInt(m) - 1, parseInt(d) - 1];
let glDateNoYear = glDateHandlerNoYear(glDateNoYearMutiIndex);
this.setData({
glDateMutiIndex: glDateMutiIndex,
glDateNoYearMutiIndex: glDateNoYearMutiIndex,
glYears: glDate.yearCol,
glMonths: glDate.monthCol,
glDays: glDate.dayCol,
glMonthsNoYear: glDateNoYear.monthCol,
glDaysNoYear: glDateNoYear.dayCol,
})
},
moved: function () {
},
detached: function () {
},
methods: {
/**
* 公历数据改变监听
*/
bindDateGl: function (e) {
let value = e.detail.value;
let data = glDateHandler(value);
this.setData({
glDateMutiIndex: value,
glYears: data.yearCol,
glMonths: data.monthCol,
glDays: data.dayCol,
})
},
/**
* 公历不带年份数据改变监听
*/
bindDateGlNoYear: function (e) {
let value = e.detail.value;
let data = glDateHandlerNoYear(value);
this.setData({
glDateNoYearMutiIndex: value,
glMonthsNoYear: data.monthCol,
glDaysNoYear: data.dayCol
})
},
/**
* 选择日期->确定
*/
submitSelectDate: function () {
let date = '';
date = (this.data.glMonths[this.data.glDateNoYearMutiIndex[0]] + '-' + this.data.glDaysNoYear[this.data.glDateNoYearMutiIndex[1]])
this.closeDatePickerPlus();
var myEventDetail = {
dateStr: date,
} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('submit', myEventDetail, myEventOption)
},
// 显示日期选择控件
showDatePickerPlus: function () {
var animation = wx.createAnimation({
duration: 160,
timingFunction: 'linear',
delay: 0
})
this.animation = animation
animation.translateY(280).step({duration: 0})
this.setData({
animationData: animation.export(),
showDatePickerPlus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
})
}.bind(this), 160)
},
// 隐藏日期选择控件
closeDatePickerPlus: function () {
this.animation.translateY(280).step()
this.setData({
animationData: this.animation.export(),
})
setTimeout(function () {
this.setData({
showDatePickerPlus: false,
})
}.bind(this), 120)
},
onMyButtonTap: function () {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
_propertyChange: function (newVal, oldVal) {
}
}
})
datePicker.JSON：
{
"component": true,
"usingComponents": {}
}
/* component/DatePicker/DatePicker.wxss */
/* 日期选择器 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.3;
overflow: hidden;
z-index: 500;
color: #fff;
}
.datepicker {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 501;
}
.datepicker-header {
display: flex;
height: 80rpx;
background-color: #e9e9e9;
color: #2f80f2;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
}
.datepicker-header-left {
height: 100%;
margin-left: 30rpx;
display: flex;
align-items: center;
}
.datepicker-header-right {
margin-right: 40rpx;
}
.datetype-toggle {
background: #fff;
border: 1rpx solid #2f80f2;
display: flex;
margin-right: 50rpx;
}
.datetype-item {
width: 80rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}
.datetype-select {
background: #2f80f2;
color: #fff;
}
.datepicker-content {
height: 100%;
}
picker-view {
width: 100%;
height: 480rpx;
}
.picker-view-column {
text-align:center;
line-height: 80rpx;
color: #222;
font-size: 28rpx;
}
index.wxml
<view class="font30 holidaysTime" bindtap='showDatePickerPlus'>
<text class="color3">选择时间：</text>
<text class="color6">{{dateInfo.dateStr}}</text>
<text class="timeIcon">▼</text>
<datepicker-plus bind:submit='submit' showDatePickerPlus='{{show}}' initDate="2018-01-01"></datepicker-plus>
</view>
index.js
data:{
show: false,
dateInfo: {dateStr:'01-01'}
},
submit: function(e) {
console.log(e);
console.log('日期字符串：' + e.detail.dateStr)
this.setData({
dateInfo: e.detail
})
console.log('dateInfo',e.detail);
},
showDatePickerPlus: function() {
this.setData({
show: true
})
},
index.JSON
"usingComponents": {
"datepicker-plus": "/component/DatePicker/DatePicker"
},
index.WXSS
.holidaysTime{
margin-bottom: 60rpx;
}
.font30{
font-size: 30rpx;
}
.color3{
color: #333;
}
.color6{
color: #666;
}
.timeIcon{
color:#666;
font-size:18rpx;
margin-left: 5rpx;
}
时间选择器（月）
效果图：
wxml：
<picker bindchange="bindPickerdateChange" value="{{index}}" range="{{monthArr}}">
<view class="font30">
<text class="color3 margin10">月份</text>
<text class="color6">{{monthArr[index]}}</text>
<text class="color6 timeIcon">▼</text>
</view>
</picker>
js
data:{
index:0,
monthArr:['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
wxss
.font30{
font-size: 30rpx;
}
.color3{
color: #333;
}
.color6{
color: #666;
}
.timeIcon{
color:#666;
font-size:18rpx;
margin-left: 5rpx;
}
时间选择器（日）
效果图：
wxml：
<picker bindchange="bindPickerdateChange" value="{{index}}" range="{{dayArr}}">
<view class="font30">
<text class="color3 margin10">日期</text>
<text class="color6">{{dayArr[index]}}</text>
<text class="color6 timeIcon">▼</text>
</view>
</picker>
js
data:{
index:0,
dayArr:['01日','02日','03日','04日','05日','06日','07日','08日','09日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','20日','21日'],
},
bindPickerdateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
wxss
.font30{
font-size: 30rpx;
}
.color3{
color: #333;
}
.color6{
color: #666;
}
.timeIcon{
color:#666;
font-size:18rpx;
margin-left: 5rpx;
}