老铁 能搞个普通js版本吗

[yuxuechao]

npm 太高级了，有些项目还是vue.min.js,想用你的控件，能否支持下。

[LSL1618]

@yuxuechao 其实能用的，整了几天被我找出了普通模式的使用方式，参考一下吧：

<!-- dayjs -->
<script type="text/javascript" src="../../plugin/dayjs/dayjs.min.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/locale/zh-cn.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/plugin/utc.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/plugin/timezone.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/plugin/customParseFormat.js"></script>
<!-- vuejs -->
<script type="text/javascript" src="../../plugin/vue/vue-3.0.11.global.js"></script>
<!-- vuejs插件mpvue-calendar -->
<script type="text/javascript" src="../../plugin/vue/plugin/mpvue-calendar-3.0.0/mpvue-calendar.umd.min.js"></script>
<script type="text/javascript" src="../../plugin/vue/plugin/mpvue-calendar-3.0.0/lunar.js"></script>

<div id="app" style="text-align: center;">
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[0]" :month-range="yearMonths.January.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onJanuaryDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[1]" :month-range="yearMonths.February.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onFebruaryDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[2]" :month-range="yearMonths.March.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onMarchDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[3]" :month-range="yearMonths.April.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onAprilDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[4]" :month-range="yearMonths.May.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onMayDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[5]" :month-range="yearMonths.June.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onJuneDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[6]" :month-range="yearMonths.July.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onJulyDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[7]" :month-range="yearMonths.August.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onAugustDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[8]" :month-range="yearMonths.September.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onSeptemberDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[9]" :month-range="yearMonths.October.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onOctoberDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[10]" :month-range="yearMonths.November.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onNovemberDayClick" class="calendar_piece"></mpvue-calendar>
	<mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[11]" :month-range="yearMonths.December.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onDecemberDayClick" class="calendar_piece"></mpvue-calendar>
</div>

<script type="text/javascript">
dayjs.locale('zh-cn');// 国际化插件
dayjs.extend(window.dayjs_plugin_utc);// 时区插件
dayjs.extend(window.dayjs_plugin_timezone);// 时区插件
dayjs.extend(window.dayjs_plugin_customParseFormat);// 格式化插件
let now = dayjs();
function extractWeekend() {
	let weekend = [[], [], [], [], [], [], [], [], [], [], [], []];
	let i = 0, monthOfYear = {}, left = 0, right = 0, dateOfMonth;
	while (i < 12) {
		monthOfYear = i == 0 ? now.startOf('year') : now.startOf('year').add(i, 'month');
		left = monthOfYear.startOf('month').date();
		right = monthOfYear.endOf('month').date();
		while (left <= right) {
			dateOfMonth = left == 1 ? monthOfYear.startOf('month') : monthOfYear.startOf('month').add(left - 1, 'day');
			if ([6, 0].includes(dateOfMonth.day())) {
				weekend[monthOfYear.month()].push(dateOfMonth.format('YYYY-M-D'));
			}
			left++;
		}
		i++;
	}
	return weekend;
}
function getYearMonths() {
	let firstMonthOfYear = now.startOf('year');
	return {
		January: {
			dayjs: firstMonthOfYear,
			monthRange: [firstMonthOfYear.format('YYYY-M')],
			begin: firstMonthOfYear.format('YYYY-M-D'),
			end: firstMonthOfYear.endOf('month').format('YYYY-M-D')
		},
		February: {
			dayjs: firstMonthOfYear.add(1, 'month'),
			monthRange: [firstMonthOfYear.add(1, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(1, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(1, 'month').endOf('month').format('YYYY-M-D')
		},
		March: {
			dayjs: firstMonthOfYear.add(2, 'month'),
			monthRange: [firstMonthOfYear.add(2, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(2, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(2, 'month').endOf('month').format('YYYY-M-D')
		},
		April: {
			dayjs: firstMonthOfYear.add(3, 'month'),
			monthRange: [firstMonthOfYear.add(3, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(3, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(3, 'month').endOf('month').format('YYYY-M-D')
		},
		May: {
			dayjs: firstMonthOfYear.add(4, 'month'),
			monthRange: [firstMonthOfYear.add(4, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(4, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(4, 'month').endOf('month').format('YYYY-M-D')
		},
		June: {
			dayjs: firstMonthOfYear.add(5, 'month'),
			monthRange: [firstMonthOfYear.add(5, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(5, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(5, 'month').endOf('month').format('YYYY-M-D')
		},
		July: {
			dayjs: firstMonthOfYear.add(6, 'month'),
			monthRange: [firstMonthOfYear.add(6, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(6, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(6, 'month').endOf('month').format('YYYY-M-D')
		},
		August: {
			dayjs: firstMonthOfYear.add(7, 'month'),
			monthRange: [firstMonthOfYear.add(7, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(7, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(7, 'month').endOf('month').format('YYYY-M-D')
		},
		September: {
			dayjs: firstMonthOfYear.add(8, 'month'),
			monthRange: [firstMonthOfYear.add(8, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(8, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(8, 'month').endOf('month').format('YYYY-M-D')
		},
		October: {
			dayjs: firstMonthOfYear.add(9, 'month'),
			monthRange: [firstMonthOfYear.add(9, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(9, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(9, 'month').endOf('month').format('YYYY-M-D')
		},
		November: {
			dayjs: firstMonthOfYear.add(10, 'month'),
			monthRange: [firstMonthOfYear.add(10, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(10, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(10, 'month').endOf('month').format('YYYY-M-D')
		},
		December: {
			dayjs: firstMonthOfYear.add(11, 'month'),
			monthRange: [firstMonthOfYear.add(11, 'month').format('YYYY-M')],
			begin: firstMonthOfYear.add(11, 'month').format('YYYY-M-D'),
			end: firstMonthOfYear.add(11, 'month').endOf('month').format('YYYY-M-D')
		}
	};
}
let RootComponent = {
	data() {
		return {
			selectedDays: extractWeekend(),
			yearMonths: getYearMonths()
		};
	},
	setup() {
		return {
			selectMode: "multi",
			mode: "monthRange",
			completion: true,
			monFirst: true,
			backgroundText: true,
			language: "cn",
			format: (year, month) => {
				return [year + "年", (month < 10 ? ("0" + month) : month) + "月"];
			},
			lunar: window.lunar.default,
		};
	},
	created() {
		console.info('vm----->', Object.keys(this));
	},
	mounted() {
		this.$nextTick(function () {
		});
	},
	watch: {},
	components: {
		"mpvue-calendar": window["mpvue-calendar"]
	},
	computed: {
	},
	methods: {
		onJanuaryDayClick(selectDate) {
			this.selectedDays[0] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onFebruaryDayClick(selectDate) {
			this.selectedDays[1] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onMarchDayClick(selectDate) {
			this.selectedDays[2] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onAprilDayClick(selectDate) {
			this.selectedDays[3] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onMayDayClick(selectDate) {
			this.selectedDays[4] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onJuneDayClick(selectDate) {
			this.selectedDays[5] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onJulyDayClick(selectDate) {
			this.selectedDays[6] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onAugustDayClick(selectDate) {
			this.selectedDays[7] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onSeptemberDayClick(selectDate) {
			this.selectedDays[8] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onOctoberDayClick(selectDate) {
			this.selectedDays[9] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onNovemberDayClick(selectDate) {
			this.selectedDays[10] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		},
		onDecemberDayClick(selectDate) {
			this.selectedDays[11] = selectDate;
			console.info('selectedDays----->', JSON.stringify(this.selectedDays));
		}
	}
};
let app = Vue.createApp(RootComponent);
let vm = app.mount('#app');
</script>

重点在于此：

setup() {
	return {
		lunar: window.lunar.default,
	};
},
components: {
	"mpvue-calendar": window["mpvue-calendar"]
},