|
@@ -1,360 +0,0 @@
|
|
|
-import { VantComponent } from '../common/component';
|
|
|
-import { ROW_HEIGHT, getPrevDay, getNextDay, getToday, compareDay, copyDates, calcDateNum, formatMonthTitle, compareMonth, getMonths, getDayByOffset, } from './utils';
|
|
|
-import Toast from '../toast/toast';
|
|
|
-import { requestAnimationFrame } from '../common/utils';
|
|
|
-const initialMinDate = getToday().getTime();
|
|
|
-const initialMaxDate = (() => {
|
|
|
- const now = getToday();
|
|
|
- return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()).getTime();
|
|
|
-})();
|
|
|
-const getTime = (date) => date instanceof Date ? date.getTime() : date;
|
|
|
-VantComponent({
|
|
|
- props: {
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- value: '日期选择',
|
|
|
- },
|
|
|
- color: String,
|
|
|
- show: {
|
|
|
- type: Boolean,
|
|
|
- observer(val) {
|
|
|
- if (val) {
|
|
|
- this.initRect();
|
|
|
- this.scrollIntoView();
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- formatter: null,
|
|
|
- confirmText: {
|
|
|
- type: String,
|
|
|
- value: '确定',
|
|
|
- },
|
|
|
- confirmDisabledText: {
|
|
|
- type: String,
|
|
|
- value: '确定',
|
|
|
- },
|
|
|
- rangePrompt: String,
|
|
|
- showRangePrompt: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- defaultDate: {
|
|
|
- type: null,
|
|
|
- value: getToday().getTime(),
|
|
|
- observer(val) {
|
|
|
- this.setData({ currentDate: val });
|
|
|
- this.scrollIntoView();
|
|
|
- },
|
|
|
- },
|
|
|
- allowSameDay: Boolean,
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- value: 'single',
|
|
|
- observer: 'reset',
|
|
|
- },
|
|
|
- minDate: {
|
|
|
- type: Number,
|
|
|
- value: initialMinDate,
|
|
|
- },
|
|
|
- maxDate: {
|
|
|
- type: Number,
|
|
|
- value: initialMaxDate,
|
|
|
- },
|
|
|
- position: {
|
|
|
- type: String,
|
|
|
- value: 'bottom',
|
|
|
- },
|
|
|
- rowHeight: {
|
|
|
- type: null,
|
|
|
- value: ROW_HEIGHT,
|
|
|
- },
|
|
|
- round: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- poppable: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- showMark: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- showTitle: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- showConfirm: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- showSubtitle: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- safeAreaInsetBottom: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- closeOnClickOverlay: {
|
|
|
- type: Boolean,
|
|
|
- value: true,
|
|
|
- },
|
|
|
- maxRange: {
|
|
|
- type: null,
|
|
|
- value: null,
|
|
|
- },
|
|
|
- minRange: {
|
|
|
- type: Number,
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- firstDayOfWeek: {
|
|
|
- type: Number,
|
|
|
- value: 0,
|
|
|
- },
|
|
|
- readonly: Boolean,
|
|
|
- rootPortal: {
|
|
|
- type: Boolean,
|
|
|
- value: false,
|
|
|
- },
|
|
|
- },
|
|
|
- data: {
|
|
|
- subtitle: '',
|
|
|
- currentDate: null,
|
|
|
- scrollIntoView: '',
|
|
|
- },
|
|
|
- watch: {
|
|
|
- minDate() {
|
|
|
- this.initRect();
|
|
|
- },
|
|
|
- maxDate() {
|
|
|
- this.initRect();
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.setData({
|
|
|
- currentDate: this.getInitialDate(this.data.defaultDate),
|
|
|
- });
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.data.show || !this.data.poppable) {
|
|
|
- this.initRect();
|
|
|
- this.scrollIntoView();
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- reset() {
|
|
|
- this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
|
|
|
- this.scrollIntoView();
|
|
|
- },
|
|
|
- initRect() {
|
|
|
- if (this.contentObserver != null) {
|
|
|
- this.contentObserver.disconnect();
|
|
|
- }
|
|
|
- const contentObserver = this.createIntersectionObserver({
|
|
|
- thresholds: [0, 0.1, 0.9, 1],
|
|
|
- observeAll: true,
|
|
|
- });
|
|
|
- this.contentObserver = contentObserver;
|
|
|
- contentObserver.relativeTo('.van-calendar__body');
|
|
|
- contentObserver.observe('.month', (res) => {
|
|
|
- if (res.boundingClientRect.top <= res.relativeRect.top) {
|
|
|
- // @ts-ignore
|
|
|
- this.setData({ subtitle: formatMonthTitle(res.dataset.date) });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- limitDateRange(date, minDate = null, maxDate = null) {
|
|
|
- minDate = minDate || this.data.minDate;
|
|
|
- maxDate = maxDate || this.data.maxDate;
|
|
|
- if (compareDay(date, minDate) === -1) {
|
|
|
- return minDate;
|
|
|
- }
|
|
|
- if (compareDay(date, maxDate) === 1) {
|
|
|
- return maxDate;
|
|
|
- }
|
|
|
- return date;
|
|
|
- },
|
|
|
- getInitialDate(defaultDate = null) {
|
|
|
- const { type, minDate, maxDate, allowSameDay } = this.data;
|
|
|
- if (!defaultDate)
|
|
|
- return [];
|
|
|
- const now = getToday().getTime();
|
|
|
- if (type === 'range') {
|
|
|
- if (!Array.isArray(defaultDate)) {
|
|
|
- defaultDate = [];
|
|
|
- }
|
|
|
- const [startDay, endDay] = defaultDate || [];
|
|
|
- const startDate = getTime(startDay || now);
|
|
|
- const start = this.limitDateRange(startDate, minDate, allowSameDay ? startDate : getPrevDay(new Date(maxDate)).getTime());
|
|
|
- const date = getTime(endDay || now);
|
|
|
- const end = this.limitDateRange(date, allowSameDay ? date : getNextDay(new Date(minDate)).getTime());
|
|
|
- return [start, end];
|
|
|
- }
|
|
|
- if (type === 'multiple') {
|
|
|
- if (Array.isArray(defaultDate)) {
|
|
|
- return defaultDate.map((date) => this.limitDateRange(date));
|
|
|
- }
|
|
|
- return [this.limitDateRange(now)];
|
|
|
- }
|
|
|
- if (!defaultDate || Array.isArray(defaultDate)) {
|
|
|
- defaultDate = now;
|
|
|
- }
|
|
|
- return this.limitDateRange(defaultDate);
|
|
|
- },
|
|
|
- scrollIntoView() {
|
|
|
- requestAnimationFrame(() => {
|
|
|
- const { currentDate, type, show, poppable, minDate, maxDate } = this.data;
|
|
|
- if (!currentDate)
|
|
|
- return;
|
|
|
- // @ts-ignore
|
|
|
- const targetDate = type === 'single' ? currentDate : currentDate[0];
|
|
|
- const displayed = show || !poppable;
|
|
|
- if (!targetDate || !displayed) {
|
|
|
- return;
|
|
|
- }
|
|
|
- const months = getMonths(minDate, maxDate);
|
|
|
- months.some((month, index) => {
|
|
|
- if (compareMonth(month, targetDate) === 0) {
|
|
|
- this.setData({ scrollIntoView: `month${index}` });
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- onOpen() {
|
|
|
- this.$emit('open');
|
|
|
- },
|
|
|
- onOpened() {
|
|
|
- this.$emit('opened');
|
|
|
- },
|
|
|
- onClose() {
|
|
|
- this.$emit('close');
|
|
|
- },
|
|
|
- onClosed() {
|
|
|
- this.$emit('closed');
|
|
|
- },
|
|
|
- onClickDay(event) {
|
|
|
- if (this.data.readonly) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let { date } = event.detail;
|
|
|
- const { type, currentDate, allowSameDay } = this.data;
|
|
|
- if (type === 'range') {
|
|
|
- // @ts-ignore
|
|
|
- const [startDay, endDay] = currentDate;
|
|
|
- if (startDay && !endDay) {
|
|
|
- const compareToStart = compareDay(date, startDay);
|
|
|
- if (compareToStart === 1) {
|
|
|
- const { days } = this.selectComponent('.month').data;
|
|
|
- days.some((day, index) => {
|
|
|
- const isDisabled = day.type === 'disabled' &&
|
|
|
- getTime(startDay) < getTime(day.date) &&
|
|
|
- getTime(day.date) < getTime(date);
|
|
|
- if (isDisabled) {
|
|
|
- ({ date } = days[index - 1]);
|
|
|
- }
|
|
|
- return isDisabled;
|
|
|
- });
|
|
|
- this.select([startDay, date], true);
|
|
|
- }
|
|
|
- else if (compareToStart === -1) {
|
|
|
- this.select([date, null]);
|
|
|
- }
|
|
|
- else if (allowSameDay) {
|
|
|
- this.select([date, date], true);
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- this.select([date, null]);
|
|
|
- }
|
|
|
- }
|
|
|
- else if (type === 'multiple') {
|
|
|
- let selectedIndex;
|
|
|
- // @ts-ignore
|
|
|
- const selected = currentDate.some((dateItem, index) => {
|
|
|
- const equal = compareDay(dateItem, date) === 0;
|
|
|
- if (equal) {
|
|
|
- selectedIndex = index;
|
|
|
- }
|
|
|
- return equal;
|
|
|
- });
|
|
|
- if (selected) {
|
|
|
- // @ts-ignore
|
|
|
- const cancelDate = currentDate.splice(selectedIndex, 1);
|
|
|
- this.setData({ currentDate });
|
|
|
- this.unselect(cancelDate);
|
|
|
- }
|
|
|
- else {
|
|
|
- // @ts-ignore
|
|
|
- this.select([...currentDate, date]);
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- this.select(date, true);
|
|
|
- }
|
|
|
- },
|
|
|
- unselect(dateArray) {
|
|
|
- const date = dateArray[0];
|
|
|
- if (date) {
|
|
|
- this.$emit('unselect', copyDates(date));
|
|
|
- }
|
|
|
- },
|
|
|
- select(date, complete) {
|
|
|
- if (complete && this.data.type === 'range') {
|
|
|
- const valid = this.checkRange(date);
|
|
|
- if (!valid) {
|
|
|
- // auto selected to max range if showConfirm
|
|
|
- if (this.data.showConfirm) {
|
|
|
- this.emit([
|
|
|
- date[0],
|
|
|
- getDayByOffset(date[0], this.data.maxRange - 1),
|
|
|
- ]);
|
|
|
- }
|
|
|
- else {
|
|
|
- this.emit(date);
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- this.emit(date);
|
|
|
- if (complete && !this.data.showConfirm) {
|
|
|
- this.onConfirm();
|
|
|
- }
|
|
|
- },
|
|
|
- emit(date) {
|
|
|
- this.setData({
|
|
|
- currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
|
|
|
- });
|
|
|
- this.$emit('select', copyDates(date));
|
|
|
- },
|
|
|
- checkRange(date) {
|
|
|
- const { maxRange, rangePrompt, showRangePrompt } = this.data;
|
|
|
- if (maxRange && calcDateNum(date) > maxRange) {
|
|
|
- if (showRangePrompt) {
|
|
|
- Toast({
|
|
|
- context: this,
|
|
|
- message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
|
|
|
- });
|
|
|
- }
|
|
|
- this.$emit('over-range');
|
|
|
- return false;
|
|
|
- }
|
|
|
- return true;
|
|
|
- },
|
|
|
- onConfirm() {
|
|
|
- if (this.data.type === 'range' &&
|
|
|
- !this.checkRange(this.data.currentDate)) {
|
|
|
- return;
|
|
|
- }
|
|
|
- wx.nextTick(() => {
|
|
|
- // @ts-ignore
|
|
|
- this.$emit('confirm', copyDates(this.data.currentDate));
|
|
|
- });
|
|
|
- },
|
|
|
- onClickSubtitle(event) {
|
|
|
- this.$emit('click-subtitle', event);
|
|
|
- },
|
|
|
- },
|
|
|
-});
|