微信小程序原生时间选择框

html

<view class="layer-box">
  <view class="layer-top">
    <view-text catch:tap="close">
      取消
    </view-text>
    <view-text class="confirm-btn" catch:tap="submit">
      确定
    </view-text>
  </view>
  <picker-view wx:if="{{show}}" indicator-style="height: 80rpx;" value="{{dateValue}}" bindchange="changeDate"
    class="page-body" indicator-class="picker-item-active">
    <picker-view-column>
      <view class="picker-item {{dateValue[0] === index ? 'active':''}}" wx:for="{{yearList}}" wx:key="label">{{item}}
        年</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{dateValue[1] === index ? 'active':''}}" wx:for="{{monthList}}" wx:key="label">{{item}}
        月</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{dateValue[2] === index ? 'active':''}}" wx:for="{{dayList}}" wx:key="label">{{item}}
        日</view>
    </picker-view-column>
  </picker-view>
</view>

js

const date = new Date();
let yearList = [];
let monthList = [];
let dayList = [];
// 补零儿
function addZero (value) {
  return value < 10 ? '0' + value : value.toString();
}
// 年份 1900~2099
for (let i = 2022; i <= 2025; i++) {
  yearList.push(addZero(i));
}
// 月份 1~12
for (let i = 1; i <= 12; i++) {
  monthList.push(addZero(i));
}
// 日子: 30、31、二月
function getDays (year, month) {
  dayList = [];
  let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  // 判断是否闰年
  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    days[1] = 29;
  }
  for (let i = 1; i <= days[month - 1]; i++) {
    dayList.push(addZero(i));
  }
  return dayList;
}

Component({
  properties: {
    show: Boolean,
    value: String,
  },
  data: {
    init: false,

    yearList: [],
    monthList: [],
    dayList: [],

    dateValue: [0, 0, 0],
  },
  methods: {
    initValue (value) {
      let year;
      let month;
      let day;
      let dayList;

      if (!value) {
        // 传入值为空: 定位今天
        year = addZero(date.getFullYear());
        month = addZero(date.getMonth() + 1);
        day = addZero(date.getDate());
      } else {
        // 转换格式
        value = value.split('-');
        year = value[0];
        month = value[1];
        day = value[2];
      }

      dayList = getDays(year, month);

      let yearIndex = yearList.findIndex(item => item === year);
      let monthIndex = monthList.findIndex(item => item === month);
      let dayIndex = dayList.findIndex(item => item === day);

      this.setData({
        yearList,
        monthList,
        dayList,
        dateValue: [yearIndex, monthIndex, dayIndex],
      })
    },
    changeDate (e) {
      let beforeValue = this.data.dateValue;
      let dateValue = e.detail.value;
      let dayList = [...this.data.dayList];

      if (beforeValue[0] !== dateValue[0] || beforeValue[1] !== dateValue[1]) {
        dayList = getDays(this.data.yearList[dateValue[0]], this.data.monthList[dateValue[1]]);
      }

      this.setData({
        dayList,
        dateValue,
      })
    },
    submit () {
      let idx = this.data.dateValue;
      let value = `${yearList[idx[0]]}-${monthList[idx[1]]}-${dayList[idx[2]]}`;
      this.triggerEvent("submit", {
        value
      })
    },
    close () {
      this.triggerEvent("close")
    },
  },
  observers: {
    show (show) {
      let value = this.data.value
      if (!value) {
        value = "2023-10-10"
      }
      show && this.initValue(value);
    },
  }
})

wxss

/* 日期选择弹框 start */


.layer-box {
  width: 100%;
  background: #fff;
  height: 400rpx;
}


.layer-box picker-view {
  height: 260rpx;
  width: 88%;
  margin: 0 auto;
}

.layer-box .picker-indicator {
  height: 80rpx;
  line-height: 80rpx;
}

.layer-box picker-view-column view {
  line-height: 84rpx;
  text-align: center;
  width: 96%;
  margin: 0 auto;
}

.layer-box .box-top .top-background {
  height: 80rpx;
  width: 88%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.box-top .top-background view {
  height: 100%;
  width: 96%;
  margin: 0 auto;
  background: rgba(195, 218, 49, 0.12);
  border-top: 2rpx solid #D9E87D;
  border-bottom: 2rpx solid #C3DA31;
  margin: 0 4rpx;
  box-sizing: border-box;
}

.layer-box .box-bottom {
  display: flex;
}

.layer-box .box-bottom button {
  margin: 0;
  padding: 0;
  width: 50%;
  border-radius: 0;
  border: none;
  background: #fff;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 34rpx;
  border-top: 2rpx solid #D8D8D8;
}

.layer-box .box-bottom .btn-confirm {
  border-right: 1rpx solid #D8D8D8;
  color: #C3DA31;
}

.layer-box .box-bottom .btn-cancel {
  border-left: 1rpx solid #D8D8D8;
  color: #B1B1B4;
}

.layer-top {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  display: flex;
  justify-content: space-between;
}

.layer-top view-text {
  display: inline-block;
  width: 160rpx;
  text-align: center;
}

.layer-top .confirm-btn {
  color: #467CFD;
}

/* 日期选择弹框 end */

 

const date = new Date();

let yearList = [];

let monthList = [];

let dayList = [];

// 补零儿

function addZero (value) {

  return value < 10 ? '0' + value : value.toString();

}

// 年份 1900~2099

for (let i = 2022; i <= 2025; i++) {

  yearList.push(addZero(i));

}

// 月份 1~12

for (let i = 1; i <= 12; i++) {

  monthList.push(addZero(i));

}

// 日子: 30、31、二月

function getDays (year, month) {

  dayList = [];

  let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  // 判断是否闰年

  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {

    days[1] = 29;

  }

  for (let i = 1; i <= days[month - 1]; i++) {

    dayList.push(addZero(i));

  }

  return dayList;

}

Component({

  properties: {

    show: Boolean,

    value: String,

  },

  data: {

    init: false,

    yearList: [],

    monthList: [],

    dayList: [],

    dateValue: [0, 0, 0],

  },

  methods: {

    initValue (value) {

      let year;

      let month;

      let day;

      let dayList;

      if (!value) {

        // 传入值为空: 定位今天

        year = addZero(date.getFullYear());

        month = addZero(date.getMonth() + 1);

        day = addZero(date.getDate());

      } else {

        // 转换格式

        value = value.split('-');

        year = value[0];

        month = value[1];

        day = value[2];

      }

      dayList = getDays(year, month);

      let yearIndex = yearList.findIndex(item => item === year);

      let monthIndex = monthList.findIndex(item => item === month);

      let dayIndex = dayList.findIndex(item => item === day);

      this.setData({

        yearList,

        monthList,

        dayList,

        dateValue: [yearIndex, monthIndex, dayIndex],

      })

    },

    changeDate (e) {

      let beforeValue = this.data.dateValue;

      let dateValue = e.detail.value;

      let dayList = [...this.data.dayList];

      if (beforeValue[0] !== dateValue[0] || beforeValue[1] !== dateValue[1]) {

        dayList = getDays(this.data.yearList[dateValue[0]], this.data.monthList[dateValue[1]]);

      }

      this.setData({

        dayList,

        dateValue,

      })

    },

    submit () {

      let idx = this.data.dateValue;

      let value = `${yearList[idx[0]]}-${monthList[idx[1]]}-${dayList[idx[2]]}`;

      this.triggerEvent("submit", {

        value

      })

    },

    close () {

      this.triggerEvent("close")

    },

  },

  observers: {

    show (show) {

      let value = this.data.value

      if (!value) {

        value = "2023-10-10"

      }

      show && this.initValue(value);

    },

  }

})