您现在的位置是:网站首页> 编程资料编程资料

微信小程序实现日期范围选择_javascript技巧_

2023-05-24 310人已围观

简介 微信小程序实现日期范围选择_javascript技巧_

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

样式如下:

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

date.wxml:

                  日期范围:                                                                                                                    {{startdate}}                                                                       ~                                                                            {{enddate}}                                                                   

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,     })   },   })

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

-六神源码网