日历点击input搜索框弹出日历并且选中日期，再点击搜索框隐藏日历

冷不防 2022-01-31 00:35 415阅读 0赞

# 打印出选中的日期： #

###  ###

### 1. <input class="input-item0" type="text" :value="searchDate" placeholder="2019年3月29日" @click="open"> ###

###  ###

### 2. <uni-popup :show="dateCheck" @hidePopup="open" class="date"> ###

### <button class="calendar-button-confirm btn1" @click="confirm">确认</button>   <button class="calendar-button-confirm btn2" @click="open">取消</button> ###

### 3. return \{   searchDate: "",   dateCheck: false, ###

### 4. ###

### open() \{   this.dateCheck = !this.dateCheck;   if (this.dateCheck) \{ ###

### if (this.tags\[3\].checked) \{   this.slide = 'horizontal'   \} else if (this.tags\[2\].checked) \{   this.slide = 'vertical'   \} else \{   this.slide = 'none'   \}   if (this.tags\[4\].checked) \{   this.startDate = this.tags\[4\].value   \} else \{   this.startDate = ''   \}   if (this.tags\[5\].checked) \{   this.endDate = this.tags\[5\].value   \} else \{   this.endDate = ''   \}   if (this.tags\[7\].checked) \{   this.date = this.tags\[7\].value   \} else \{   this.date = ''   \}   this.show = true   console.log(this.date)   \}   \}, ###

### 5. confirm() \{   this.show = false;   this.dateCheck = !this.dateCheck;   this.searchDate = this.timeData.fulldate;   ｝ ###

<view v-show="typeIndex" class="wei">  
<view class="weixiu">  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/Button-02.png"></image>  
<text class="t t1">报修中</text>  
</view>  
<view class="weixiu">  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/Button-03.png"></image>  
<text class="t">已处理</text>  
</view>  
</view>  
  
  
  
<view class="input-item" v-show="!typeIndex">  
  
<input class="input-item0" :value="searchDate" type="text" placeholder="2019年3月29日" @click="open" >  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/search.png" class="input-img1"></image>  
<image src="../../static/images/1级/x.png" class="input-img2"></image>  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/date.png" class="input-img3"></image>  
<text class="input-text">取消</text>  
</view>  
  
  
<view class="uni-padding-wrap uni-common-mt tab">  
<uni-segmented-control :current="current" :values="searchTypes" @clickItem="onClickItem" style-type="text"  
:activeColor="activeColor" class="header"></uni-segmented-control>  
</view>

<view class="uni-list" @click="showTopPopup">  
<view class="red-item">  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/di-04.png" class="red"></image>  
<text class="baoxiu">报修中</text>  
</view>  
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">  
<view class="uni-media-list uni-pull-right">  
<view class="uni-media-list-logo">  
<image v-if="showImg" :src="value.img" class="list-img"></image>  
</view>  
<view class="uni-media-list-body">  
<view class="uni-media-list-text-top">\{ \{value.title\}\}</view>  
</view>  
</view>  
</view>  
</view>

<view class="red-item">  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/di-04.png" class="red"></image>  
<text class="baoxiu">已处理</text>  
</view>  
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">  
<view class="uni-media-list uni-pull-right">  
<view class="uni-media-list-logo">  
<image v-if="showImg" :src="value.img" class="list-img"></image>  
</view>  
<view class="uni-media-list-body">  
<view class="uni-media-list-text-top">\{ \{value.title\}\}</view>  
</view>  
</view>  
</view>  
</view>

<view class="red-item">  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/di-04.png" class="red"></image>  
<text class="baoxiu">报修中</text>  
</view>  
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">  
<view class="uni-media-list uni-pull-right">  
<view class="uni-media-list-logo">  
<image v-if="showImg" :src="value.img" class="list-img"></image>  
</view>  
<view class="uni-media-list-body">  
<view class="uni-media-list-text-top">\{ \{value.title\}\}</view>  
</view>  
</view>  
</view>  
</view>

</view>

<view class="uni-list">  
<view class="red-item">  
<image src="../../static/images/2级/1巡检任务/3级-巡检记录/di-04.png" class="red"></image>  
<text class="baoxiu">报修中</text>  
</view>  
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">  
<view class="uni-media-list uni-pull-right">  
<view class="uni-media-list-logo">  
<image v-if="showImg" :src="value.img" class="list-img"></image>  
</view>  
<view class="uni-media-list-body">  
<view class="uni-media-list-text-top">\{ \{value.title\}\}</view>  
</view>  
</view>  
</view>  
</view>

</view>  
</view>

</view>

<uni-popup :show="showPopupMiddle" :type="popType" v-on:hidePopup="hidePopup">  
  
  
</uni-popup>  
  
<uni-popup :show="showPopupTop" :type="popType" v-on:hidePopup="hidePopup">  
<view class="pop">  
<view class="pop-title">设备报修情况</view>  
<view class="pop-item1">  
<view>负责人： 张晓晓</view>  
<view>联系方式： 13812563210</view>  
<view>设备编号： MHS2019032500000001</view>  
</view>  
<view class="pop-item2">  
<view class="pop-item2-2">  
<text>报修内容</text>  
<text>维修进展</text>  
</view>  
<view class="pop-item2-3">  
<text>栓内配件缺失，缺失设备；直流水枪。</text>  
<text>已补全</text>  
</view>  
<view class="pop-item2-4">  
<text>消防栓玻璃有破损</text>  
<text>未修复</text>  
</view>  
<view class="pop-item2-5">  
<text>干粉灭火器标示缺失</text>  
<text>已修复</text>  
</view>  
<view class="pop-item2-6">  
<text>干粉灭火器筒体受损</text>  
<text>已修复</text>  
</view>  
</view>  
</view>  
<view class="input0">  
<button type="default">取消</button>  
<button type="warn">确定</button>  
</view>  
</uni-popup>  
  
  
  
  
  
<uni-popup :show="dateCheck" position="bottom" @hidePopup="open">  
<view v-if="timeData.lunar" class="calendar-info">  
<view v-if="tags\[0\].checked">农历日期 : \{ \{ timeData.year + '年' + timeData.month + '月' + timeData.date + '日 （' + timeData.lunar.astro + ')' \}\}</view>  
<view v-if="tags\[0\].checked">  
\{ \{ timeData.lunar.gzYear + '年' + timeData.lunar.gzMonth + '月' + timeData.lunar.gzDay + '日 (' + timeData.lunar.Animal + '年)' \}\}  
\{ \{ timeData.lunar.IMonthCn + timeData.lunar.IDayCn \}\} \{ \{ timeData.lunar.isTerm ? timeData.lunar.Term : '' \}\}  
</view>  
</view>  
<view v-if="show" class="calendar-mask" @click="open">  
<view class="calendar-box" @click.stop="">  
<uni-calendar :lunar="tags\[0\].checked" :fixed-heihgt="tags\[1\].checked" :slide="slide" :disable-before="tags\[6\].checked" :start-date="startDate" :end-date="endDate" :date="date" @change="change" @to-click="toClick" />  
<view class="calendar-button-groups">  
<button class="calendar-button-confirm" @click="confirm">确认</button>  
<button class="calendar-button-confirm" @click="open">取消</button>  
</view>  
</view>  
</view>  
</uni-popup>  
  
  
</view>  
</template>

export default \{  
components: \{  
uniSegmentedControl,  
uniPopup,  
mediaList,  
uniLoadMore,  
uniIcon,  
uniCalendar  
\},  
data() \{  
/\*\*  
\* 时间计算  
\*/  
function getDate(date, AddDayCount = 0) \{  
if (typeof date !== 'object') \{  
date = date.replace(/-/g, '/')  
\}  
let dd = new Date(date)  
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期  
let y = dd.getFullYear()  
let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0  
let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0  
return y + '-' + m + '-' + d  
\}  
let tags = \[\{  
id: 0,  
name: '农历',  
checked: false,  
attr: 'lunar'  
\},  
\{  
id: 1,  
name: '固定高度',  
checked: false,  
attr: 'fixedHeihgt'  
\},  
\{  
id: 2,  
name: '垂直滚动',  
checked: false,  
attr: 'vertical'  
\},  
\{  
id: 3,  
name: '水平滚动',  
checked: false,  
attr: 'horizontal'  
\},  
\{  
id: 4,  
name: '开始日期(' + getDate(new Date(), -1) + ')',  
checked: false,  
value: getDate(new Date(), -1),  
attr: 'startDate'  
\},  
\{  
id: 5,  
name: '结束日期(' + getDate(new Date(), 2) + ')',  
value: getDate(new Date(), 2),  
checked: false,  
attr: 'endDate'  
\},  
\{  
id: 6,  
name: '禁用今天之前的日期',  
checked: false,  
attr: 'disableBefore'  
\},  
\{  
id: 7,  
name: '自定义当前日期(' + getDate(new Date(), 1) + ')',  
value: getDate(new Date(), 1),  
checked: false,  
attr: 'date'  
\}  
\]  
return \{  
show: false,  
tags,  
slide: 'none',  
date: '',  
startDate: '',  
endDate: '',  
searchDate:'',  
dateCheck1:false,  
dateCheck:false,  
timeData: \{\},  
items: \[  
'报修中',  
'已处理',  
  
\],  
searchTypes:\[  
'报修时间',  
'维修状态'  
\],  
typeIndex: false,  
styles: \[\{  
value: 'button',  
text: '按钮'  
\}, \{  
value: 'text',  
text: '文字'  
\}\],  
colors: \[  
'\#007aff',  
'\#4cd964',  
'\#dd524d'  
\],  
current: 0,  
activeColor: 'red',  
styleType: 'text',  
styleIndex: 0,  
colorIndex: 0,  
showImg: false,  
list: \[\{  
title: "报修编号001",  
img: "/static/images/2级/2设备报修/报修编号-icon.png"  
\},  
\{  
title: "巡检编号002",  
img: "/static/images/2级/2设备报修/编号.png"  
\},  
\{  
title: "2019年3月29日",  
img: "/static/images/2级/2设备报修/时间.png"  
\},  
\{  
title: "松江区莘砖公路518号34号楼5楼",  
img: "/static/images/2级/2设备报修/位置.png"  
\}

\],  
popType: 'middle',  
title: 'popup',  
showPopupMiddle: false,  
showPopupTop: false,  
showPopupBottom: false,  
msg: ''

\}  
\},  
onLoad() \{  
setTimeout(() => \{  
this.showImg = true;  
\}, 400);  
  
\},  
  
methods: \{  
onClickItem(index) \{  
this.typeIndex = !this.typeIndex;  
\},  
onClickItemTop(index) \{  
if (this.current !== index) \{  
this.current = index;  
\}  
\},  
styleChange(evt) \{  
const value = evt.target.value;  
if (this.styleType !== value) \{  
this.styleType = value;  
for (let i = 0; i < this.styles.length; i++) \{  
if (this.styles\[i\].value === value) \{  
this.styleIndex = i;  
break;  
\}  
\}  
\}  
\},  
colorChange(evt) \{  
if (this.styleType !== evt.target.value) \{  
this.activeColor = evt.target.value;  
this.colorIndex = this.colors.indexOf(evt.target.value);  
\}  
\},  
//统一的关闭popup方法  
hidePopup: function() \{  
this.showPopupMiddle = false;  
this.showPopupTop = false;  
this.showPopupBottom = false;  
\},  
//展示居中 popup  
showMiddlePopup: function() \{  
this.hidePopup();  
this.popType = 'middle';  
this.showPopupMiddle = true;  
\},  
//展示顶部 popup  
showTopPopup: function() \{  
this.hidePopup();  
this.popType = 'top';  
this.msg = '顶部 popup 信息内容';  
this.showPopupTop = true;  
\},  
//展示底部 popup  
showBottomPopup: function() \{  
this.hidePopup();  
this.popType = 'bottom';  
this.msg = '底部 popup 信息内容';  
this.showPopupBottom = true;  
\},  
closeMask() \{  
this.show = false  
\},  
toggle(index, item) \{  
this.tags\[index\].checked = !item.checked  
// item.checked = !item.checked;  
console.log(index)  
if (index === 2) \{  
this.tags\[3\].checked = false  
\}  
if (index === 3) \{  
this.tags\[2\].checked = false  
\}  
// this.attribute\[item.attr\] = !item.checked;  
\},  
open() \{  
this.dateCheck = !this.dateCheck;  
console.log(this.dateCheck)  
if(this.dateCheck)\{  
if (this.tags\[3\].checked) \{  
this.slide = 'horizontal'  
\} else if (this.tags\[2\].checked) \{  
this.slide = 'vertical'  
\} else \{  
this.slide = 'none'  
\}  
if (this.tags\[4\].checked) \{  
this.startDate = this.tags\[4\].value  
\} else \{  
this.startDate = ''  
\}  
if (this.tags\[5\].checked) \{  
this.endDate = this.tags\[5\].value  
\} else \{  
this.endDate = ''  
\}  
if (this.tags\[7\].checked) \{  
this.date = this.tags\[7\].value  
\} else \{  
this.date = ''  
\}  
this.show = true  
\}  
  
\},  
change(e) \{  
console.log('change 返回:', e.fulldate)  
this.timeData = e  
\},  
toClick(e) \{  
console.log('点击事件', e.fulldate)  
this.timeData = e  
\},  
confirm() \{  
this.show = false;  
this.dateCheck = !this.dateCheck;  
this.searchDate=this.timeData.fulldate;  
console.log(this.searchDate)  
\}  
\}  
\}  
</script>

.input-item \{  
display: flex;  
justify-content: center;  
align-items: center;  
position: relative;  
\}

.input-item0 \{  
width: 520upx;  
height: 80upx;  
background-color: \#ffffff;  
box-shadow: 0px 10upx 19upx 1upx rgba(0, 0, 0, 0.1);  
border-radius: 40upx;  
padding-left: 80upx;  
\}

.input-img1 \{  
width: 24upx;  
height: 24upx;  
position: absolute;  
left: 60upx;  
top: 28upx;  
\}

.input-img2 \{  
width: 28upx;  
height: 28upx;  
position: absolute;  
right: 210upx;  
top: 28upx;  
\}

.input-img3 \{  
width: 28upx;  
height: 28upx;  
position: absolute;  
right: 160upx;  
top: 28upx;  
\}

page \{  
height: auto;  
background-color: \#f1f1f1;  
\}

.container \{  
position: relative;  
\}

.container-title \{  
position: absolute;  
left: 0upx;  
top: -50upx;  
width: 309upx;  
height: 49upx;  
display: flex;  
justify-content: space-between;

.header \{  
width: 500upx;  
font-size: 38upx;  
color: \#333333;  
\}

.content \{  
margin: 60upx auto;  
padding-left: 30upx;  
\}

.color-tag \{  
width: 50upx;  
height: 50upx;  
\}

/\* 保修时间内容开始\*/

.red-item \{  
position: absolute;  
right: 40upx;  
top: 0;  
display: flex;  
flex-direction: column;

.red \{  
width: 60upx;  
height: 140upx;  
\}

.baoxiu \{  
font-size: 24upx;  
color: \#FFFFFF;  
width: 22upx;  
height: 73upx;  
position: absolute;  
left: 18upx;  
top: 18upx;  
\}

.uni-list \{  
width: 690upx;  
height: 300upx;  
background-color: \#ffffff;  
box-shadow: 0px 23upx 27upx 2upx rgba(0, 0, 0, 0.11);  
border-radius: 20upx;  
box-sizing: border-box;  
padding: 30upx;  
margin-top: 50upx;  
position: relative;  
\}

.list-img \{  
width: 28upx;  
height: 28upx;  
\}

.uni-media-list \{  
display: flex;  
justify-content: flex-start;  
align-items: center;

.uni-media-list-text-top \{  
font-size: 28upx;  
color: \#666;  
padding: 10upx;  
\}

.current1,  
.current2 \{  
display: flex;  
flex-direction: column;  
\}

/\* 保修时间内容结束 \*/  
/\* 顶部弹出层 开始\*/  
.pop \{  
display: flex;  
flex-direction: column;  
justify-content: center;  
align-items: center;  
position: relative;  
\}

.pop-title \{  
width: 680upx;  
height: 102upx;  
background-color: \#C30000;  
color: \#FFFFFF;  
text-align: center;  
line-height: 102upx;  
font-size: 36upx;  
font-family: PingFang-SC-Bold;  
position: absolute;  
left: -15upx;  
top: -180upx;  
\}  
.pop-item1 \{  
box-sizing:border-box;  
padding-bottom: 20upx;  
\}  
.pop-item1 view \{  
font-family: PingFang-SC-Regular;  
font-size: 28upx;  
font-weight: normal;  
color: \#666666;  
margin: 20upx;  
\}

.pop-item2 \{  
display: flex;  
flex-direction: column;  
\}

.pop-item2-1 \{  
display: flex;  
justify-content: space-between;  
\}

.pop-item2-1 text \{  
font-size: 24upx;  
color: \#666666;  
\}

.pop-item2-2 \{  
display: flex;  
justify-content: space-between;  
width: 650upx;  
height: 70upx;  
background-color: \#dddddd;  
align-items: center;  
font-size: 28upx;  
color: \#333333;  
box-sizing: border-box;  
padding: 20upx;  
\}

.pop-item2-2 text \{  
font-family: PingFang-SC-Medium;  
font-size: 30upx;  
color: \#333333;

.pop-item2-3 \{  
display: flex;  
justify-content: space-between;  
margin: 20upx;  
\}

.pop-item2-4 \{  
display: flex;  
justify-content: space-between;  
align-items: center;  
width: 650upx;  
height: 50upx;  
background-color: \#f5f5f5;  
box-sizing: border-box;  
padding: 20upx;  
\}

.pop-item2-5 \{  
display: flex;  
justify-content: space-between;  
margin: 20upx;  
\}

.pop-item2-6 \{  
display: flex;  
justify-content: space-between;  
align-items: center;  
width: 650upx;  
height: 50upx;  
background-color: \#f5f5f5;  
box-sizing: border-box;  
padding: 20upx;  
\}

.pop-item2-3 text \{  
font-size: 24upx;  
color: \#666666;  
\}

.pop-item2-4 text \{  
font-size: 24upx;  
color: \#666666;  
\}

.pop-item2-5 text \{  
font-size: 24upx;  
color: \#666666;  
\}

.pop-item2-6 text \{  
font-size: 24upx;  
color: \#666666;  
\}  
.input0 \{  
display: flex;  
justify-content: center;  
align-items: center;  
position: absolute;  
left: 0;  
bottom: 0;  
\}  
.input0 button \{  
width: 340upx;  
height: 102upx;  
\}

/\* 顶部弹出层 结束\*/  
</style>