小程序date选择组件

 

 

 xml:

<maskComponent show="{{showData}}">
    <view class="title color33">{{title}}</view>
    <picker-view mode = 'date' indicator-style="height:51px;color:#00AAB9" indicator-class="select_text"  style="width: 100%;height: 520rpx"
      value="{{datavalue}}" bindchange="bindDateChangeFn" >
      <picker-view-column >
        <view wx:for="{{years}}" class="{{datavalue[0]==index?'activecolor':''}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}年</view>
      </picker-view-column>
      <picker-view-column >
        <view wx:for="{{months}}" class="{{datavalue[1]==index?'activecolor':''}}"  wx:key="index" style="line-height: 50px; text-align: center;">{{item}}月</view>
      </picker-view-column>
      <picker-view-column >
        <view wx:for="{{days}}" class="{{datavalue[2]==index?'activecolor':''}}"  wx:key="index" style="line-height: 50px; text-align: center;">{{item}}日</view>
      </picker-view-column>
    </picker-view>
    <view class="bottom_group">
      <view class="btn" catchtap="Hideselect_disease">取消</view>
      <view class="submit btn" catchtap="onTap">确定</view>
    </view>
  </maskComponent>

wxss:

.title {
  text-align: center;
  font-size: 32rpx;
  padding-top: 48rpx;
  font-weight: bold;
}

/* picker-view-column{
  height: 260rpx!important;
} */

.bottom_group {
  height: 100rpx;
  display: flex;
  margin-top: 20rpx;
}

.btn {
  width: 50%;
  text-align: center;
  font-size: 32rpx;
  line-height: 100rpx;
}

.submit {
  color: #24ADA3;
  position: relative;
}

.submit::before {
  content: "";
  position: absolute;
  width: 1rpx;
  height: 50rpx;
  background-color: #707070;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.activecolor {
  color: #24ADA3;
}

.preservation_tbn {
  width: 633rpx;
  height: 85rpx;
  text-align: center;
  line-height: 85rpx;
  color: #fff;
  position: fixed;
  bottom: 134rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28rpx;
  background: #24ADA3;
  border-radius: 8px;
}

js:

// pages/dataComponent/dataComponent.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    showData: {
      type: Boolean,
      value: false
    },
    value: {
      type: String,
      value: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + new Date().getDate()
    },
    title: {
      type: String,
      value: '标题'
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    years: 0,
    months: 0,
    days: 0,
    nowYear: '',
    nowMonth: '',
    nowDay: '',
    datavalue: [0, 0, 0]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    Hideselect_disease() {
      this.setData({
        showData: false
      })
    },
    onTap: function(){
      console.log(this.data.value);
      let value=this.data.value;
      if(!value){
        value=new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + new Date().getDate();
      }
      this.triggerEvent('submit', {value:value}) //
    },
    initDatas() {
      const date = new Date()
      const nowYear = date.getFullYear()
      const nowMonth = date.getMonth() + 1
      const nowDay = date.getDate();
      // 循环前先清空数组
      this.setData({
        years: [],
        months: [],
      })
      let years = [];
      let months = [];
      for (let i = nowYear - 30; i <= nowYear; i++) {
        years.push(i)
      }
      // 设置月份列表
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      this.setData({
        years: years,
        months: months
      })
      // 初始化当前年月
      console.log(this.data.value);
      if (this.data.value != new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + new Date().getDate()&&this.data.value!='') {
        var birthday_obj = this.data.value.split('-');
        this.getMonth(parseInt(birthday_obj[0]), parseInt(birthday_obj[1]), parseInt(birthday_obj[2]))
      } else {
        this.getMonth(nowYear, nowMonth, nowDay)
      }

    },
    getMonth(year, month, day) {
      let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      let dayNum = 0
      // 通过年和月获取这个月份下有多少天
      if (month === 2) { // 闰年
        dayNum = ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
      } else {
        dayNum = daysInMonth[month - 1]
      }
      let days = [];
      for (let i = 1; i <= dayNum; i++) {
        days.push(i)
      }
      this.setData({
        years: this.data.years,
        months: this.data.months,
        days: days
      })
      // 初始 选中年月日对应下标
      // 获取滚动后 年月日对应的下标
      let yearIdx = this.data.years.findIndex(v => v == year);
      let monthIdx = this.data.months.findIndex(v => v == month);
      let dayIdx = this.data.days.findIndex(v => v == day);

      // 重置滚动后 年月日 的下标
      // 赋值年月日
      this.setData({
        datavalue: [yearIdx, monthIdx, dayIdx],
        nowYear: this.data.years[yearIdx],
        nowMonth: this.data.months[monthIdx] > 9 ? this.data.months[monthIdx] : '0' + this.data.months[monthIdx],
        nowDay: this.data.days[dayIdx] > 9 ? this.data.days[dayIdx] : '0' + this.data.days[dayIdx],
      })
      this.setData({
        value: this.data.nowYear + '-' + this.data.nowMonth + '-' + this.data.nowDay
      })
    },
    bindDateChangeFn({ detail: { value: valIndex } }) {
      //
      let year = this.data.years[valIndex[0]]
      let month = this.data.months[valIndex[1]]
      let day = this.data.days[valIndex[2]]
      this.getMonth(year, month, day);
    },
  },
  attached() {
    this.initDatas();
  }
})