|
@ -20,7 +20,7 @@ |
|
|
<view class="uni-calendar__header-btn-box" @click.stop="next"> |
|
|
<view class="uni-calendar__header-btn-box" @click.stop="next"> |
|
|
<view class="uni-calendar__header-btn uni-calendar--right"></view> |
|
|
<view class="uni-calendar__header-btn uni-calendar--right"></view> |
|
|
</view> |
|
|
</view> |
|
|
<text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text> |
|
|
<text class="uni-calendar__backtoday" @click="backToday">{{todayText}}</text> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
<view class="uni-calendar__box"> |
|
|
<view class="uni-calendar__box"> |
|
@ -62,12 +62,12 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import Calendar from './util.js'; |
|
|
import Calendar from './util.js'; |
|
|
import calendarItem from './uni-calendar-item.vue' |
|
|
import CalendarItem from './uni-calendar-item.vue' |
|
|
import { |
|
|
|
|
|
initVueI18n |
|
|
import { initVueI18n } from '@dcloudio/uni-i18n' |
|
|
} from '@dcloudio/uni-i18n' |
|
|
import i18nMessages from './i18n/index.js' |
|
|
import messages from './i18n/index.js' |
|
|
const { t } = initVueI18n(i18nMessages) |
|
|
const { t } = initVueI18n(messages) |
|
|
|
|
|
/** |
|
|
/** |
|
|
* Calendar 日历 |
|
|
* Calendar 日历 |
|
|
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等 |
|
|
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等 |
|
@ -90,7 +90,7 @@ |
|
|
*/ |
|
|
*/ |
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
calendarItem |
|
|
CalendarItem |
|
|
}, |
|
|
}, |
|
|
emits:['close','confirm','change','monthSwitch'], |
|
|
emits:['close','confirm','change','monthSwitch'], |
|
|
props: { |
|
|
props: { |
|
@ -199,26 +199,26 @@ |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
// 获取日历方法实例 |
|
|
|
|
|
this.cale = new Calendar({ |
|
|
this.cale = new Calendar({ |
|
|
// date: new Date(), |
|
|
|
|
|
selected: this.selected, |
|
|
selected: this.selected, |
|
|
startDate: this.startDate, |
|
|
startDate: this.startDate, |
|
|
endDate: this.endDate, |
|
|
endDate: this.endDate, |
|
|
range: this.range, |
|
|
range: this.range, |
|
|
}) |
|
|
}) |
|
|
// 选中某一天 |
|
|
|
|
|
// this.cale.setDate(this.date) |
|
|
|
|
|
this.init(this.date) |
|
|
this.init(this.date) |
|
|
// this.setDay |
|
|
|
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
// 取消穿透 |
|
|
// 取消穿透 |
|
|
clean() {}, |
|
|
clean() {}, |
|
|
bindDateChange(e) { |
|
|
bindDateChange(e) { |
|
|
const value = e.detail.value + '-1' |
|
|
const value = e.detail.value + '-1' |
|
|
console.log(this.cale.getDate(value)); |
|
|
|
|
|
this.setDate(value) |
|
|
this.setDate(value) |
|
|
|
|
|
|
|
|
|
|
|
const { year,month } = this.cale.getDate(value) |
|
|
|
|
|
this.$emit('monthSwitch', { |
|
|
|
|
|
year, |
|
|
|
|
|
month |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
/** |
|
|
/** |
|
|
* 初始化日期显示 |
|
|
* 初始化日期显示 |
|
@ -323,11 +323,17 @@ |
|
|
/** |
|
|
/** |
|
|
* 回到今天 |
|
|
* 回到今天 |
|
|
*/ |
|
|
*/ |
|
|
backtoday() { |
|
|
backToday() { |
|
|
console.log(this.cale.getDate(new Date()).fullDate); |
|
|
const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}` |
|
|
let date = this.cale.getDate(new Date()).fullDate |
|
|
const date = this.cale.getDate(new Date()) |
|
|
// this.cale.setDate(date) |
|
|
const todayYearMonth = `${date.year}-${date.month}` |
|
|
this.init(date) |
|
|
|
|
|
|
|
|
this.init(date.fullDate) |
|
|
|
|
|
|
|
|
|
|
|
if(nowYearMonth !== todayYearMonth) { |
|
|
|
|
|
this.monthSwitch() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
this.change() |
|
|
this.change() |
|
|
}, |
|
|
}, |
|
|
/** |
|
|
/** |
|
@ -446,7 +452,6 @@ |
|
|
|
|
|
|
|
|
.uni-calendar--fixed-width { |
|
|
.uni-calendar--fixed-width { |
|
|
width: 50px; |
|
|
width: 50px; |
|
|
// padding: 0 15px; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-calendar__backtoday { |
|
|
.uni-calendar__backtoday { |
|
|