Implement date picker effect in WeChat applet

With the widespread application of WeChat mini programs, more and more developers need to implement date picker effects to improve user experience. This article will introduce how to implement the date picker effect in WeChat applet and give specific code examples.

1. Implementation ideas

The basic idea to achieve the date picker effect is: first create a date picker component in WXML, dynamically generate date data through JavaScript, and then listen to the change of the component event to obtain the date information selected by the user.

2. Implementation process

1. Create a date picker component in WXML

We can use the picker-view component provided by the WeChat applet to implement Date picker effect. The picker-view component can render list-like content into a scrolling picker.

In WXML, we can write like this:

<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>

The above code creates a picker-view component and binds the onDateChange event and dateIndex variable. Among them, the years, months and days variables are used to store the generated year, month and day data.

2. JavaScript dynamically generates date data

In order to generate date data, we need to obtain the current year, month and day, and then use a relatively simple algorithm to generate the year, month and day respectively. Array of month and day.

In JavaScript, we can write like this:

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
    });
  }
});

The above code first gets the current year, month and day, then calculates the number of days in the current month based on the year and month, and adds the year, month and The days are stored in the years, months and days arrays respectively.

In the onLoad function, we call the getDaysOfMonth function to get the number of days in the current month, and save the obtained year, month, and day data into the data variable. We can also set the initial dateIndex variable to 0 in the onLoad function.

In the onDateChange function, we use the setData function to update the dateIndex variable and record the date information selected by the user.

3. Code example

The complete WeChat applet code is as follows:

<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
    });
  }
});

4. Summary

This article introduces how to use WeChat applet Implement the date picker effect, including creating a date picker component, dynamically generating date data, and listening to the component's change event to obtain the date information selected by the user. Through the examples in this article, readers can understand the basic development process of WeChat applet and master the method of using the picker-view component. Readers can implement their own date picker effects based on the sample code in this article.

The above is the detailed content of Implement date picker effect in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!