2023实现微信小程序中的日期选择器效果

随着微信小程序的广泛应用，越来越多的开发者需要实现日期选择器效果来提高用户体验。本文将介绍如何在微信小程序中实现日期选择器效果，并给出具体的代码示例。

一、实现思路

实现日期选择器效果的基本思路是：首先在 WXML 中建立日期选择器组件，通过 JavaScript 来动态生成日期数据，再通过监听组件的 change 事件来获取用户选择的日期信息。

二、实现过程

1. 在 WXML 中建立日期选择器组件

我们可以使用微信小程序提供的 picker-view 组件来实现日期选择器效果。picker-view 组件可以将类似于列表的内容呈现为滚动选择器的形式。

在 WXML 中，我们可以这样写：

<picker-view bindchange="onDateChange" value="{{dateIndex}}" style="width: 100%; height: 200rpx;">
  <picker-view-column>
    <view wx:for="{{years}}" wx:key="year">{{item}}年</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{months}}" wx:key="month">{{item}}月</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{days}}" wx:key="day">{{item}}日</view>
  </picker-view-column>
</picker-view>

上述代码创建了一个 picker-view 组件，绑定了 onDateChange 事件和 dateIndex 变量。其中，years、months 和 days 变量用来存储生成的年月日数据。

2. JavaScript 动态生成日期数据

为了生成日期数据，我们需要获取当前的年、月和日，然后使用比较简单的算法来分别生成年、月和日的数组。

在 JavaScript 中，我们可以这样写：

Page({
  data: {
    years: [],
    months: [],
    days: [],
    dateIndex: 0
  },
  onLoad: function () {
    // 获取当前年月日
    var datetime = new Date();
    var year = datetime.getFullYear();
    var month = datetime.getMonth() + 1;
    var day = datetime.getDate();

    // 设置年份数组，从当前年往前推 100 年
    var years = [];
    for (var i = year; i >= year - 100; i--) {
      years.push(i);
    }

    // 设置月份数组
    var months = [];
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }

    // 设置日期数组，根据年月计算出当月的天数
    var days = [];
    var dayCount = this.getDaysOfMonth(year, month);
    for (var i = 1; i <= dayCount; i++) {
      days.push(i);
    }

    // 更新数据
    this.setData({
      years: years,
      months: months,
      days: days
    });
  },
  // 根据年月获取当月的天数
  getDaysOfMonth: function (year, month) {
    var dayCount = 31;
    switch (month) {
      case 2:
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
          dayCount = 29;
        } else {
          dayCount = 28;
        }
        break;
      case 4:
      case 6:
      case 9:
      case 11:
        dayCount = 30;
        break;
    }
    return dayCount;
  },
  // 监听日期选择器的 change 事件，更新 dateIndex 变量
  onDateChange: function (e) {
    this.setData({
      dateIndex: e.detail.value
    });
  }
});

上述代码首先获取当前的年、月和日，然后根据年份和月份计算当月的天数，并将年、月和日分别存储到 years、months 和 days 数组中。

在 onLoad 函数中，我们调用 getDaysOfMonth 函数来获取当月的天数，并将得到的年、月、日数据保存到 data 变量中。我们还可以在 onLoad 函数中设置初始的 dateIndex 变量为 0。

在 onDateChange 函数中，我们使用 setData 函数来更新 dateIndex 变量，将用户选择的日期信息记录下来。

三、代码示例

完整的微信小程序代码如下所示：

<page>
  <view class="page__body">
    <picker-view bindchange="onDateChange" value="{{dateIndex}}" style="width: 100%; height: 200rpx;">
      <picker-view-column>
        <view wx:for="{{years}}" wx:key="year">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{months}}" wx:key="month">{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{days}}" wx:key="day">{{item}}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</page>

Page({
  data: {
    years: [],
    months: [],
    days: [],
    dateIndex: 0
  },
  onLoad: function () {
    // 获取当前年月日
    var datetime = new Date();
    var year = datetime.getFullYear();
    var month = datetime.getMonth() + 1;
    var day = datetime.getDate();

    // 设置年份数组，从当前年往前推 100 年
    var years = [];
    for (var i = year; i >= year - 100; i--) {
      years.push(i);
    }

    // 设置月份数组
    var months = [];
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }

    // 设置日期数组，根据年月计算出当月的天数
    var days = [];
    var dayCount = this.getDaysOfMonth(year, month);
    for (var i = 1; i <= dayCount; i++) {
      days.push(i);
    }

    // 更新数据
    this.setData({
      years: years,
      months: months,
      days: days
    });
  },
  // 根据年月获取当月的天数
  getDaysOfMonth: function (year, month) {
    var dayCount = 31;
    switch (month) {
      case 2:
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
          dayCount = 29;
        } else {
          dayCount = 28;
        }
        break;
      case 4:
      case 6:
      case 9:
      case 11:
        dayCount = 30;
        break;
    }
    return dayCount;
  },
  // 监听日期选择器的 change 事件，更新 dateIndex 变量
  onDateChange: function (e) {
    this.setData({
      dateIndex: e.detail.value
    });
  }
});

四、总结

本文介绍了如何在微信小程序中实现日期选择器效果，包括建立日期选择器组件、动态生成日期数据以及监听组件的 change 事件来获取用户选择的日期信息。通过本文的实例，读者可以了解到微信小程序的基本开发流程，以及掌握使用 picker-view 组件的方法。读者可以根据本文的示例代码来实现自己的日期选择器效果。