parent
47f268768b
commit
6422b8619d
@ -1,68 +0,0 @@
|
|||||||
<view class="van-calendar">
|
|
||||||
<header
|
|
||||||
title="{{ title }}"
|
|
||||||
showTitle="{{ showTitle }}"
|
|
||||||
subtitle="{{ subtitle }}"
|
|
||||||
showSubtitle="{{ showSubtitle }}"
|
|
||||||
firstDayOfWeek="{{ firstDayOfWeek }}"
|
|
||||||
bind:click-subtitle="onClickSubtitle"
|
|
||||||
>
|
|
||||||
<slot name="title" slot="title"></slot>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<scroll-view
|
|
||||||
class="van-calendar__body"
|
|
||||||
scroll-y
|
|
||||||
scroll-into-view="{{ scrollIntoView }}"
|
|
||||||
>
|
|
||||||
<month
|
|
||||||
wx:for="{{ computed.getMonths(minDate, maxDate) }}"
|
|
||||||
wx:key="index"
|
|
||||||
id="month{{ index }}"
|
|
||||||
class="month"
|
|
||||||
data-date="{{ item }}"
|
|
||||||
date="{{ item }}"
|
|
||||||
type="{{ type }}"
|
|
||||||
color="{{ color }}"
|
|
||||||
minDate="{{ minDate }}"
|
|
||||||
maxDate="{{ maxDate }}"
|
|
||||||
showMark="{{ showMark }}"
|
|
||||||
formatter="{{ formatter }}"
|
|
||||||
rowHeight="{{ rowHeight }}"
|
|
||||||
currentDate="{{ currentDate }}"
|
|
||||||
showSubtitle="{{ showSubtitle }}"
|
|
||||||
allowSameDay="{{ allowSameDay }}"
|
|
||||||
showMonthTitle="{{ index !== 0 || !showSubtitle }}"
|
|
||||||
firstDayOfWeek="{{ firstDayOfWeek }}"
|
|
||||||
bind:click="onClickDay"
|
|
||||||
/>
|
|
||||||
</scroll-view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
|
|
||||||
>
|
|
||||||
<slot name="footer"></slot>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
|
|
||||||
>
|
|
||||||
<van-button
|
|
||||||
wx:if="{{ showConfirm }}"
|
|
||||||
round
|
|
||||||
block
|
|
||||||
type="danger"
|
|
||||||
color="{{ color }}"
|
|
||||||
custom-class="van-calendar__confirm"
|
|
||||||
disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
|
|
||||||
nativeType="text"
|
|
||||||
bind:click="onConfirm"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
computed.getButtonDisabled(type, currentDate)
|
|
||||||
? confirmDisabledText
|
|
||||||
: confirmText
|
|
||||||
}}
|
|
||||||
</van-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
||||||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
||||||
if (ar || !(i in from)) {
|
|
||||||
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
||||||
ar[i] = from[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return to.concat(ar || Array.prototype.slice.call(from));
|
|
||||||
};
|
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
|
||||||
var component_1 = require("../../../common/component");
|
|
||||||
(0, component_1.VantComponent)({
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
value: '日期选择',
|
|
||||||
},
|
|
||||||
subtitle: String,
|
|
||||||
showTitle: Boolean,
|
|
||||||
showSubtitle: Boolean,
|
|
||||||
firstDayOfWeek: {
|
|
||||||
type: Number,
|
|
||||||
observer: 'initWeekDay',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
weekdays: [],
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
this.initWeekDay();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initWeekDay: function () {
|
|
||||||
var defaultWeeks = ['日', '一', '二', '三', '四', '五', '六'];
|
|
||||||
var firstDayOfWeek = this.data.firstDayOfWeek || 0;
|
|
||||||
this.setData({
|
|
||||||
weekdays: __spreadArray(__spreadArray([], defaultWeeks.slice(firstDayOfWeek, 7), true), defaultWeeks.slice(0, firstDayOfWeek), true),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onClickSubtitle: function (event) {
|
|
||||||
this.$emit('click-subtitle', event);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<view class="van-calendar__header">
|
|
||||||
<block wx:if="{{ showTitle }}">
|
|
||||||
<view class="van-calendar__header-title"><slot name="title"></slot></view>
|
|
||||||
<view class="van-calendar__header-title">{{ title }}</view>
|
|
||||||
</block>
|
|
||||||
|
|
||||||
<view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle" bind:tap="onClickSubtitle">
|
|
||||||
{{ subtitle }}
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="van-calendar__weekdays">
|
|
||||||
<view wx:for="{{ weekdays }}" wx:key="index" class="van-calendar__weekday">
|
|
||||||
{{ item }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@import '../../../common/index.wxss';.van-calendar__header{box-shadow:var(--calendar-header-box-shadow,0 2px 10px hsla(220,1%,50%,.16));flex-shrink:0}.van-calendar__header-subtitle,.van-calendar__header-title{font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.van-calendar__header-title+.van-calendar__header-title,.van-calendar__header-title:empty{display:none}.van-calendar__header-title:empty+.van-calendar__header-title{display:block!important}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--calendar-weekdays-font-size,12px);line-height:var(--calendar-weekdays-height,30px);text-align:center}
|
|
||||||
@ -1,158 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
|
||||||
var component_1 = require("../../../common/component");
|
|
||||||
var utils_1 = require("../../utils");
|
|
||||||
(0, component_1.VantComponent)({
|
|
||||||
props: {
|
|
||||||
date: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
color: String,
|
|
||||||
minDate: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
maxDate: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
showMark: Boolean,
|
|
||||||
rowHeight: null,
|
|
||||||
formatter: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
currentDate: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
firstDayOfWeek: {
|
|
||||||
type: Number,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
allowSameDay: Boolean,
|
|
||||||
showSubtitle: Boolean,
|
|
||||||
showMonthTitle: Boolean,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
visible: true,
|
|
||||||
days: [],
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick: function (event) {
|
|
||||||
var index = event.currentTarget.dataset.index;
|
|
||||||
var item = this.data.days[index];
|
|
||||||
if (item.type !== 'disabled') {
|
|
||||||
this.$emit('click', item);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setDays: function () {
|
|
||||||
var days = [];
|
|
||||||
var startDate = new Date(this.data.date);
|
|
||||||
var year = startDate.getFullYear();
|
|
||||||
var month = startDate.getMonth();
|
|
||||||
var totalDay = (0, utils_1.getMonthEndDay)(startDate.getFullYear(), startDate.getMonth() + 1);
|
|
||||||
for (var day = 1; day <= totalDay; day++) {
|
|
||||||
var date = new Date(year, month, day);
|
|
||||||
var type = this.getDayType(date);
|
|
||||||
var config = {
|
|
||||||
date: date,
|
|
||||||
type: type,
|
|
||||||
text: day,
|
|
||||||
bottomInfo: this.getBottomInfo(type),
|
|
||||||
};
|
|
||||||
if (this.data.formatter) {
|
|
||||||
config = this.data.formatter(config);
|
|
||||||
}
|
|
||||||
days.push(config);
|
|
||||||
}
|
|
||||||
this.setData({ days: days });
|
|
||||||
},
|
|
||||||
getMultipleDayType: function (day) {
|
|
||||||
var currentDate = this.data.currentDate;
|
|
||||||
if (!Array.isArray(currentDate)) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
var isSelected = function (date) {
|
|
||||||
return currentDate.some(function (item) { return (0, utils_1.compareDay)(item, date) === 0; });
|
|
||||||
};
|
|
||||||
if (isSelected(day)) {
|
|
||||||
var prevDay = (0, utils_1.getPrevDay)(day);
|
|
||||||
var nextDay = (0, utils_1.getNextDay)(day);
|
|
||||||
var prevSelected = isSelected(prevDay);
|
|
||||||
var nextSelected = isSelected(nextDay);
|
|
||||||
if (prevSelected && nextSelected) {
|
|
||||||
return 'multiple-middle';
|
|
||||||
}
|
|
||||||
if (prevSelected) {
|
|
||||||
return 'end';
|
|
||||||
}
|
|
||||||
return nextSelected ? 'start' : 'multiple-selected';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getRangeDayType: function (day) {
|
|
||||||
var _a = this.data, currentDate = _a.currentDate, allowSameDay = _a.allowSameDay;
|
|
||||||
if (!Array.isArray(currentDate)) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
var startDay = currentDate[0], endDay = currentDate[1];
|
|
||||||
if (!startDay) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
var compareToStart = (0, utils_1.compareDay)(day, startDay);
|
|
||||||
if (!endDay) {
|
|
||||||
return compareToStart === 0 ? 'start' : '';
|
|
||||||
}
|
|
||||||
var compareToEnd = (0, utils_1.compareDay)(day, endDay);
|
|
||||||
if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
|
|
||||||
return 'start-end';
|
|
||||||
}
|
|
||||||
if (compareToStart === 0) {
|
|
||||||
return 'start';
|
|
||||||
}
|
|
||||||
if (compareToEnd === 0) {
|
|
||||||
return 'end';
|
|
||||||
}
|
|
||||||
if (compareToStart > 0 && compareToEnd < 0) {
|
|
||||||
return 'middle';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getDayType: function (day) {
|
|
||||||
var _a = this.data, type = _a.type, minDate = _a.minDate, maxDate = _a.maxDate, currentDate = _a.currentDate;
|
|
||||||
if ((0, utils_1.compareDay)(day, minDate) < 0 || (0, utils_1.compareDay)(day, maxDate) > 0) {
|
|
||||||
return 'disabled';
|
|
||||||
}
|
|
||||||
if (type === 'single') {
|
|
||||||
return (0, utils_1.compareDay)(day, currentDate) === 0 ? 'selected' : '';
|
|
||||||
}
|
|
||||||
if (type === 'multiple') {
|
|
||||||
return this.getMultipleDayType(day);
|
|
||||||
}
|
|
||||||
/* istanbul ignore else */
|
|
||||||
if (type === 'range') {
|
|
||||||
return this.getRangeDayType(day);
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getBottomInfo: function (type) {
|
|
||||||
if (this.data.type === 'range') {
|
|
||||||
if (type === 'start') {
|
|
||||||
return '开始';
|
|
||||||
}
|
|
||||||
if (type === 'end') {
|
|
||||||
return '结束';
|
|
||||||
}
|
|
||||||
if (type === 'start-end') {
|
|
||||||
return '开始/结束';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<wxs src="./index.wxs" module="computed"></wxs>
|
|
||||||
<wxs src="../../../wxs/utils.wxs" module="utils" />
|
|
||||||
|
|
||||||
<view class="van-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
|
|
||||||
<view wx:if="{{ showMonthTitle }}" class="van-calendar__month-title">
|
|
||||||
{{ computed.formatMonthTitle(date) }}
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view wx:if="{{ visible }}" class="van-calendar__days">
|
|
||||||
<view wx:if="{{ showMark }}" class="van-calendar__month-mark">
|
|
||||||
{{ computed.getMark(date) }}
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
wx:for="{{ days }}"
|
|
||||||
wx:key="index"
|
|
||||||
style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek) }}"
|
|
||||||
class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }}"
|
|
||||||
data-index="{{ index }}"
|
|
||||||
bindtap="onClick"
|
|
||||||
>
|
|
||||||
<view wx:if="{{ item.type === 'selected' }}" class="van-calendar__selected-day" style="background: {{ color }}">
|
|
||||||
<view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
|
|
||||||
{{ item.text }}
|
|
||||||
<view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
|
|
||||||
{{ item.bottomInfo }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view wx:else>
|
|
||||||
<view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
|
|
||||||
{{ item.text }}
|
|
||||||
<view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
|
|
||||||
{{ item.bottomInfo }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
var utils = require('../../utils.wxs');
|
|
||||||
|
|
||||||
function getMark(date) {
|
|
||||||
return getDate(date).getMonth() + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var ROW_HEIGHT = 64;
|
|
||||||
|
|
||||||
function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
|
|
||||||
var style = [];
|
|
||||||
var current = getDate(date).getDay() || 7;
|
|
||||||
var offset = current < firstDayOfWeek ? (7 - firstDayOfWeek + current) :
|
|
||||||
current === 7 && firstDayOfWeek === 0 ? 0 :
|
|
||||||
(current - firstDayOfWeek);
|
|
||||||
|
|
||||||
if (index === 0) {
|
|
||||||
style.push(['margin-left', (100 * offset) / 7 + '%']);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rowHeight !== ROW_HEIGHT) {
|
|
||||||
style.push(['height', rowHeight + 'px']);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (color) {
|
|
||||||
if (
|
|
||||||
type === 'start' ||
|
|
||||||
type === 'end' ||
|
|
||||||
type === 'start-end' ||
|
|
||||||
type === 'multiple-selected' ||
|
|
||||||
type === 'multiple-middle'
|
|
||||||
) {
|
|
||||||
style.push(['background', color]);
|
|
||||||
} else if (type === 'middle') {
|
|
||||||
style.push(['color', color]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return style
|
|
||||||
.map(function(item) {
|
|
||||||
return item.join(':');
|
|
||||||
})
|
|
||||||
.join(';');
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatMonthTitle(date) {
|
|
||||||
date = getDate(date);
|
|
||||||
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMonthStyle(visible, date, rowHeight) {
|
|
||||||
if (!visible) {
|
|
||||||
date = getDate(date);
|
|
||||||
|
|
||||||
var totalDay = utils.getMonthEndDay(
|
|
||||||
date.getFullYear(),
|
|
||||||
date.getMonth() + 1
|
|
||||||
);
|
|
||||||
var offset = getDate(date).getDay();
|
|
||||||
var padding = Math.ceil((totalDay + offset) / 7) * rowHeight;
|
|
||||||
|
|
||||||
return 'padding-bottom:' + padding + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getMark: getMark,
|
|
||||||
getDayStyle: getDayStyle,
|
|
||||||
formatMonthTitle: formatMonthTitle,
|
|
||||||
getMonthStyle: getMonthStyle
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@import '../../../common/index.wxss';.van-calendar{background-color:var(--calendar-background-color,#fff);display:flex;flex-direction:column;height:100%}.van-calendar__month-title{font-size:var(--calendar-month-title-font-size,14px);font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.van-calendar__days{display:flex;flex-wrap:wrap;position:relative;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{color:var(--calendar-month-mark-color,rgba(242,243,245,.8));font-size:var(--calendar-month-mark-font-size,160px);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:0}.van-calendar__day,.van-calendar__selected-day{align-items:center;display:flex;justify-content:center;text-align:center}.van-calendar__day{font-size:var(--calendar-day-font-size,16px);height:var(--calendar-day-height,64px);position:relative;width:14.285%}.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected,.van-calendar__day--start,.van-calendar__day--start-end{background-color:var(--calendar-range-edge-background-color,#ee0a24);color:var(--calendar-range-edge-color,#fff)}.van-calendar__day--start{border-radius:4px 0 0 4px}.van-calendar__day--end{border-radius:0 4px 4px 0}.van-calendar__day--multiple-selected,.van-calendar__day--start-end{border-radius:4px}.van-calendar__day--middle{color:var(--calendar-range-middle-color,#ee0a24)}.van-calendar__day--middle:after{background-color:currentColor;bottom:0;content:"";left:0;opacity:var(--calendar-range-middle-background-opacity,.1);position:absolute;right:0;top:0}.van-calendar__day--disabled{color:var(--calendar-day-disabled-color,#c8c9cc);cursor:default}.van-calendar__bottom-info,.van-calendar__top-info{font-size:var(--calendar-info-font-size,10px);left:0;line-height:var(--calendar-info-line-height,14px);position:absolute;right:0}@media (max-width:350px){.van-calendar__bottom-info,.van-calendar__top-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{background-color:var(--calendar-selected-day-background-color,#ee0a24);border-radius:4px;color:var(--calendar-selected-day-color,#fff);height:var(--calendar-selected-day-size,54px);width:var(--calendar-selected-day-size,54px)}
|
|
||||||
@ -1,350 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
||||||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
||||||
if (ar || !(i in from)) {
|
|
||||||
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
||||||
ar[i] = from[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return to.concat(ar || Array.prototype.slice.call(from));
|
|
||||||
};
|
|
||||||
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
||||||
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
||||||
};
|
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
|
||||||
var component_1 = require("../common/component");
|
|
||||||
var utils_1 = require("./utils");
|
|
||||||
var toast_1 = __importDefault(require("../toast/toast"));
|
|
||||||
var utils_2 = require("../common/utils");
|
|
||||||
var initialMinDate = (0, utils_1.getToday)().getTime();
|
|
||||||
var initialMaxDate = (function () {
|
|
||||||
var now = (0, utils_1.getToday)();
|
|
||||||
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()).getTime();
|
|
||||||
})();
|
|
||||||
(0, component_1.VantComponent)({
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
value: '日期选择',
|
|
||||||
},
|
|
||||||
color: String,
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
observer: function (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,
|
|
||||||
observer: function (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: utils_1.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,
|
|
||||||
},
|
|
||||||
firstDayOfWeek: {
|
|
||||||
type: Number,
|
|
||||||
value: 0,
|
|
||||||
},
|
|
||||||
readonly: Boolean,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
subtitle: '',
|
|
||||||
currentDate: null,
|
|
||||||
scrollIntoView: '',
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
this.setData({
|
|
||||||
currentDate: this.getInitialDate(this.data.defaultDate),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
if (this.data.show || !this.data.poppable) {
|
|
||||||
this.initRect();
|
|
||||||
this.scrollIntoView();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
reset: function () {
|
|
||||||
this.setData({ currentDate: this.getInitialDate() });
|
|
||||||
this.scrollIntoView();
|
|
||||||
},
|
|
||||||
initRect: function () {
|
|
||||||
var _this = this;
|
|
||||||
if (this.contentObserver != null) {
|
|
||||||
this.contentObserver.disconnect();
|
|
||||||
}
|
|
||||||
var contentObserver = this.createIntersectionObserver({
|
|
||||||
thresholds: [0, 0.1, 0.9, 1],
|
|
||||||
observeAll: true,
|
|
||||||
});
|
|
||||||
this.contentObserver = contentObserver;
|
|
||||||
contentObserver.relativeTo('.van-calendar__body');
|
|
||||||
contentObserver.observe('.month', function (res) {
|
|
||||||
if (res.boundingClientRect.top <= res.relativeRect.top) {
|
|
||||||
// @ts-ignore
|
|
||||||
_this.setData({ subtitle: (0, utils_1.formatMonthTitle)(res.dataset.date) });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
limitDateRange: function (date, minDate, maxDate) {
|
|
||||||
if (minDate === void 0) { minDate = null; }
|
|
||||||
if (maxDate === void 0) { maxDate = null; }
|
|
||||||
minDate = minDate || this.data.minDate;
|
|
||||||
maxDate = maxDate || this.data.maxDate;
|
|
||||||
if ((0, utils_1.compareDay)(date, minDate) === -1) {
|
|
||||||
return minDate;
|
|
||||||
}
|
|
||||||
if ((0, utils_1.compareDay)(date, maxDate) === 1) {
|
|
||||||
return maxDate;
|
|
||||||
}
|
|
||||||
return date;
|
|
||||||
},
|
|
||||||
getInitialDate: function (defaultDate) {
|
|
||||||
var _this = this;
|
|
||||||
if (defaultDate === void 0) { defaultDate = null; }
|
|
||||||
var _a = this.data, type = _a.type, minDate = _a.minDate, maxDate = _a.maxDate;
|
|
||||||
var now = (0, utils_1.getToday)().getTime();
|
|
||||||
if (type === 'range') {
|
|
||||||
if (!Array.isArray(defaultDate)) {
|
|
||||||
defaultDate = [];
|
|
||||||
}
|
|
||||||
var _b = defaultDate || [], startDay = _b[0], endDay = _b[1];
|
|
||||||
var start = this.limitDateRange(startDay || now, minDate, (0, utils_1.getPrevDay)(new Date(maxDate)).getTime());
|
|
||||||
var end = this.limitDateRange(endDay || now, (0, utils_1.getNextDay)(new Date(minDate)).getTime());
|
|
||||||
return [start, end];
|
|
||||||
}
|
|
||||||
if (type === 'multiple') {
|
|
||||||
if (Array.isArray(defaultDate)) {
|
|
||||||
return defaultDate.map(function (date) { return _this.limitDateRange(date); });
|
|
||||||
}
|
|
||||||
return [this.limitDateRange(now)];
|
|
||||||
}
|
|
||||||
if (!defaultDate || Array.isArray(defaultDate)) {
|
|
||||||
defaultDate = now;
|
|
||||||
}
|
|
||||||
return this.limitDateRange(defaultDate);
|
|
||||||
},
|
|
||||||
scrollIntoView: function () {
|
|
||||||
var _this = this;
|
|
||||||
(0, utils_2.requestAnimationFrame)(function () {
|
|
||||||
var _a = _this.data, currentDate = _a.currentDate, type = _a.type, show = _a.show, poppable = _a.poppable, minDate = _a.minDate, maxDate = _a.maxDate;
|
|
||||||
// @ts-ignore
|
|
||||||
var targetDate = type === 'single' ? currentDate : currentDate[0];
|
|
||||||
var displayed = show || !poppable;
|
|
||||||
if (!targetDate || !displayed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var months = (0, utils_1.getMonths)(minDate, maxDate);
|
|
||||||
months.some(function (month, index) {
|
|
||||||
if ((0, utils_1.compareMonth)(month, targetDate) === 0) {
|
|
||||||
_this.setData({ scrollIntoView: "month" + index });
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onOpen: function () {
|
|
||||||
this.$emit('open');
|
|
||||||
},
|
|
||||||
onOpened: function () {
|
|
||||||
this.$emit('opened');
|
|
||||||
},
|
|
||||||
onClose: function () {
|
|
||||||
this.$emit('close');
|
|
||||||
},
|
|
||||||
onClosed: function () {
|
|
||||||
this.$emit('closed');
|
|
||||||
},
|
|
||||||
onClickDay: function (event) {
|
|
||||||
if (this.data.readonly) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var date = event.detail.date;
|
|
||||||
var _a = this.data, type = _a.type, currentDate = _a.currentDate, allowSameDay = _a.allowSameDay;
|
|
||||||
if (type === 'range') {
|
|
||||||
// @ts-ignore
|
|
||||||
var startDay = currentDate[0], endDay = currentDate[1];
|
|
||||||
if (startDay && !endDay) {
|
|
||||||
var compareToStart = (0, utils_1.compareDay)(date, startDay);
|
|
||||||
if (compareToStart === 1) {
|
|
||||||
this.select([startDay, date], true);
|
|
||||||
}
|
|
||||||
else if (compareToStart === -1) {
|
|
||||||
this.select([date, null]);
|
|
||||||
}
|
|
||||||
else if (allowSameDay) {
|
|
||||||
this.select([date, date]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.select([date, null]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (type === 'multiple') {
|
|
||||||
var selectedIndex_1;
|
|
||||||
// @ts-ignore
|
|
||||||
var selected = currentDate.some(function (dateItem, index) {
|
|
||||||
var equal = (0, utils_1.compareDay)(dateItem, date) === 0;
|
|
||||||
if (equal) {
|
|
||||||
selectedIndex_1 = index;
|
|
||||||
}
|
|
||||||
return equal;
|
|
||||||
});
|
|
||||||
if (selected) {
|
|
||||||
// @ts-ignore
|
|
||||||
var cancelDate = currentDate.splice(selectedIndex_1, 1);
|
|
||||||
this.setData({ currentDate: currentDate });
|
|
||||||
this.unselect(cancelDate);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// @ts-ignore
|
|
||||||
this.select(__spreadArray(__spreadArray([], currentDate, true), [date], false));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.select(date, true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
unselect: function (dateArray) {
|
|
||||||
var date = dateArray[0];
|
|
||||||
if (date) {
|
|
||||||
this.$emit('unselect', (0, utils_1.copyDates)(date));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
select: function (date, complete) {
|
|
||||||
if (complete && this.data.type === 'range') {
|
|
||||||
var valid = this.checkRange(date);
|
|
||||||
if (!valid) {
|
|
||||||
// auto selected to max range if showConfirm
|
|
||||||
if (this.data.showConfirm) {
|
|
||||||
this.emit([
|
|
||||||
date[0],
|
|
||||||
(0, utils_1.getDayByOffset)(date[0], this.data.maxRange - 1),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.emit(date);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.emit(date);
|
|
||||||
if (complete && !this.data.showConfirm) {
|
|
||||||
this.onConfirm();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emit: function (date) {
|
|
||||||
var getTime = function (date) {
|
|
||||||
return date instanceof Date ? date.getTime() : date;
|
|
||||||
};
|
|
||||||
this.setData({
|
|
||||||
currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
|
|
||||||
});
|
|
||||||
this.$emit('select', (0, utils_1.copyDates)(date));
|
|
||||||
},
|
|
||||||
checkRange: function (date) {
|
|
||||||
var _a = this.data, maxRange = _a.maxRange, rangePrompt = _a.rangePrompt, showRangePrompt = _a.showRangePrompt;
|
|
||||||
if (maxRange && (0, utils_1.calcDateNum)(date) > maxRange) {
|
|
||||||
if (showRangePrompt) {
|
|
||||||
(0, toast_1.default)({
|
|
||||||
context: this,
|
|
||||||
message: rangePrompt || "\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 " + maxRange + " \u5929",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.$emit('over-range');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
onConfirm: function () {
|
|
||||||
var _this = this;
|
|
||||||
if (this.data.type === 'range' &&
|
|
||||||
!this.checkRange(this.data.currentDate)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
wx.nextTick(function () {
|
|
||||||
// @ts-ignore
|
|
||||||
_this.$emit('confirm', (0, utils_1.copyDates)(_this.data.currentDate));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onClickSubtitle: function (event) {
|
|
||||||
this.$emit('click-subtitle', event);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"usingComponents": {
|
|
||||||
"header": "./components/header/index",
|
|
||||||
"month": "./components/month/index",
|
|
||||||
"van-button": "../button/index",
|
|
||||||
"van-popup": "../popup/index",
|
|
||||||
"van-toast": "../toast/index"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<wxs src="./index.wxs" module="computed" />
|
|
||||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
||||||
|
|
||||||
<import src="./calendar.wxml" />
|
|
||||||
|
|
||||||
<van-popup
|
|
||||||
wx:if="{{ poppable }}"
|
|
||||||
custom-class="van-calendar__popup--{{ position }}"
|
|
||||||
close-icon-class="van-calendar__close-icon"
|
|
||||||
show="{{ show }}"
|
|
||||||
round="{{ round }}"
|
|
||||||
position="{{ position }}"
|
|
||||||
closeable="{{ showTitle || showSubtitle }}"
|
|
||||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
|
||||||
bind:enter="onOpen"
|
|
||||||
bind:close="onClose"
|
|
||||||
bind:after-enter="onOpened"
|
|
||||||
bind:after-leave="onClosed"
|
|
||||||
>
|
|
||||||
<include src="./calendar.wxml" />
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<include wx:else src="./calendar.wxml" />
|
|
||||||
|
|
||||||
<van-toast id="van-toast" />
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
var utils = require('./utils.wxs');
|
|
||||||
|
|
||||||
function getMonths(minDate, maxDate) {
|
|
||||||
var months = [];
|
|
||||||
var cursor = getDate(minDate);
|
|
||||||
|
|
||||||
cursor.setDate(1);
|
|
||||||
|
|
||||||
do {
|
|
||||||
months.push(cursor.getTime());
|
|
||||||
cursor.setMonth(cursor.getMonth() + 1);
|
|
||||||
} while (utils.compareMonth(cursor, getDate(maxDate)) !== 1);
|
|
||||||
|
|
||||||
return months;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getButtonDisabled(type, currentDate) {
|
|
||||||
if (currentDate == null) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 'range') {
|
|
||||||
return !currentDate[0] || !currentDate[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 'multiple') {
|
|
||||||
return !currentDate.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
return !currentDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getMonths: getMonths,
|
|
||||||
getButtonDisabled: getButtonDisabled
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@import '../common/index.wxss';.van-calendar{background-color:var(--calendar-background-color,#fff);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.van-calendar__close-icon{top:11px}.van-calendar__popup--bottom,.van-calendar__popup--top{height:var(--calendar-popup-height,80%)}.van-calendar__popup--left,.van-calendar__popup--right{height:100%}.van-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.van-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.van-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.van-calendar__footer+.van-calendar__footer,.van-calendar__footer:empty{display:none}.van-calendar__footer:empty+.van-calendar__footer{display:block!important}.van-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
|
||||||
exports.getMonths = exports.getMonthEndDay = exports.copyDates = exports.calcDateNum = exports.getToday = exports.getNextDay = exports.getPrevDay = exports.getDayByOffset = exports.compareDay = exports.compareMonth = exports.formatMonthTitle = exports.ROW_HEIGHT = void 0;
|
|
||||||
exports.ROW_HEIGHT = 64;
|
|
||||||
function formatMonthTitle(date) {
|
|
||||||
if (!(date instanceof Date)) {
|
|
||||||
date = new Date(date);
|
|
||||||
}
|
|
||||||
return date.getFullYear() + "\u5E74" + (date.getMonth() + 1) + "\u6708";
|
|
||||||
}
|
|
||||||
exports.formatMonthTitle = formatMonthTitle;
|
|
||||||
function compareMonth(date1, date2) {
|
|
||||||
if (!(date1 instanceof Date)) {
|
|
||||||
date1 = new Date(date1);
|
|
||||||
}
|
|
||||||
if (!(date2 instanceof Date)) {
|
|
||||||
date2 = new Date(date2);
|
|
||||||
}
|
|
||||||
var year1 = date1.getFullYear();
|
|
||||||
var year2 = date2.getFullYear();
|
|
||||||
var month1 = date1.getMonth();
|
|
||||||
var month2 = date2.getMonth();
|
|
||||||
if (year1 === year2) {
|
|
||||||
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
|
|
||||||
}
|
|
||||||
return year1 > year2 ? 1 : -1;
|
|
||||||
}
|
|
||||||
exports.compareMonth = compareMonth;
|
|
||||||
function compareDay(day1, day2) {
|
|
||||||
if (!(day1 instanceof Date)) {
|
|
||||||
day1 = new Date(day1);
|
|
||||||
}
|
|
||||||
if (!(day2 instanceof Date)) {
|
|
||||||
day2 = new Date(day2);
|
|
||||||
}
|
|
||||||
var compareMonthResult = compareMonth(day1, day2);
|
|
||||||
if (compareMonthResult === 0) {
|
|
||||||
var date1 = day1.getDate();
|
|
||||||
var date2 = day2.getDate();
|
|
||||||
return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
|
|
||||||
}
|
|
||||||
return compareMonthResult;
|
|
||||||
}
|
|
||||||
exports.compareDay = compareDay;
|
|
||||||
function getDayByOffset(date, offset) {
|
|
||||||
date = new Date(date);
|
|
||||||
date.setDate(date.getDate() + offset);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
exports.getDayByOffset = getDayByOffset;
|
|
||||||
function getPrevDay(date) {
|
|
||||||
return getDayByOffset(date, -1);
|
|
||||||
}
|
|
||||||
exports.getPrevDay = getPrevDay;
|
|
||||||
function getNextDay(date) {
|
|
||||||
return getDayByOffset(date, 1);
|
|
||||||
}
|
|
||||||
exports.getNextDay = getNextDay;
|
|
||||||
function getToday() {
|
|
||||||
var today = new Date();
|
|
||||||
today.setHours(0, 0, 0, 0);
|
|
||||||
return today;
|
|
||||||
}
|
|
||||||
exports.getToday = getToday;
|
|
||||||
function calcDateNum(date) {
|
|
||||||
var day1 = new Date(date[0]).getTime();
|
|
||||||
var day2 = new Date(date[1]).getTime();
|
|
||||||
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
|
|
||||||
}
|
|
||||||
exports.calcDateNum = calcDateNum;
|
|
||||||
function copyDates(dates) {
|
|
||||||
if (Array.isArray(dates)) {
|
|
||||||
return dates.map(function (date) {
|
|
||||||
if (date === null) {
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
return new Date(date);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return new Date(dates);
|
|
||||||
}
|
|
||||||
exports.copyDates = copyDates;
|
|
||||||
function getMonthEndDay(year, month) {
|
|
||||||
return 32 - new Date(year, month - 1, 32).getDate();
|
|
||||||
}
|
|
||||||
exports.getMonthEndDay = getMonthEndDay;
|
|
||||||
function getMonths(minDate, maxDate) {
|
|
||||||
var months = [];
|
|
||||||
var cursor = new Date(minDate);
|
|
||||||
cursor.setDate(1);
|
|
||||||
do {
|
|
||||||
months.push(cursor.getTime());
|
|
||||||
cursor.setMonth(cursor.getMonth() + 1);
|
|
||||||
} while (compareMonth(cursor, maxDate) !== 1);
|
|
||||||
return months;
|
|
||||||
}
|
|
||||||
exports.getMonths = getMonths;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
function getMonthEndDay(year, month) {
|
|
||||||
return 32 - getDate(year, month - 1, 32).getDate();
|
|
||||||
}
|
|
||||||
|
|
||||||
function compareMonth(date1, date2) {
|
|
||||||
date1 = getDate(date1);
|
|
||||||
date2 = getDate(date2);
|
|
||||||
|
|
||||||
var year1 = date1.getFullYear();
|
|
||||||
var year2 = date2.getFullYear();
|
|
||||||
var month1 = date1.getMonth();
|
|
||||||
var month2 = date2.getMonth();
|
|
||||||
|
|
||||||
if (year1 === year2) {
|
|
||||||
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return year1 > year2 ? 1 : -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getMonthEndDay: getMonthEndDay,
|
|
||||||
compareMonth: compareMonth
|
|
||||||
};
|
|
||||||
Loading…
Reference in new issue