微信小程序自定义日期选择组件（带 “至今” 选项）

组件引用方式：
全局引用就是在 app.json 文件添加：

"usingComponents": {
    "pickerDate": "/components/pickerDate/index"
  }

同理：组件局部引用就是在需要用到该组件的页面的.json文件中添加上面代码

主页面（date文件夹）：
date.wxml

1. fields 属性值有：year、month、day 不填默认为day
2. quick 添加该属性表示年份数组中会添加一个【至今】选项】
3. selectDate 属性值为选择的日期

<view>
  <text style="color: red">选中日期：{{endTime}}</text>
  <pickerDate fields="day" selectDate="{{endTime}}" placeholder="请选择离职日期" quick bind:changeDate="onChangeDate"></pickerDate>
</view>

date.js

// date/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    endTime: ''
  },

  onChangeDate(e) {
    this.setData({
      endTime: e.detail
    })
  },
})

组件页面（components/pickerDate文件夹）：

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
}