微信小程序--多种类型日期选择器（年月、月日...）

这里写自定义目录标题
微信小程序--多种类型日期选择器（年月、月日...）
时间选择器（年月日）
时间选择器（年月）
时间选择器（年）
时间选择器（月日）
时间选择器（月）
时间选择器（日）
微信小程序–多种类型日期选择器（年月、月日…）
在业务开发的过程中，有许多对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