微信小程序时间选择

                                                     

xml:

<view class="day-check" style="position:fixed;">
  <picker class="picker_color" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange">
    <view class="line-left"></view>
    <view class="turn_down_view">
      <text class="picker_text">{{dateValue}}</text>
      <image class="img_down" src="/pages/images/turn_down.png"></image>
    </view>
  </picker>
  <text class="text_check">至</text>
  <picker class="picker_color" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange">
    <view class="line-left"></view>
    <view class="turn_down_view">
      <text class="picker_text">{{dateValue}}</text>
      <image class="img_down" src="/pages/images/turn_down.png"></image>
    </view>
  </picker>
</view>

<view class="line_view"></view>

css:

.day-check {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid rgb(212, 212, 212);

}

.picker_color {
  width: 50%;
  height: 30px;
  line-height: 30px;
}

.turn_down_view {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.picker_text {
  width: 50%;
  height: 30px;
  line-height: 30px;
  font-size: 30rpx;
  text-align: center;
}

.img_down {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}

.text_check {
  width: 6%;
  height: 30px;
  line-height: 30px;
  font-size: 30rpx;
  text-align: center;
}

.order_query_item:active{
  background-color: rgb(223, 11, 11);
}

js:

var animation
// 时间
const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  var k = i;
  if (0 <= i && i <= 9) {
    k = "0" + (i);
  } else {
    k = (i);
  }
  months.push(k)
}

for (let i = 1; i <= 31; i++) {
  var k = i;
  if (0 <= i && i <= 9) {
    k = "0" + (i);
  } else {
    k = (i);
  }
  days.push(k)
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0,
    dateValue: '选择时间',
  
  },
  datePickerBindchange: function (e) {
    this.setData({
      dateValue: e.detail.value
    })
  },
  pickChange: function (e) {
    this.setData({
      index: e.detail.value
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})