微信小程序实现日期范围选择

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

样式如下:

分别点击开始日期和结束日期选择时间(底部弹框):

date.wxml:

 <view class="range-style mar-top">
                <view class="picker-title">日期范围:</view>
                <!-- 时间段 -->  
                    <view class="picker_group">  
                    <picker mode="date" value="{{startdate}}"  end="{{enddate}}" bindchange="bindDateChange">  
                        <view class="picker">  
                        <text class = "{{startdate=='开始日期'?'text-style1':'text-style2'}}">{{startdate}}</text>
                        </view>  
                    </picker>  
                    <text class = "text-style1">~</text> 
                    <picker mode="date" value="{{enddate}}" start="{{startdate}}" end="2050-01-01" bindchange="bindDateChange2">  
                        <view class="picker">  
                        <text class = "{{enddate=='结束日期'?'text-style1':'text-style2'}}">{{enddate}}</text> 
                        </view>  
                    </picker>        
      </view>  
</view>

date.wxss:

.range-style {
    display: flex;
    align-items: center;
    padding-left: 10rpx;
    background-color: #fff;
}
.mar-top {
    margin-top: 30rpx;
}
.picker-title {
    font-size: 32rpx;
    width: 150rpx;
}
.picker_group {
    color: #888;
    border: 1rpx solid #A4A6AE;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    font-size: 32rpx;
}
.text-style1{
    color:#A4A6AE;
}
.text-style2{
    color:rgb(0,0,0,0.8);
}
.picker_group picker {
    font-size: 34rpx;
    height: 45rpx;
    padding-left:20rpx;
    padding-right:20rpx;
    line-height: 45rpx;
}

date.js:

Page({
  data: {
  
    startdate: '开始日期',//默认起始时间  
    enddate: '结束日期',//默认结束时间 
 
  },
 
  bindDateChange(e) {
    let that = this;
    console.log(e.detail.value)
    that.setData({
      startdate: e.detail.value,
    })
  },
  bindDateChange2(e) {
    let that = this;
    console.log(e.detail.value)
    that.setData({
      enddate: e.detail.value,
    })
  },
 
})

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

(0)

相关推荐

  • 微信小程序使用picker实现时间和日期选择框功能【附源码下载】

    本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick

  • 微信小程序之picker日期和时间选择器

    下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器 跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te

  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

  • 微信小程序自定义日期选择器

    日期选择器是我们在写项目的过程中经常遇到的,有需要标题的选择器,也有不需要标题的选择器 今天给大家带来一个自定义的时间选择器,废话不多说,直接上代码 第一步:先创建一个picker的文件夹 第二步 :在wxml中写布局样式 <!--picker/picker.wxml--> <view class="full-box {{isOpen?'cur':''}}">     <!--<view class="modal" bindtap

  • 微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序日期选择器实例代码

    /* JS代码部分 */ 3 const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.pu

  • 微信小程序如何实现精确的日期时间选择器

    这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成. 处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bi

  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

随机推荐