fix:更新日历文档，优化选中日期显示今天的问题

Author: mehaotian

src/components/uni-calendar/config.json

@@ -6,5 +6,5 @@
 	"type": "功能组件",
 	"edition": "1.3.9",
 	"path": "https://ext.dcloud.net.cn/plugin?id=56",
-	"update_log": "- 弹出模式下,动画异常的Bug"
+	"update_log": "- 优化 自定义日期显示今天的问题"
 }

src/components/uni-calendar/readme.md

@@ -46,9 +46,9 @@ export default {
 | startDate	| String	|-		| 日期选择范围-开始日期																									|
 | endDate	| String	|-		| 日期选择范围-结束日期																									|
 | range		| Boolean	| false	| 范围选择																												|
-| insert	| Boolean	| false	| 插入模式,可选值，ture：弹窗模式；false：插入模式；默认为插入模式														|
+| insert	| Boolean	| false	| 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式														|
 | selected	| Array		|-		| 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]	|
-|showMonth	|Boolean	| false	| 是否显示月份为背景																									|
+|showMonth	| Boolean	| true	| 是否显示月份为背景																									|
 
 ### 事件说明
 

src/components/uni-calendar/uni-calendar.vue

@@ -57,27 +57,27 @@
 	</view>
 </template>
 
-<script>
+<script>
 	import Calendar from './util.js';
-	import uniCalendarItem from './uni-calendar-item.vue'
-	/**
-	 * Calendar 日历
-	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
-	 * @property {String} date 自定义当前时间，默认为今天
-	 * @property {Boolean} lunar 显示农历
-	 * @property {String} startDate 日期选择范围-开始日期
-	 * @property {String} endDate 日期选择范围-结束日期
-	 * @property {Boolean} range 范围选择
-	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
-	 * 	@value true 弹窗模式
-	 * 	@value false 插入模式
-	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
-	 * @property {Boolean} showMonth 是否选择月份为背景
-	 * @event {Function} change 日期改变，`insert :ture` 时生效
-	 * @event {Function} confirm 确认选择`insert :false` 时生效
-	 * @event {Function} monthSwitch 切换月份时触发
-	 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+	import uniCalendarItem from './uni-calendar-item.vue'
+	/**
+	 * Calendar 日历
+	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+	 * @property {String} date 自定义当前时间，默认为今天
+	 * @property {Boolean} lunar 显示农历
+	 * @property {String} startDate 日期选择范围-开始日期
+	 * @property {String} endDate 日期选择范围-结束日期
+	 * @property {Boolean} range 范围选择
+	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
+	 * 	@value true 弹窗模式
+	 * 	@value false 插入模式
+	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
+	 * @property {Boolean} showMonth 是否选择月份为背景
+	 * @event {Function} change 日期改变，`insert :ture` 时生效
+	 * @event {Function} confirm 确认选择`insert :false` 时生效
+	 * @event {Function} monthSwitch 切换月份时触发
+	 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
 	 */
 	export default {
 		components: {
@@ -113,7 +113,7 @@
 			insert: {
 				type: Boolean,
 				default: true
-			},
+			},
 			showMonth: {
 				type: Boolean,
 				default: true
@@ -137,45 +137,68 @@
 		created() {
 			// 获取日历方法实例
 			this.cale = new Calendar({
-				date: this.date,
+				// date: new Date(),
 				selected: this.selected,
 				startDate: this.startDate,
 				endDate: this.endDate,
 				range: this.range,
 			})
-			this.init(this.cale.date.fullDate)
+			console.log(this.cale.date.fullDate);
+			// 选中某一天
+			this.cale.setDate(this.date)
+			this.init(this.cale.selectDate.fullDate)
+			// this.setDay
 		},
 		methods: {
 			// 取消穿透
-			clean() {},
+			clean() {},
+			/**
+			 * 初始化日期显示
+			 * @param {Object} date
+			 */
 			init(date) {
 				this.weeks = this.cale.weeks
 				this.nowDate = this.calendar = this.cale.getInfo(date)
-			},
+			},
+			/**
+			 * 打开日历弹窗
+			 */
 			open() {
 				this.show = true
-				this.$nextTick(() => {
-					setTimeout(()=>{
-						this.aniMaskShow = true
-					},50)
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.aniMaskShow = true
+					}, 50)
 				})
-			},
+			},
+			/**
+			 * 关闭日历弹窗
+			 */
 			close() {
 				this.aniMaskShow = false
 				this.$nextTick(() => {
 					setTimeout(() => {
 						this.show = false
 					}, 300)
 				})
-			},
+			},
+			/**
+			 * 确认按钮
+			 */
 			confirm() {
 				this.setEmit('confirm')
 				this.close()
-			},
+			},
+			/**
+			 * 变化触发
+			 */
 			change() {
 				if (!this.insert) return
 				this.setEmit('change')
-			},
+			},
+			/**
+			 * 选择月份触发
+			 */
 			monthSwitch() {
 				let {
 					year,
@@ -185,7 +208,11 @@
 					year,
 					month: Number(month)
 				})
-			},
+			},
+			/**
+			 * 派发事件
+			 * @param {Object} name
+			 */
 			setEmit(name) {
 				let {
 					year,
@@ -204,32 +231,51 @@
 					lunar,
 					extraInfo: extraInfo || {}
 				})
-			},
+			},
+			/**
+			 * 选择天触发
+			 * @param {Object} weeks
+			 */
 			choiceDate(weeks) {
 				if (weeks.disable) return
 				this.calendar = weeks
 				// 设置多选
 				this.cale.setMultiple(this.calendar.fullDate)
 				this.weeks = this.cale.weeks
 				this.change()
-			},
+			},
+			/**
+			 * 回到今天
+			 */
 			backtoday() {
-				this.cale.setDate(this.date)
+				console.log(this.cale.getDate(new Date()).fullDate);
+				let date = this.cale.getDate(new Date()).fullDate
+				this.cale.setDate(date)
 				this.weeks = this.cale.weeks
-				this.nowDate = this.calendar = this.cale.getInfo(this.date)
+				this.nowDate = this.calendar = this.cale.getInfo(date)
 				this.change()
-			},
+			},
+			/**
+			 * 上个月
+			 */
 			pre() {
 				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
 				this.setDate(preDate)
 				this.monthSwitch()
 
-			},
+			},
+			/**
+			 * 下个月
+			 */
 			next() {
 				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
 				this.setDate(nextDate)
 				this.monthSwitch()
-			},
+			},
+			/**
+			 * 设置日期
+			 * @param {Object} date
+			 */
 			setDate(date) {
 				this.cale.setDate(date)
 				this.weeks = this.cale.weeks
@@ -394,9 +440,10 @@
 		border-bottom-color: #F5F5F5;
 		border-bottom-style: solid;
 		border-bottom-width: 1px;
-	}
-	.uni-calendar__weeks-day-text {
-		font-size: 14px;
+	}
+
+	.uni-calendar__weeks-day-text {
+		font-size: 14px;
 	}
 
 	.uni-calendar__box {

src/components/uni-calendar/util.js

@@ -9,7 +9,7 @@ class Calendar {
 		range
 	} = {}) {
 		// 当前日期
-		this.date = this.getDate(date) // 当前初入日期
+		this.date = this.getDate(new Date()) // 当前初入日期
 		// 打点信息
 		this.selected = selected || [];
 		// 范围开始
@@ -25,8 +25,15 @@ class Calendar {
 		}
 		// 每周日期
 		this.weeks = {}
-
-		this._getWeek(this.date.fullDate)
+		// this._getWeek(this.date.fullDate)
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		this.selectDate = this.getDate(date)
+		this._getWeek(this.selectDate.fullDate)
 	}
 
 	/**
@@ -89,6 +96,7 @@ class Calendar {
 	 */
 	_currentMonthDys(dateData, full) {
 		let dateArr = []
+		console.log(this.date);
 		let fullDate = this.date.fullDate
 		for (let i = 1; i <= dateData; i++) {
 			let isinfo = false
@@ -164,13 +172,7 @@ class Calendar {
 		}
 		return dateArr
 	}
-	/**
-	 * 设置日期
-	 * @param {Object} date
-	 */
-	setDate(date) {
-		this._getWeek(date)
-	}
+	
 	/**
 	 * 获取当前日期详情
 	 * @param {Object} date
@@ -245,7 +247,7 @@ class Calendar {
 	 * 设置打点
 	 */
 	setSelectInfo(data, value) {
-		this.selected = value
+		this.selected = value
 		this._getWeek(data)
 	}