微信小程序日期选择

效果图

年月日选择，封装成一个组件。左边代表起始日期，右边代表终止日期。

照例，先从wxml开始：

<view class="wrap">
  <picker mode="date" value="{{curDate}}" start="2021年01月01日" end="2021年01月01日" bindchange="onDateChangeLeft">
    <view class="date">{{curLeftDate}}
        <image class="date-down" src="{{dateDownImg}}" mode="widthFix" lazy-load="true" />
    </view>
  </picker>

  <text class="middle">~</text>

  <picker mode="date" value="{{curDate}}" start="2021年01月01日" end="2021年01月01日" bindchange="onDateChangeRight">
    <view class="date">{{curRightDate}}
        <image class="date-down" src="{{dateDownImg}}" mode="widthFix" lazy-load="true" />
    </view>
  </picker>
</view>

这里面使用了picker 微信自带的日期组件。可以调用微信提供的系统组件。

picker

再看wxss

.wrap {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.date {
  width: 223rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background: #F7F7F7;
  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 50rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
}

.middle {
  margin: 18rpx 8rpx;
  font-size: 50rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 22rpx;
}

.date-down {
  width: 14rpx;
  height: 8rpx;
}

最后看 js 文件 ：

Component({
  /**
   * 组件的属性列表
  */
  properties: {
  },

  /**
   * 组件的初始数据
  */
  data: {
    dateDownImg: '下箭头图片.png',
    curLeftDate: '2021年08月13日',
    curRightDate: '2021年09月13日'
  },

  lifetimes: {
    attached (e) {
      const style = this.data.option;
      if (style === 'overview') {
        this.setData({
           isLightStyle: true
        })
      }
    },
  },

  /**
   * 组件的方法列表
  */
  methods: {
    onDateChangeLeft (e) {
      let date = e.detail.value;
      let arr = date.split('-');
      let dateStr = `${arr[0]}年${arr[1]}月${arr[2]}日`;
      this.setData({
        curLeftDate: dateStr
      });
    },

    onDateChangeRight (e) {
      let date = e.detail.value;
      let arr = date.split('-');
      let dateStr = `${arr[0]}年${arr[1]}月${arr[2]}日`;
      this.setData({
        curRightDate: dateStr
      });
    }
  }
})

picker 提供的日期格式是 2021-9-22，这里使用字符串模版，改为 2021年9月22日 格式。

json 文件什么都没引用：

{
  "component": true,
  "usingComponents": {}
}

在使用DateRange组件时，直接引用即可：
<DateRange></DateRange>