DatetimePicker 时间选择

time.wxs

小程序官方不支持在{{}}与wxs 中直接使用new Date(), wxs 传时间戳 用getDate(时间戳)

function formatNumber(n) {
  n = n.toString();
  return n[1] ? n : '0' + n;
}

/**
 *
 * @param number 时间戳 毫秒
 * @param format 格式 例如 'Y-M-D h:m:s' 返回值为 '2020-11-02 08:22:23'
 */
function formatTime(number, format) {
  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];
  var date = getDate(number);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));
  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));
  for (var i = 0; i < returnArr.length; i++) {
    format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}

// 根据时间戳获取星期
function getWeek(timeStamp) {
  var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  var week = getDate(timeStamp).getDay();
  return weekday[week];
}

module.exports = {
  formatTime: formatTime,
  getWeek: getWeek,
};

vant时间选择的实现

vant组件库的 时间选择器要与Popup弹出层配合使用

1. index.wxml

<wxs
  module="time"
  src="../../../../../utils/time.wxs"
></wxs>

<van-cell
  bind:click="showPopup"
  is-link
  title="日期"
  value="{{time.formatTime(currentDate,'Y年M月D日')}}"
/>

<van-popup
  position="bottom"
  show="{{isShow}}"
>
  <van-datetime-picker
    bind:cancel="onClose"
    bind:confirm="confirmPicker"
    formatter="{{ formatter }}"
    value="{{ currentDate }}"
    type="date"
  />
</van-popup>

2. index.js

Page({
  data: {
    isShow: false,
    currentDate: new Date().getTime(),
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`;
      } else if (type === 'day') {
        return `${value}日`;
      }
      return value;
    },
  },

  confirmPicker(value) {
    this.setData({
      currentDate: value.detail,
      isShow: false,
    });
  },

  showPopup() {
    this.setData({ isShow: true });
  },

  onClose() {
    this.setData({ isShow: false });
  },
});

效果图

微信小程序原生选择器组件—picker

picker

注意事项

这个picker的bindchange事件的e.detail.value转化为时间戳是当前时间的8点，而new Date().getTime()得到的是当前时分秒的时间戳。

当有当前时间之后的时间不可选择的需求时

1. 在data中添加

// 获取当前天的0点0分0秒的时间戳
    currentTime: new Date(
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDate(),
    ).getTime(),

2. 给picker添加

  <picker end="{{time.formatTime(currentTime,'Y-M-D')}}"></picker>

3. 给向后按钮添加判断

<van-icon
      bind:click="afterDay"
      name="arrow"
      wx:if="{{timeStamp < currentTime}}"
    />

无上述需求时代码

1. index.wxml

<view
    class="flex-center"
    style="height:84rpx;border-bottom:1rpx solid #eee"
  >
    <van-icon
      bind:click="beforeDay"
      name="arrow-left"
    />
    <picker
      bindchange="bindDateChange"
      mode="date"
      value="{{time.formatTime(timeStamp,'Y-M-D')}}"
    >
      <view class="picker mh-98">{{time.formatTime(timeStamp,'Y-M-D')}} {{time.getWeek(timeStamp)}}</view>
    </picker>
    <van-icon
      bind:click="afterDay"
      name="arrow"
    />
  </view>

2. index.js

Page({
  data: {
    timeStamp: '',
  },

  onLoad() {
    this.setData({
      timeStamp: new Date().getTime(),
    });
  },

  bindDateChange(e) {
    this.setData({
      timeStamp: new Date(e.detail.value).getTime(),
    });
  },

  beforeDay() {
    let currentTimeStamp = this.data.timeStamp - 24 * 60 * 60 * 1000;
    this.setData({
      timeStamp: currentTimeStamp,
    });
  },

  afterDay() {
    let currentTimeStamp = this.data.timeStamp + 24 * 60 * 60 * 1000;
    this.setData({
      timeStamp: currentTimeStamp,
    });
  },
});

效果图

总结

对比原生与vant,个人感觉还是原生的使用方便一些，界面也更好看一些

	时间选择的使用
选项	点击确认、取消按钮后的反应	点击遮罩层后的反应	使用方式
原生picker组件	自动关闭弹出层，如果你取消了，下次打开时，显示的时间还是你确认选择的时间	自动关闭弹出层	引入picker组件传入对应属性即可
vant-DatetimePicker	需要控制popup的show来展示或隐藏,如果你取消了，下次打开就是你上次未确认选择的时间	不会关闭	需要搭配popup来使用