微信小程序实现时间选择

 更新时间:2022年07月06日 14:53:01   作者:小雅雅家的小凯凯吖  
这篇文章主要为大家详细介绍了微信小程序实现时间选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

相关文章

  • layui 关闭open弹出框 刷新table表格页面的方法

    layui 关闭open弹出框 刷新table表格页面的方法

    今天小编就为大家分享一篇layui 关闭open弹出框 刷新table表格页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现授权登录

    微信小程序实现授权登录

    这篇文章主要为大家详细介绍了微信小程序实现授权登录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 使用Electron自制录屏软件

    使用Electron自制录屏软件

    录屏软件对于我们来说都不陌生了,本文我们要做的事情是实现自己的录屏软件,载体使用Electron,因为它更适合录制桌面的场景,下面我们就来看看具体实现方法吧
    2024-01-01
  • JS实现即点即编辑功能代码

    JS实现即点即编辑功能代码

    以前在网上都看到过类似的功能,不过没自己想要实现过,这次刚好做静态页面中有这样的一个需求,就试着自己做做看,做完发现也不是什么很难的事情。
    2008-10-10
  • 基于JavaScript定位当前的地理位置

    基于JavaScript定位当前的地理位置

    这篇文章主要为大家详细介绍了基于JavaScript定位当前的地理位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • fastadmin如何让后台的日期显示成年月日格式(推荐)

    fastadmin如何让后台的日期显示成年月日格式(推荐)

    FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,本文给大家介绍fastadmin的后台时间戳字段如何显示成年月日的日期格式,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • JS与jQuery遍历Table所有单元格内容的方法

    JS与jQuery遍历Table所有单元格内容的方法

    这篇文章主要介绍了JS与jQuery遍历Table所有单元格内容的方法,结合实例形式分别描述了JavaScript与jQuery实现遍历table单元格的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • Javascript生成器(Generator)的介绍与使用

    Javascript生成器(Generator)的介绍与使用

    这篇文章主要给大家介绍了关于Javascript生成器(Generator)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript实现的石头剪刀布游戏源码分享

    JavaScript实现的石头剪刀布游戏源码分享

    这篇文章主要介绍了JavaScript实现的石头剪刀布游戏源码分享,挺好玩的小游戏,关键在一些算法上,需要的朋友可以参考下
    2014-08-08
  • 轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

    轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

    这篇文章主要和大家轻松玩转BootstrapTable,后端使用SpringMVC+Hibernate,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论