|
@@ -3,26 +3,36 @@
|
|
|
<!-- 日期选择器 -->
|
|
|
<view v-if="type!='time'" class="picker-modal">
|
|
|
<view class="picker-modal-header">
|
|
|
- <view class="picker-icon picker-icon-zuozuo" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetYear('-1')"></view>
|
|
|
- <view class="picker-icon picker-icon-zuo" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetMonth('-1')"></view>
|
|
|
+ <view class="picker-icon picker-icon-zuozuo" :hover-stay-time="100" hover-class="picker-icon-active"
|
|
|
+ @click="onSetYear('-1')"></view>
|
|
|
+ <view class="picker-icon picker-icon-zuo" :hover-stay-time="100" hover-class="picker-icon-active"
|
|
|
+ @click="onSetMonth('-1')"></view>
|
|
|
<text class="picker-modal-header-title">{{title}}</text>
|
|
|
- <view class="picker-icon picker-icon-you" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetMonth('+1')"></view>
|
|
|
- <view class="picker-icon picker-icon-youyou" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetYear('+1')"></view>
|
|
|
+ <view class="picker-icon picker-icon-you" :hover-stay-time="100" hover-class="picker-icon-active"
|
|
|
+ @click="onSetMonth('+1')"></view>
|
|
|
+ <view class="picker-icon picker-icon-youyou" :hover-stay-time="100" hover-class="picker-icon-active"
|
|
|
+ @click="onSetYear('+1')"></view>
|
|
|
</view>
|
|
|
- <swiper class="picker-modal-body" :circular="true" :duration="200" :skip-hidden-item-layout="true" :current="calendarIndex" @change="onSwiperChange">
|
|
|
- <swiper-item class="picker-calendar" v-for="(calendar,calendarIndex2) in calendars" :key="calendarIndex2">
|
|
|
+ <swiper class="picker-modal-body" :circular="true" :duration="200" :skip-hidden-item-layout="true"
|
|
|
+ :current="calendarIndex" @change="onSwiperChange">
|
|
|
+ <swiper-item class="picker-calendar" v-for="(calendar,calendarIndex2) in calendars"
|
|
|
+ :key="calendarIndex2">
|
|
|
<view class="picker-calendar-view" v-for="(week,index) in weeks" :key="index - 7">
|
|
|
<view class="picker-calendar-view-item">{{week}}</view>
|
|
|
</view>
|
|
|
- <view class="picker-calendar-view" v-for="(date,dateIndex) in calendar" :key="dateIndex" @click="onSelectDate(date)">
|
|
|
+ <view class="picker-calendar-view" v-for="(date,dateIndex) in calendar" :key="dateIndex"
|
|
|
+ @click="onSelectDate(date)">
|
|
|
<!-- 背景样式 -->
|
|
|
- <view v-show="date.bgStyle.type" :class="'picker-calendar-view-'+date.bgStyle.type" :style="{background: date.bgStyle.background}"></view>
|
|
|
+ <view v-show="date.bgStyle.type" :class="'picker-calendar-view-'+date.bgStyle.type"
|
|
|
+ :style="{background: date.bgStyle.background}"></view>
|
|
|
<!-- 正常和选中样式 -->
|
|
|
- <view class="picker-calendar-view-item" :style="{opacity: date.statusStyle.opacity, color: date.statusStyle.color, background: date.statusStyle.background}">
|
|
|
+ <view class="picker-calendar-view-item"
|
|
|
+ :style="{opacity: date.statusStyle.opacity, color: date.statusStyle.color, background: date.statusStyle.background}">
|
|
|
<text>{{date.title}}</text>
|
|
|
</view>
|
|
|
<!-- 小圆点样式 -->
|
|
|
- <view class="picker-calendar-view-dot" :style="{opacity: date.dotStyle.opacity, background: date.dotStyle.background}"></view>
|
|
|
+ <view class="picker-calendar-view-dot"
|
|
|
+ :style="{opacity: date.dotStyle.opacity, background: date.dotStyle.background}"></view>
|
|
|
<!-- 信息样式 -->
|
|
|
<view v-show="date.tips" class="picker-calendar-view-tips">{{date.tips}}</view>
|
|
|
</view>
|
|
@@ -34,28 +44,33 @@
|
|
|
<view class="picker-display">
|
|
|
<text>{{beginText}}日期</text>
|
|
|
<text class="picker-display-text">{{BeginTitle}}</text>
|
|
|
- <view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100" hover-class="picker-display-link-active"
|
|
|
- :style="{color}" @click="onShowTimePicker('begin')">{{BeginTimeTitle}}</view>
|
|
|
+ <view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100"
|
|
|
+ hover-class="picker-display-link-active" :style="{color}"
|
|
|
+ @click="onShowTimePicker('begin')">{{BeginTimeTitle}}</view>
|
|
|
</view>
|
|
|
<view class="picker-display">
|
|
|
<text>{{endText}}日期</text>
|
|
|
<text class="picker-display-text">{{EndTitle}}</text>
|
|
|
- <view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100" hover-class="picker-display-link-active"
|
|
|
- :style="{color}" @click="onShowTimePicker('end')">{{EndTimeTitle}}</view>
|
|
|
+ <view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100"
|
|
|
+ hover-class="picker-display-link-active" :style="{color}"
|
|
|
+ @click="onShowTimePicker('end')">{{EndTimeTitle}}</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
<view class="picker-display">
|
|
|
<text>当前选择</text>
|
|
|
<text class="picker-display-text">{{BeginTitle}}</text>
|
|
|
- <view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100" hover-class="picker-display-link-active"
|
|
|
- :style="{color}" @click="onShowTimePicker('begin')">{{BeginTimeTitle}}</view>
|
|
|
+ <view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100"
|
|
|
+ hover-class="picker-display-link-active" :style="{color}"
|
|
|
+ @click="onShowTimePicker('begin')">{{BeginTimeTitle}}</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
<view class="picker-modal-footer-btn">
|
|
|
- <view class="picker-btn" :hover-stay-time="100" hover-class="picker-btn-active" @click="onCancel">取消</view>
|
|
|
- <view class="picker-btn" :style="{color}" :hover-stay-time="100" hover-class="picker-btn-active" @click="onConfirm">确定</view>
|
|
|
+ <view class="picker-btn" :hover-stay-time="100" hover-class="picker-btn-active" @click="onCancel">取消
|
|
|
+ </view>
|
|
|
+ <view class="picker-btn" :style="{color}" :hover-stay-time="100" hover-class="picker-btn-active"
|
|
|
+ @click="onConfirm">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -65,7 +80,8 @@
|
|
|
<view class="picker-modal-header">
|
|
|
<text class="picker-modal-header-title">选择日期</text>
|
|
|
</view>
|
|
|
- <picker-view class="picker-modal-time" indicator-class="picker-modal-time-item" :value="timeValue" @change="onTimeChange">
|
|
|
+ <picker-view class="picker-modal-time" indicator-class="picker-modal-time-item" :value="timeValue"
|
|
|
+ @change="onTimeChange">
|
|
|
<picker-view-column>
|
|
|
<view v-for="(v,i) in 24" :key="i">{{i<10?'0'+i:i}}时</view>
|
|
|
</picker-view-column>
|
|
@@ -84,8 +100,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="picker-modal-footer-btn">
|
|
|
- <view class="picker-btn" :hover-stay-time="100" hover-class="picker-btn-active" @click="onCancelTime">取消</view>
|
|
|
- <view class="picker-btn" :style="{color}" :hover-stay-time="100" hover-class="picker-btn-active" @click="onConfirmTime">确定</view>
|
|
|
+ <view class="picker-btn" :hover-stay-time="100" hover-class="picker-btn-active"
|
|
|
+ @click="onCancelTime">取消</view>
|
|
|
+ <view class="picker-btn" :style="{color}" :hover-stay-time="100" hover-class="picker-btn-active"
|
|
|
+ @click="onConfirmTime">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -137,7 +155,8 @@
|
|
|
* @param b Date对象
|
|
|
* @return Boolean
|
|
|
*/
|
|
|
- isSameDay: (a, b) => a.getMonth() == b.getMonth() && a.getFullYear() == b.getFullYear() && a.getDate() == b.getDate(),
|
|
|
+ isSameDay: (a, b) => a.getMonth() == b.getMonth() && a.getFullYear() == b.getFullYear() && a.getDate() == b
|
|
|
+ .getDate(),
|
|
|
/**
|
|
|
* 格式化Date对象
|
|
|
* @param d 日期对象
|
|
@@ -157,7 +176,8 @@
|
|
|
f = f.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
for (var k in o)
|
|
|
if (new RegExp("(" + k + ")").test(f))
|
|
|
- f = f.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
|
+ f = f.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
|
|
|
+ .length)));
|
|
|
return f;
|
|
|
},
|
|
|
/**
|
|
@@ -292,7 +312,11 @@
|
|
|
date: {}, //当前日期对象
|
|
|
weeks: ["一", "二", "三", "四", "五", "六", "日"],
|
|
|
title: '初始化', //标题
|
|
|
- calendars: [[],[],[]], //日历数组
|
|
|
+ calendars: [
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ], //日历数组
|
|
|
calendarIndex: 1, //当前日历索引
|
|
|
checkeds: [], //选中的日期对象集合
|
|
|
showTimePicker: false, //是否显示时间选择器
|
|
@@ -413,14 +437,16 @@
|
|
|
item.bgStyle.type = 'bgbegin';
|
|
|
}
|
|
|
if (DateTools.isSameDay(this.checkeds[1], item.dateObj)) { //结束日期
|
|
|
- if (this.isMultiSelect && this.showTips) item.tips = item.bgStyle.type ? this.beginText + ' / ' + this.endText : this.endText;
|
|
|
+ if (this.isMultiSelect && this.showTips) item.tips = item.bgStyle.type ? this.beginText + ' / ' +
|
|
|
+ this.endText : this.endText;
|
|
|
if (!item.bgStyle.type) { //开始日期不等于结束日期
|
|
|
item.bgStyle.type = 'bgend';
|
|
|
} else {
|
|
|
item.bgStyle.type = '';
|
|
|
}
|
|
|
}
|
|
|
- if (!item.bgStyle.type && (+item.dateObj > +this.checkeds[0] && +item.dateObj < +this.checkeds[1])) { //中间的日期
|
|
|
+ if (!item.bgStyle.type && (+item.dateObj > +this.checkeds[0] && +item.dateObj < +this.checkeds[
|
|
|
+ 1])) { //中间的日期
|
|
|
item.bgStyle.type = 'bg';
|
|
|
item.statusStyle.color = this.color;
|
|
|
}
|
|
@@ -437,17 +463,17 @@
|
|
|
let before = DateTools.getDateToMonth(date, date.getMonth() - 1);
|
|
|
let after = DateTools.getDateToMonth(date, date.getMonth() + 1);
|
|
|
if (this.calendarIndex == 0) {
|
|
|
- if(refresh) this.calendars.splice(0, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
|
+ if (refresh) this.calendars.splice(0, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
|
this.calendars.splice(1, 1, DateTools.getCalendar(after, this.procCalendar));
|
|
|
this.calendars.splice(2, 1, DateTools.getCalendar(before, this.procCalendar));
|
|
|
} else if (this.calendarIndex == 1) {
|
|
|
this.calendars.splice(0, 1, DateTools.getCalendar(before, this.procCalendar));
|
|
|
- if(refresh) this.calendars.splice(1, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
|
+ if (refresh) this.calendars.splice(1, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
|
this.calendars.splice(2, 1, DateTools.getCalendar(after, this.procCalendar));
|
|
|
} else if (this.calendarIndex == 2) {
|
|
|
this.calendars.splice(0, 1, DateTools.getCalendar(after, this.procCalendar));
|
|
|
this.calendars.splice(1, 1, DateTools.getCalendar(before, this.procCalendar));
|
|
|
- if(refresh) this.calendars.splice(2, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
|
+ if (refresh) this.calendars.splice(2, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
|
}
|
|
|
this.title = DateTools.format(this.date, 'yyyy年mm月');
|
|
|
},
|
|
@@ -492,7 +518,7 @@
|
|
|
};
|
|
|
//定义默认格式
|
|
|
let defaultFormat = {
|
|
|
- 'date': 'yyyy/mm/dd',
|
|
|
+ 'date': 'yyyy-mm-dd',
|
|
|
'time': 'hh:ii' + (this.showSeconds ? ':ss' : ''),
|
|
|
'datetime': ''
|
|
|
};
|
|
@@ -520,7 +546,8 @@
|
|
|
let time = [this.beginTime, this.endTime];
|
|
|
fillTime(newDate, time[index]);
|
|
|
}
|
|
|
- values.push(DateTools.format(newDate, this.format ? this.format : defaultFormat[this.isContainTime ?
|
|
|
+ values.push(DateTools.format(newDate, this.format ? this.format : defaultFormat[this
|
|
|
+ .isContainTime ?
|
|
|
'datetime' : 'date']));
|
|
|
dates.push(newDate);
|
|
|
});
|
|
@@ -532,7 +559,8 @@
|
|
|
newDate.setHours(this.beginTime[0], this.beginTime[1]);
|
|
|
if (this.showSeconds) newDate.setSeconds(this.beginTime[2]);
|
|
|
}
|
|
|
- result.value = DateTools.format(newDate, this.format ? this.format : defaultFormat[this.isContainTime ?
|
|
|
+ result.value = DateTools.format(newDate, this.format ? this.format : defaultFormat[this
|
|
|
+ .isContainTime ?
|
|
|
'datetime' : 'date']);
|
|
|
result.date = newDate;
|
|
|
}
|
|
@@ -567,7 +595,7 @@
|
|
|
this.isShow = newValue;
|
|
|
},
|
|
|
value(newValue, oldValue) {
|
|
|
- setTimeout(()=>{
|
|
|
+ setTimeout(() => {
|
|
|
this.setValue(newValue);
|
|
|
}, 0);
|
|
|
}
|
|
@@ -816,4 +844,4 @@
|
|
|
.picker-icon-youyou:before {
|
|
|
content: "\e642";
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|