微信小程序如何實現日期范圍選擇

微信小程序如何實現日期范圍選擇

在微信小程序開發中，日期范圍選擇是一個常見的需求。無論是用于預訂系統、報表生成，還是其他需要用戶選擇時間段的場景，實現一個高效、易用的日期范圍選擇功能都非常重要。本文將詳細介紹如何在微信小程序中實現日期范圍選擇功能，包括使用原生組件、自定義組件以及一些優化技巧。

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. 總結

在微信小程序中實現日期范圍選擇功能，可以通過原生組件快速實現基本功能，也可以通過自定義組件實現更復雜的功能。在實際開發中，根據需求選擇合適的實現方式，并結合一些優化技巧，可以提升用戶體驗。希望本文的介紹能夠幫助你在微信小程序中實現一個高效、易用的日期范圍選擇功能。