微信小程序实现时间选择

本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下 

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 () {
 
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。

原文地址:https://blog.csdn.net/w_s_x_b/article/details/109022062