date-picker.js 3.18 KB
import api from '@/api/api'
import {
	httpGet,
	httpPost
} from '@/api/fetch-api.js'

import Date from '@/utils/date.js';

export default {
	props: {
		// 周末是否可选
		weekend: {
			type: Boolean,
			default: false
		},
		filterDates: {
			type: Array,
			default(){
				return ["2019-11-26", "2019-11-28"]
			}
		}
	},
	data() {
		return {
			key: 'value',
			year: 1970,
			month: 1, // (1~12)
			date: 1, // (1~31)
			day: 0, // (0~6)
			// 用户渲染的数据
			fortmatMonthData: [],
		}
	},
	components: {},
	methods: {
		/**
		 * 画月历图
		 * 所需数据
		 * 		year  	年
		 * 		month 	月 (1~12)
		 * 		date		日  (1~31)
		 * 		day		星期几  (0-6)
		 *
		 * 输出数据
		 * 		fortmatMonthData 用于渲染日历的数据
		 */
		formatMonth() {
			let result = [];
			let year = this.year;
			let month = this.month;

			// 获取当月天数
			let dayNum = Date.getDaysInMonth(year, month - 1);

			/**
			 * 排布出当月号码
			 * 组装数据
			 */
			for (let index = 0; index < dayNum; index++) {
				let curData = {}
				curData.standards = 0;
				let date = index + 1;
				let day = Date.parse(`${year}.${month}.${date}`).getDay();
				let isWeekend = day == 0 || day == 6;
				let disable = false; // 判断是否不可选
				disable = isWeekend && !this.weekend; // 判断周末不可选
				let filterDates = this.filterDates;
				filterDates.forEach(element => {
					let curDate = `${year}-${month}-${date}`;
					if (element == curDate) {
						disable = true;
					}
				});
				curData = Object.assign({
					year: year,
					month: month,
					date: date, // (1~31)
					day: day,
					isWeekend: isWeekend,
					disable: disable,
				}, curData);
				result.push(curData);
			}

			// 当月1号星期几 0-6 往前塞值
			let dateStr = month + '.' + '1' + '.' + year;
			let firstDay = Date.parse(dateStr).getDay();

			// 根据星期几在前面补空格 星期日0格子,星期一1格子,星期六6格子
			for (let index = 0; index < firstDay; index++) {
				result.unshift(null);
			}
			this.fortmatMonthData = result;
		},
		// 加/减 月份
		addMonths(value) {
			let dateStr = this.month + '.' + this.date + '.' + this.year;
			let targetDate = Date.parse(dateStr).addMonths(value);
			this.year = targetDate.getFullYear();
			this.month = targetDate.getMonth() + 1;
			this.date = targetDate.getDate();
			this.formatMonth();
		},
		// 上一个月
		prevMonth() {
			this.addMonths(-1);
		},
		// 下一个月
		nextMonth() {
			this.addMonths(1);
		},
		// 加/减 年份
		addYear(value) {
			let dateStr = this.month + '.' + this.date + '.' + this.year;
			let targetDate = Date.parse(dateStr).addYears(value);
			this.year = targetDate.getFullYear();
			this.month = targetDate.getMonth() + 1;
			this.formatMonth();
		},
		// 上一年
		prevYear() {
			this.addYear(-1);
		},
		// 下一年
		nextYear() {
			this.addYear(1);
		},
		selectDay(item) {
			if (!item) return;
			let curData = item;
			let date = curData.date;
			this.date = date;
		},
		initData() {}
	},
	mounted() {},
	created() {
		// 设置今天日期
		let today = Date.today();
		this.year = today.getFullYear();
		this.month = today.getMonth() + 1;
		this.date = today.getDate();
		this.formatMonth();
	}
}