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

这篇具有很好参考价值的文章主要介绍了微信小程序--多种类型日期选择器（年月、月日...）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这里写自定义目录标题
微信小程序--多种类型日期选择器（年月、月日...）
时间选择器（年月日）
时间选择器（年月）
时间选择器（年）
时间选择器（月日）
时间选择器（月）
时间选择器（日）
微信小程序–多种类型日期选择器（年月、月日…）
在业务开发的过程中，有许多对picker选择器的使用场景，根据开发需要列出了几种常见的类型，可供大家共同参考、学习

时间选择器（年月日）
效果图：

年月日期控件,微信小程序,前端,javascript,微信小程序,小程序,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>

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;
}

时间选择器（年月）

效果图：

年月日期控件,微信小程序,前端,javascript,微信小程序,小程序,picker

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>

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;
}

时间选择器（年）

年月日期控件,微信小程序,前端,javascript,微信小程序,小程序,picker

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>

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;
}

时间选择器（月日）

(转载文章如有雷同纯属巧合）

年月日期控件,微信小程序,前端,javascript,微信小程序,小程序,picker

这个官方没有给案例只能自己自定义一个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;
}

时间选择器（月）

效果图：

年月日期控件,微信小程序,前端,javascript,微信小程序,小程序,picker

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>

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;
}

时间选择器（日）

效果图：

年月日期控件,微信小程序,前端,javascript,微信小程序,小程序,picker

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>

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文章来源地址https://www.toymoban.com/news/detail-810854.html

.font30{
  font-size: 30rpx;
}

.color3{
  color: #333;
}

.color6{
  color: #666;
}

.timeIcon{
  color:#666;
  font-size:18rpx;
  margin-left: 5rpx;
}

到了这里，关于微信小程序--多种类型日期选择器（年月、月日...）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！