微信小程序如何实现日期范围选择

发布时间：2022-07-08 09:37:34 作者：iii
来源：亿速云阅读：1304

微信小程序如何实现日期范围选择

在微信小程序开发中，日期范围选择是一个常见的需求。无论是用于预订系统、报表生成，还是其他需要用户选择时间段的场景，实现一个高效、易用的日期范围选择功能都非常重要。本文将详细介绍如何在微信小程序中实现日期范围选择功能，包括使用原生组件、自定义组件以及一些优化技巧。

1. 使用原生组件实现日期范围选择

微信小程序提供了原生的日期选择组件 picker，可以通过设置 mode 为 date 来实现日期选择。虽然原生组件功能有限，但对于一些简单的需求，使用原生组件可以快速实现日期范围选择。

1.1 基本实现

首先，我们可以在页面的 wxml 文件中添加两个 picker 组件，分别用于选择开始日期和结束日期。

<view class="container">
  <picker mode="date" start="2020-01-01" end="2030-12-31" bindchange="bindStartDateChange">
    <view class="picker">开始日期：{{startDate}}</view>
  </picker>
  <picker mode="date" start="2020-01-01" end="2030-12-31" bindchange="bindEndDateChange">
    <view class="picker">结束日期：{{endDate}}</view>
  </picker>
</view>

在 js 文件中，我们需要定义 startDate 和 endDate 的初始值，并实现 bindStartDateChange 和 bindEndDateChange 方法来处理日期选择事件。

Page({
  data: {
    startDate: '2023-01-01',
    endDate: '2023-12-31'
  },

  bindStartDateChange: function(e) {
    this.setData({
      startDate: e.detail.value
    });
  },

  bindEndDateChange: function(e) {
    this.setData({
      endDate: e.detail.value
    });
  }
});

1.2 限制结束日期不能早于开始日期

在实际应用中，我们通常需要限制结束日期不能早于开始日期。可以通过在 bindStartDateChange 和 bindEndDateChange 方法中添加逻辑来实现这一功能。

Page({
  data: {
    startDate: '2023-01-01',
    endDate: '2023-12-31'
  },

  bindStartDateChange: function(e) {
    const startDate = e.detail.value;
    const endDate = this.data.endDate;

    if (startDate > endDate) {
      wx.showToast({
        title: '开始日期不能晚于结束日期',
        icon: 'none'
      });
      return;
    }

    this.setData({
      startDate: startDate
    });
  },

  bindEndDateChange: function(e) {
    const endDate = e.detail.value;
    const startDate = this.data.startDate;

    if (endDate < startDate) {
      wx.showToast({
        title: '结束日期不能早于开始日期',
        icon: 'none'
      });
      return;
    }

    this.setData({
      endDate: endDate
    });
  }
});

1.3 优化用户体验

为了提高用户体验，可以在用户选择日期后，自动调整另一个日期的可选范围。例如，当用户选择了一个开始日期后，结束日期的可选范围应该从开始日期开始。

Page({
  data: {
    startDate: '2023-01-01',
    endDate: '2023-12-31'
  },

  bindStartDateChange: function(e) {
    const startDate = e.detail.value;
    const endDate = this.data.endDate;

    if (startDate > endDate) {
      this.setData({
        endDate: startDate
      });
    }

    this.setData({
      startDate: startDate
    });
  },

  bindEndDateChange: function(e) {
    const endDate = e.detail.value;
    const startDate = this.data.startDate;

    if (endDate < startDate) {
      wx.showToast({
        title: '结束日期不能早于开始日期',
        icon: 'none'
      });
      return;
    }

    this.setData({
      endDate: endDate
    });
  }
});

2. 使用自定义组件实现日期范围选择

虽然原生组件可以满足一些基本需求，但在实际开发中，我们可能需要更复杂的功能，例如日历视图、多选日期等。这时，使用自定义组件是一个更好的选择。

2.1 创建自定义组件

首先，我们需要创建一个自定义组件。在微信小程序中，自定义组件的创建和使用非常简单。我们可以通过以下步骤创建一个日期范围选择组件。

2.1.1 创建组件目录

在项目的 components 目录下创建一个新的目录，例如 date-range-picker。

components/
  date-range-picker/
    date-range-picker.js
    date-range-picker.json
    date-range-picker.wxml
    date-range-picker.wxss

2.1.2 定义组件结构

在 date-range-picker.wxml 文件中定义组件的结构。

<view class="date-range-picker">
  <picker mode="date" start="{{start}}" end="{{end}}" bindchange="bindStartDateChange">
    <view class="picker">开始日期：{{startDate}}</view>
  </picker>
  <picker mode="date" start="{{start}}" end="{{end}}" bindchange="bindEndDateChange">
    <view class="picker">结束日期：{{endDate}}</view>
  </picker>
</view>

在 date-range-picker.js 文件中定义组件的逻辑。

Component({
  properties: {
    start: {
      type: String,
      value: '2020-01-01'
    },
    end: {
      type: String,
      value: '2030-12-31'
    }
  },

  data: {
    startDate: '2023-01-01',
    endDate: '2023-12-31'
  },

  methods: {
    bindStartDateChange: function(e) {
      const startDate = e.detail.value;
      const endDate = this.data.endDate;

      if (startDate > endDate) {
        this.setData({
          endDate: startDate
        });
      }

      this.setData({
        startDate: startDate
      });

      this.triggerEvent('startdatechange', { value: startDate });
    },

    bindEndDateChange: function(e) {
      const endDate = e.detail.value;
      const startDate = this.data.startDate;

      if (endDate < startDate) {
        wx.showToast({
          title: '结束日期不能早于开始日期',
          icon: 'none'
        });
        return;
      }

      this.setData({
        endDate: endDate
      });

      this.triggerEvent('enddatechange', { value: endDate });
    }
  }
});

2.1.3 使用自定义组件

在需要使用日期范围选择的页面中，引入并使用自定义组件。

{
  "usingComponents": {
    "date-range-picker": "/components/date-range-picker/date-range-picker"
  }
}

在 wxml 文件中使用组件。

<view class="container">
  <date-range-picker start="2020-01-01" end="2030-12-31" bindstartdatechange="onStartDateChange" bindenddatechange="onEndDateChange"></date-range-picker>
</view>

在 js 文件中处理组件的事件。

Page({
  onStartDateChange: function(e) {
    console.log('开始日期:', e.detail.value);
  },

  onEndDateChange: function(e) {
    console.log('结束日期:', e.detail.value);
  }
});

2.2 添加日历视图

为了进一步提升用户体验，我们可以在自定义组件中添加一个日历视图，允许用户通过点击日历选择日期范围。

2.2.1 引入日历组件

可以使用第三方日历组件，例如 wux-weapp 中的日历组件。首先，安装并引入 wux-weapp。

npm install wux-weapp

在 app.json 中引入组件。

{
  "usingComponents": {
    "wux-calendar": "/miniprogram_npm/wux-weapp/calendar/index"
  }
}

2.2.2 在自定义组件中使用日历组件

在 date-range-picker.wxml 中添加日历组件。

<view class="date-range-picker">
  <wux-calendar
    visible="{{calendarVisible}}"
    type="range"
    bind:change="onCalendarChange"
    bind:close="onCalendarClose"
  ></wux-calendar>
  <view class="picker" bindtap="openCalendar">选择日期范围</view>
</view>

在 date-range-picker.js 中处理日历组件的逻辑。

Component({
  data: {
    calendarVisible: false,
    startDate: '2023-01-01',
    endDate: '2023-12-31'
  },

  methods: {
    openCalendar: function() {
      this.setData({
        calendarVisible: true
      });
    },

    onCalendarChange: function(e) {
      const { startDate, endDate } = e.detail.value;

      this.setData({
        startDate: startDate,
        endDate: endDate,
        calendarVisible: false
      });

      this.triggerEvent('startdatechange', { value: startDate });
      this.triggerEvent('enddatechange', { value: endDate });
    },

    onCalendarClose: function() {
      this.setData({
        calendarVisible: false
      });
    }
  }
});

2.3 优化日历视图

为了进一步提升用户体验，可以在日历视图中添加一些优化，例如高亮显示已选日期范围、禁用不可选日期等。

2.3.1 高亮显示已选日期范围

可以通过设置 wux-calendar 组件的 selected 属性来高亮显示已选日期范围。

<wux-calendar
  visible="{{calendarVisible}}"
  type="range"
  selected="{{selectedDates}}"
  bind:change="onCalendarChange"
  bind:close="onCalendarClose"
></wux-calendar>

在 date-range-picker.js 中设置 selectedDates。

Component({
  data: {
    calendarVisible: false,
    startDate: '2023-01-01',
    endDate: '2023-12-31',
    selectedDates: []
  },

  methods: {
    openCalendar: function() {
      this.setData({
        calendarVisible: true,
        selectedDates: [this.data.startDate, this.data.endDate]
      });
    },

    onCalendarChange: function(e) {
      const { startDate, endDate } = e.detail.value;

      this.setData({
        startDate: startDate,
        endDate: endDate,
        calendarVisible: false,
        selectedDates: [startDate, endDate]
      });

      this.triggerEvent('startdatechange', { value: startDate });
      this.triggerEvent('enddatechange', { value: endDate });
    },

    onCalendarClose: function() {
      this.setData({
        calendarVisible: false
      });
    }
  }
});

2.3.2 禁用不可选日期

可以通过设置 wux-calendar 组件的 disabledDate 属性来禁用不可选日期。

<wux-calendar
  visible="{{calendarVisible}}"
  type="range"
  selected="{{selectedDates}}"
  disabledDate="{{disabledDate}}"
  bind:change="onCalendarChange"
  bind:close="onCalendarClose"
></wux-calendar>

在 date-range-picker.js 中设置 disabledDate。

Component({
  data: {
    calendarVisible: false,
    startDate: '2023-01-01',
    endDate: '2023-12-31',
    selectedDates: [],
    disabledDate: function(current) {
      return current < new Date('2020-01-01') || current > new Date('2030-12-31');
    }
  },

  methods: {
    openCalendar: function() {
      this.setData({
        calendarVisible: true,
        selectedDates: [this.data.startDate, this.data.endDate]
      });
    },

    onCalendarChange: function(e) {
      const { startDate, endDate } = e.detail.value;

      this.setData({
        startDate: startDate,
        endDate: endDate,
        calendarVisible: false,
        selectedDates: [startDate, endDate]
      });

      this.triggerEvent('startdatechange', { value: startDate });
      this.triggerEvent('enddatechange', { value: endDate });
    },

    onCalendarClose: function() {
      this.setData({
        calendarVisible: false
      });
    }
  }
});

3. 总结

在微信小程序中实现日期范围选择功能，可以通过原生组件快速实现基本功能，也可以通过自定义组件实现更复杂的功能。在实际开发中，根据需求选择合适的实现方式，并结合一些优化技巧，可以提升用户体验。希望本文的介绍能够帮助你在微信小程序中实现一个高效、易用的日期范围选择功能。

微信小程序如何实现日期范围选择

微信小程序如何实现日期范围选择

1. 使用原生组件实现日期范围选择

1.1 基本实现

1.2 限制结束日期不能早于开始日期

1.3 优化用户体验

2. 使用自定义组件实现日期范围选择

2.1 创建自定义组件

2.1.1 创建组件目录

2.1.2 定义组件结构

2.1.3 使用自定义组件

2.2 添加日历视图

2.2.1 引入日历组件

2.2.2 在自定义组件中使用日历组件

2.3 优化日历视图

2.3.1 高亮显示已选日期范围

2.3.2 禁用不可选日期

3. 总结

相关阅读