随手笔记 -- 时间搜索框，默认搜索4天前至今天

uniapp，用uView组件库，在弹出容器（u-popup）里面写搜索框，默认搜索前4天，至今天的日期，也就是默认搜索5天的内容，如果开始如期晚于结束日期，则调换开始日期和结束日期

HTML

// 从上方弹出
<u-popup v-model="showup" mode="top"><view class="content"><scroll-view class="scroll-view" scroll-y="true"><view class="box" v-for="(row, row_index) in config" :key="row_index"><view class="search-row" @click="showrl = true"><view v-if="row.type == 'timeRange'"><view class="time-view flex"><view class="time-pick" @click="showCalendar('start', row)">{{row.start?row.start:'请选择开始日期'}}<u-icon class="time-icon" name="calendar" custom-prefix="iconfont icon"size="26"></u-icon></view><view style="width: 88rpx;color: #525567;">至</view><view class="time-pick" @click="showCalendar('end', row)">{{row.end?row.end:'请选择结束日期'}}<u-icon class="time-icon" name="calendar" custom-prefix="iconfont icon"size="26"></u-icon></view></view></view></view></view></scroll-view></view>// 搜索、还原按钮<view style="margin: 30rpx;text-align: right;"><u-button size="mini" :custom-style="{'margin':'0rpx 10rpx'}" @click="resetHandel">还原</u-button><u-button size="mini" type="primary" @click="searchHandel">搜索</u-button></view></u-popup><view class="search-row" @click="showup=true"><u-search inputAlign="center" :disabled="true" height="70" shape="square" :showAction="false" bgColor="#fff"searchIcon="search" placeholder="请点击此处搜索"></u-search></view>

data() {return {showup: false,calendarShow: false, // 显示日期选择器postData: {start: "",end: "",pageIndex: 1,pageSize: 20},config: [{title: '创建时间',type: 'timeRange',startKey: 'start',endKey: 'end',value: ''}],currentTimeObj: {}, // 当前操作日期选择的数据timeType: '', // 日期选择类型 start endreportList: []}},methods: {// 获取当前日期getPresentDate() {let nowDate = new Date()let date = {year: nowDate.getFullYear(),month: (nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1),date: nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate(),}this.config[0].end = date.year + '-' + date.month + '-' + date.datethis.config[0].start = this.GetDateStr(-4);this.searchHandel();},// 获取当前日期前4天的日期GetDateStr(AddDayCount) {var dd = new Date();dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期 var y = dd.getFullYear();var m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1); //获取当前月份的日期 var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate();return y + "-" + m + "-" + d;},// 日期发生改变dateChange(e) {this.currentTimeObj[this.timeType] = e.result;this.currentTimeObj = {};this.timeType = '';this.calendarShow = false;// 如果开始如期晚于结束日期，则调换 开始日期和结束日期this.config.forEach(item => {let date;if (new Date(item.start) > new Date(item.end)) {date = item.start;item.start = item.end;item.end = date;}})this.$forceUpdate();},// 搜索searchHandel() {this.config.forEach(item => {if (item.type == 'timeRange') {this.postData[item.startKey] = item.start ? (item.start + " 00:00:00") : '';this.postData[item.endKey] = item.end ? (item.end + " 23:59:59") : '';}})this.postData.pageIndex = 1this.reportList = [];this.getdata();},// 日期选择showCalendar(key, row) {this.currentTimeObj = row;this.timeType = key;this.calendarShow = true;},// 从接口获取数据async getdata() {let url = `/*******************************`const result = await this.$http.get(url, this.postData);// console.log(JSON.stringify(result))this.showup = false;},
}

CSS

.search-row {padding: 32rpx 32rpx 0rpx 32rpx;position: relative;.searchscan {background-color: rgba(255, 255, 255, 0);position: absolute;width: 90rpx;height: 90rpx;top: 22rpx;left: 20rpx;z-index: 99;}// margin: 32rpx;}.content {height: 100%;// padding: 0 30rpx;.scroll-view {height: calc(100% - 128rpx);.box {.box-row {margin-top: 28rpx;}.title {width: 100%;height: 70rpx;padding: 16rpx;font-size: 13px;font-family: PingFangSC, PingFangSC-Medium;font-weight: 500;text-align: left;color: #5b5d68;line-height: 18px;}.labels {flex-direction: row;flex-wrap: wrap;.tags {margin-bottom: 20rpx;margin-right: 22rpx;height: 68rpx;}/deep/ .u-btn--default {background: #f7f7f7;border-radius: 16rpx;color: #525567;font-size: 26rpx;}/deep/ .u-btn--primary {border-radius: 16rpx;color: #FFFFFF;font-size: 26rpx;border-color: #448FFC;background-color: #448FFC;}/deep/ .u-hairline-border:after {border: none !important;}}.input {// margin: 0 16rpx;border-radius: 22rpx;}.select-input {border: 2rpx solid #ECEDEE;border-radius: 22rpx;height: 92rpx;// margin: 0 20rpx;.select-content {width: 92%;padding: 24rpx 20rpx;color: #a0a0a0;}}.time-view {height: 92rpx;// margin: 16rpx;width: calc(100% - 32rpx);text-align: center;line-height: 70rpx;font-size: 28rpx;.time-icon {float: right;padding-right: 16rpx;}.time-pick {border: 2rpx solid rgb(193, 193, 193);width: 50%;border-radius: 10rpx;color: rgb(144, 147, 153);height: 70rpx;}}/deep/ .u-cell {padding: 8rpx 32rpx;}}}.footer {height: 128rpx;left: 0;right: 0;bottom: 0;position: absolute;.footer-item {padding: 24rpx 32rpx;width: 50%;text-align: center;.reset-btn {height: 88rpx;background: #f5f6fa;color: #414454;}.confirm-btn {height: 88rpx;background: #448FFC;}/deep/ .u-btn {font-size: 28rpx;font-family: PingFangSC, PingFangSC-Medium;width: 68%;border-radius: 26rpx;}}}}

随手笔记 -- 时间搜索框，默认搜索4天前至今天相关推荐

Win10左下角搜索框无法搜索点击无反应的解决方法
为了更便捷,在Win10系统经常会使用到桌面左下角的搜索框进行搜索程序,但是近期Win10搜索框搜不到任何东西,点开就是白框一片空白,不知道如何解决!那么Win10搜索框用不了? 具体解决方法: 1. ...
windows10搜索框不能搜索解决方法
原文出处:https://blog.csdn.net/qq_40875146/article/details/81742533 解决Windows10搜索框不能搜索问题. 1.首先,打开管理员命令窗口 ...
解决win10搜索框无法搜索本地应用或无反应
解决win10状态栏的搜索框无法搜索本地应用或无反应今天突然出现的问题,在状态栏左下角的搜索框搜索cmd,本来要以管理员运行,结果没有任何反应. 解决办法: 1.首先,打开管理员命令窗口,输入sta ...
Win10左下角搜索框无法搜索无反应的解决方案
为了更便捷,在Win10系统经常会使用到桌面左下角的搜索框进行搜索程序,但是近期Win10搜索框搜不到任何东西,点开就是白框一片空白,不知道如何解决!那么Win10搜索框用不了?下面装机之家分享一下W ...
Win10任务栏搜索框无法搜索,显示白色页面
Win10任务栏搜索框无法搜索,显示白色页面如果确定: Windows search服务启动打开 %LocalAppData%\Packages\windows.immersivecontrolp ...
html5 input搜索框样式修改,修改input搜索框默认叉号的样式为自定义图片
兼容IE的自定义input搜索框叉号样式(使用图片替换input原生叉号) 代码 input::-webkit-search-cancel-button { -webkit-appearance: n ...
实现搜索框记录搜索历史_三个案例告诉你：“搜索框”该如何设计？
不管是在2C还是2B产品,"搜索"是产品中最常见且必不可少的功能模块之一.对于用户来说,在众多功能模块和信息层级中如何快速定位到目标,通过输入已知的关键词进行搜索是最便捷的方式,没 ...
javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性回想起来实现此功能很简单,1.前端输入字符串文本改变异步请求服务器将返回的资料显示 ...
js实现搜索框智能搜索提示，类似百度搜索
List item 一.概要场景:用户可能记不得是哪个搜索词了,但是结果表单是唯一的,不可能实现模糊搜索. 解决方案:搜索框实现智能搜索提示.在用户搜索键入关键字的过程中,不断去请求后台,将查询结果 ...
织梦搜索页是那个php,织梦dedecms仿站之搜索框、搜索页制作
这次我们说一下怎样把织梦dedecms 默认搜索框修改成自己的搜索框,以仿站为例,我们在仿别人站时,通常在新闻中心(文章列表页).产品中心(图片列表页)会有搜索框,如下图: 1.为了在调整好搜索框后, ...

随手笔记 -- 时间搜索框，默认搜索4天前至今天

随手笔记 -- 时间搜索框，默认搜索4天前至今天相关推荐

最新文章

热门文章