微信小程序组件: 日期选择器

效果图 picker-date

1. 可以设置初始值(按照规定格式, 需要用-隔开, 并且补零), 没有初始值默认当天;

2. 切换年月时同时切换日的组;

3. 闰年二月的日期.

其中闰年的判断方法为：公历年份是4的倍数，且不是100的倍数，为普通闰年。公历年份是整百数，且必须是400的倍数才是世纪闰年。

这个也用到了popup嘿嘿往前翻翻就有昂~~

组件html ⬇️

<njx-popup show="{{show}}" titleText="请选择日期" bindsubmit="submit">
  <picker-view wx:if="{{show}}" value="{{dateValue}}" bindchange="changeDate" class="picker-view" indicator-class="picker-item-active">
    <picker-view-column>
      <view class="picker-item {{dateValue[0] === index ? 'active':''}}" wx:for="{{yearList}}" wx:key="label">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{dateValue[1] === index ? 'active':''}}" wx:for="{{monthList}}" wx:key="label">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{dateValue[2] === index ? 'active':''}}" wx:for="{{dayList}}" wx:key="label">{{item}}</view>
    </picker-view-column>
  </picker-view>
</njx-popup>

样式没有新的, 放在了公共样式里, 不碍事😊懒得粘啦哈哈哈哈哈哈哈

组件 js ⬇️

const date = new Date();
let yearList = [];
let monthList = [];
let dayList = [];
// 补零儿
function addZero(value) {
  return value < 10 ? '0' + value : value.toString();
}
// 年份 1900~2099
for (let i = 2022; i <= 2025; i++) {
  yearList.push(addZero(i));
}
// 月份 1~12
for (let i = 1; i <= 12; i++) {
  monthList.push(addZero(i));
}
// 日子: 30、31、二月
function getDays(year,month) {
  dayList = [];
  let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  // 判断是否闰年
  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    days[1] = 29;
  }
  for(let i = 1; i <= days[month - 1]; i++) {
    dayList.push(addZero(i));
  }
  return dayList;
}

Component({
  properties: {
    show: Boolean,
    value: String,
  },
  data: {
    init: false,

    yearList: [],
    monthList: [],
    dayList: [],

    dateValue: [0, 0, 0],
  },
  methods: {
    initValue(value) {
      let year;
      let month;
      let day;
      let dayList;

      if (!value) {
        // 传入值为空: 定位今天
        year = addZero(date.getFullYear());
        month = addZero(date.getMonth() + 1);
        day = addZero(date.getDate());
      } else {
        // 转换格式
        value = value.split('-');
        year = value[0];
        month = value[1];
        day = value[2];
      }

      dayList = getDays(year,month);

      let yearIndex = yearList.findIndex(item => item === year);
      let monthIndex = monthList.findIndex(item => item === month);
      let dayIndex = dayList.findIndex(item => item === day);
      
      this.setData({
        yearList,
        monthList,
        dayList,
        dateValue: [yearIndex, monthIndex, dayIndex],
      })
    },
    changeDate(e) {
      let beforeValue = this.data.dateValue;
      let dateValue = e.detail.value;
      let dayList = [...this.data.dayList];

      if(beforeValue[0] !== dateValue[0] || beforeValue[1] !== dateValue[1]) {
        dayList = getDays(this.data.yearList[dateValue[0]], this.data.monthList[dateValue[1]]);
      }

      this.setData({
        dayList,
        dateValue,
      })
    },
    submit() {
      let idx = this.data.dateValue;
      let value = `${yearList[idx[0]]}-${monthList[idx[1]]}-${dayList[idx[2]]}`;
      this.triggerEvent("submit",{
        value
      })
    },
  },
  observers: {
    show(show) {
      show && this.initValue(this.data.value);
    },
  }
})

使用页面html ⬇️

<njx-picker-date show="{{datePickerShow}}" value="{{date}}" bindsubmit="submitDate" /> 

使用页面js

嘿嘿没啥好写的, 就是有值赋值, 没值为空. 打开时将datePickerShow设置为true. 再写个sumitDate取值就行😊

💃tada~~~_{一个日期picker组件就完成啦}~