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

最新推荐文章于 2024-08-09 07:46:44 发布

wwf1225

最新推荐文章于 2024-08-09 07:46:44 发布

阅读量4.3k

点赞数 1

本文链接：https://blog.csdn.net/wwf1225/article/details/90230494

版权

打印出选中的日期：

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;
}