【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）

<view>
  <view class="date-picker">
    <view></view>
    <picker mode="date"  end="{{checkMaxDate}}" value="{{startDateIndex}}" bindchange="bindCheckinDateChange">
      <view class="picker-item">入住日期: {{startDateIndex}}</view>
    </picker>
  </view>
  <view>
  ========
  </view>
  <view class="date-picker">
    <view></view>
    <picker mode="date" start="{{checkMinDate}}" value="{{endDateIndex}}" bindchange="bindCheckoutDateChange">
      <view class="picker-item">离开日期: {{endDateIndex}}</view>
    </picker>
  </view>
</view>

// pages/contact/contact.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    startDateIndexInit: '',
    checkMaxDate: '',
    startDateIndex: '',
    endDateIndexInit: '',
    checkMinDate: '',
    endDateIndex: '',
  },
  // 在入住日期 picker 组件的 bindchange 事件回调函数中更新入住日期的值，并根据当前选择的日期设置离开日期的最小可选日期
  bindCheckinDateChange: function (e) {
    const checkinDate = e.detail.value;
    const todayStr = new Date(checkinDate);
    const td = new Date(todayStr);
    td.setDate(td.getDate() + 1);
    // const td = td.toISOString().substring(0, 10);
    // const  new Date(checkinDate).getTime() + 24 * 60 * 60 * 1000
    console.dir('In ======> '+ td.toISOString().substring(0, 10));
    this.setData({
      startDateIndex: checkinDate,
      checkMinDate: td.toISOString().substring(0, 10)
    });
  },
  // 在离开日期 picker 组件的 bindchange 事件回调函数中更新离开日期的值，并根据当前选择的日期设置入住日期的最大可选日期
  bindCheckoutDateChange: function (e) {
    const checkoutDate = e.detail.value;
    const yesterdayStr = new Date(checkoutDate);
    const yd = new Date(yesterdayStr);
    yd.setDate(yd.getDate() - 1);
    // console.dir(checkoutDate); 
    console.dir('Out ======> '+ yd.toISOString().substring(0, 10));
    if (checkoutDate <= this.data.startDateIndex) {
      wx.showToast({
        title: '离开日期必须晚于入住日期',
        icon: 'none'
      });
      return;
    }
    // new Date(checkoutDate).getTime() - 24 * 60 * 60 * 1000
    this.setData({
      endDateIndex: checkoutDate,
      checkMaxDate: yd.toISOString().substring(0, 10)
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const today = new Date();
    const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
    console.dir("today ==== "+ today);
    console.dir("tomorrow ==== "+ tomorrow.toLocaleDateString().substring(0, 10));
    this.setData({
      // startDateIndexInit: today.getTime(),
      checkMaxDate: today.toISOString().substring(0, 10),
      startDateIndex: today.toISOString().substring(0, 10),
      checkMinDate: tomorrow.toISOString().substring(0, 10),
      // endDateIndexInit: tomorrow.getTime(), // 设置为明天的日期
      endDateIndex: tomorrow.toISOString().substring(0, 10),
    });
  },
})