微信小程序自定义日期选择器

最新推荐文章于 2024-09-16 22:58:00 发布

半眸子

最新推荐文章于 2024-09-16 22:58:00 发布

阅读量1.1k

点赞数 1

分类专栏：前端微信小程序文章标签：前端小程序

本文链接：https://blog.csdn.net/qq_31888873/article/details/114979567

版权

本文介绍了如何在微信小程序中自定义日期选择器，以解决原生组件样式不一致的问题。通过使用picker-view组件，并提供了wxml、js代码示例，包括快速滚动时的取值优化。同时，提到了在组件化时可能遇到的问题，如快速滚动后确认时的值重置问题。文章还指出可能存在未知的bug和响应速度问题，并给出了只允许选择特定天数内的日期的修改建议。

摘要由CSDN通过智能技术生成

自定义日期选择器（当前起）

注意：(很懒，没做优化，很多重复代码),这个只适合直接在页面中使用，封装到组件中会有问题，快速滚动然后点击确认时，会自动调用bindchange事件将value下标重置为【0,0，0】，目前我还没办法解决，而且可能还有bug我没测试到的。

微信有自带的日期选择器，但是安卓苹果样式会有差别，而且按钮样式无法修改，无法做到与整个小程序设计样式一致，所以就需要自定义一个。

这里需要用到picker-view组件。

wxml 代码

<view class="picker-view">
   <picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px;" 		 value="{
  {date}}" bindchange="pickerChange">
      <picker-view-column>
        <view wx:for="{
  {years}}" wx:key="index" style="line-height: 50px; text-align: center;">{
  {item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{
  {months}}"  wx:key="index" style="line-height: 50px; text-align: center;">{
  {item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{
  {days}}"  wx:key="index" style="line-height: 50px; text-align: center;">{
  {item}}日</view>
      </picker-view-column>
    </picker-view>
    <view class="picker-btn-box">
      <view class="picker-btn" catchtap="cancelPicker">取消</view>
      <view class="picker-cbtn" catchtap="confirmDate">确认</view>
    </view>
</view>

js代码（快速滚动取值优化参考（附中的pickerChange））

data:{
	nowyear: '',//当前年，用来限定只能选择往后的日期
    nowmonth: '',//当前月
    nowday: '',//当前日
    years: [],//年
    months: [],//月
    days: [],//日
    date: [],//选择器对应显示的下秒
}，
onLoad: function (options) {
	//初始化选择器数据
	let year = new Date().getFullYear();
    let years = [];
    for (let i = 0; i < 5; i++) {
      years.push(year + i);
    }
    let month = new Date().getMonth() + 1;
    let months = [];
    for (let i = 0; i <= (12 - month); i++) {
      months.push(month + i);
    }

    let day = new Date().getDate();
    let days = [];
	//闰年
    if (year % 4 == 0) {
      if (month === 2) {//二月
        for (let i = 0; i <= (29 - day); i++) {
          days.push(day + i);
        }
      } else {//非二月
        if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {//大月
          for (let i = 0; i <= (31 - day); i++) {
            days.push(day + i);
          }
        } else {//小月
          for (let i = 0; i <= (30 - day); i++) {
            days.push(day + i);
          }
        }
      }
    } else {
      if (month === 2) {
        for (let i = 0; i <= (28 - day); i++) {
          days.push(day + i);
        }
      } else {
        if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
          for (let i = 0; i <= (31 - day); i++) {
            days.push(day + i);
          }
        } else {
          for (let i = 0; i <= (30 - day); i++) {
            days.push(day + i);
          }
        }
      }
    }

    this.setData({
      years: years,
      months: months,
      days: days,
      nowday: day,
      nowyear: year,
      nowmonth: month
    })
},
  pickerChange(e) {
    let that = this;
    let value = e.detail.value;
    let date = tool.deepClone(this.data.date);
    let d = this.data.days[this.data.date[2]];
    //改变年
    if (value[0] != this.data.date[0]) {
      // 选择本年(月份需要改变)
      if (this.data.years[value[0]] == this.data.nowyear) {
        let year = this.data.years[value[0]];
        let month = this.data.months[value[1]];
        let nowmonth = this.data.nowmonth;

        if (month <= nowmonth) {
          value[1] = 0;
        } else {
          value[1] = -1;
        }



        let months = [];
        for (let i = 0; i <= (12 - nowmonth); i++) {
          months.push(i + nowmonth);
          if (value[1] < 0 && (i + nowmonth) == month) {
            value[1] = i;
          }
        }
        if (month <= nowmonth) {
          let m = nowmonth;
          let day = this.data.nowday;
          let days = [];

          if (year % 4 == 0) {
            if (m === 2) {
              for (let i = 0; i <= (29 - day); i++) {
                days.push(day + i);
              }
            } else {
              if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                for (let i = 0; i <= (31 - day); i++) {
                  days.push(day + i);
                }
              } else {
                for (let i = 0; i <= (30 - day); i++) {
                  days.push(day + i);
                }
              }
            }
          } else {
            if (m === 2) {
              for (let i = 0; i <= (28 - day); i++) {
                days.push(day + i);
              }
            } else {
              if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                for (let i = 0; i <= (31 - day); i++) {
                  days.push(day + i);
                }
              } else {
                for (let i = 0; i <= (30 - day); i++) {
                  days.push(day + i);
                }
              }
            }
          }

          for (let i = 0; i < days.length; i++) {
            if (days[i] == d) {
              value[2] = i
              that.setData({
                days: days,
                months: months,
                date: value
              }, function () {
                // that.setData({
                //   date: value
                // })
              })
              break;
            }
            if (i == days.length - 1) {
              value[2] = days.length - 1;
              that.setData({
                days: days,
                months: months,
                date: value
              }, function () {
                // that.setData({
                //   date: value
                // })
              })
            }
          }
        } else {
          let day = 1;
          let days = [];

          if (year % 4 == 0) {
            if (month =&#