您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现日期范围选择_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, }) }, })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- Web Components实现类Element UI中的Card卡片_JavaScript_
- 关于JavaScript使用export和import的两个报错解决_javascript技巧_
- vue项目中 jsconfig.json概念及使用步骤_vue.js_
- Yarn与Lerna管理monorepo使用详解_vue.js_
- package.json管理依赖包版本详解_javascript技巧_
- vue+element 多个相同的select不允许重复选择问题_vue.js_
- 微信小程序实现简单弹框效果_javascript技巧_
- 高级前端必会的package.json字段知识详解_JavaScript_
- 微信小程序自定义弹框效果_javascript技巧_
- 微信小程序实现计时器开始和结束功能_javascript技巧_
