微信小程序实现日期范围选择_javascript技巧
来源:网络
编辑:素浅
时间:2022-07-19
本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下
样式如下:
分别点击开始日期和结束日期选择时间(底部弹框):
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, }) }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关文章:
相关推荐:
- [前端]Vue3 编写自定义指令插件的示例代码_vue.js
- [前端]vue使用element实现上传图片和修改图片功能_vue.js
- [前端]JS前端架构pnpm构建Monorepo方式管理demo_JavaScript
- [前端]Iconfont不能上传如何维护Icon_React
- [前端]jquery实现手风琴展开效果_jquery
- [前端]js前端实现word excel pdf ppt mp4图片文本等文件预览_JavaScript
- [前端]uniapp实现横屏签字版_javascript技巧
- [前端]微信小程序实现手写签名(签字版)_javascript技巧
- [前端]vue 大文件分片上传(断点续传、并发上传、秒传)_vue.js
- [前端]微信小程序实现日期范围选择_javascript技巧
栏目分类
最新文章
- 如何在 JavaScript 中把字符串转换成数字
- 怎么理解ES6中Proxy及使用场景
- 详解vuex中的this.$store.dispatch方法
- javascript的call和apply的区别
- 为什么要使用Reflect对象
- 前端一些好学好用的代码规范-git hook+husky + commitlint
- 前端一些好学好用的代码规范-git hook+husky + commitlint
- 解决报错Node Sass does not yet support your current environment: Windows 64-bit with Unsupported
- mac安装nvm
- npm husky install .git can not be found解决方案
热门文章
- CSS世界PDF电子版百度云网盘下载
- JavaScript权威指南(第6版)中文版PDF电子版百度云网盘下载
- Web服务 原理与技术[Michael P. Papazoglou]PDF电子版百度云网盘下载[44.7M]
- 基于TypeScript的HTML5游戏开发本科毕业设计PDF电子版百度云网盘下载
- 详解vue修改elementUI的分页组件视图没更新问题
- javascript的call和apply的区别
- WebKit技术内幕朱永盛PDF电子版百度云网盘下载
- JAVASCRIPT语言精髓与编程实践.周爱民.扫描版PDF电子版百度云网盘下载
- 精彩绝伦的CSS[Eric A. Meyer]PDF电子版百度云网盘下载[25.8M]
- HTML5与CSS3基础教程(第8版)[Elizabeth Castro]PDF电子版百度云网盘下载[72M]