first
This commit is contained in:
55
node_modules/vant/es/calendar/components/Header.js
generated
vendored
Normal file
55
node_modules/vant/es/calendar/components/Header.js
generated
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
import { createNamespace } from '../../utils';
|
||||
import { t, bem } from '../utils';
|
||||
|
||||
var _createNamespace = createNamespace('calendar-header'),
|
||||
createComponent = _createNamespace[0];
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
title: String,
|
||||
subtitle: String,
|
||||
showTitle: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
firstDayOfWeek: Number
|
||||
},
|
||||
methods: {
|
||||
genTitle: function genTitle() {
|
||||
var h = this.$createElement;
|
||||
|
||||
if (this.showTitle) {
|
||||
var title = this.slots('title') || this.title || t('title');
|
||||
return h("div", {
|
||||
"class": bem('header-title')
|
||||
}, [title]);
|
||||
}
|
||||
},
|
||||
genSubtitle: function genSubtitle() {
|
||||
var h = this.$createElement;
|
||||
|
||||
if (this.showSubtitle) {
|
||||
return h("div", {
|
||||
"class": bem('header-subtitle')
|
||||
}, [this.subtitle]);
|
||||
}
|
||||
},
|
||||
genWeekDays: function genWeekDays() {
|
||||
var h = this.$createElement;
|
||||
var weekdays = t('weekdays');
|
||||
var firstDayOfWeek = this.firstDayOfWeek;
|
||||
var renderWeekDays = [].concat(weekdays.slice(firstDayOfWeek, 7), weekdays.slice(0, firstDayOfWeek));
|
||||
return h("div", {
|
||||
"class": bem('weekdays')
|
||||
}, [renderWeekDays.map(function (item) {
|
||||
return h("span", {
|
||||
"class": bem('weekday')
|
||||
}, [item]);
|
||||
})]);
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
var h = arguments[0];
|
||||
return h("div", {
|
||||
"class": bem('header')
|
||||
}, [this.genTitle(), this.genSubtitle(), this.genWeekDays()]);
|
||||
}
|
||||
});
|
333
node_modules/vant/es/calendar/components/Month.js
generated
vendored
Normal file
333
node_modules/vant/es/calendar/components/Month.js
generated
vendored
Normal file
@ -0,0 +1,333 @@
|
||||
import { createNamespace, addUnit } from '../../utils';
|
||||
import { setScrollTop } from '../../utils/dom/scroll';
|
||||
import { t, bem, compareDay, getPrevDay, getNextDay, formatMonthTitle } from '../utils';
|
||||
import { getMonthEndDay } from '../../datetime-picker/utils';
|
||||
|
||||
var _createNamespace = createNamespace('calendar-month'),
|
||||
createComponent = _createNamespace[0];
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
date: Date,
|
||||
type: String,
|
||||
color: String,
|
||||
minDate: Date,
|
||||
maxDate: Date,
|
||||
showMark: Boolean,
|
||||
rowHeight: [Number, String],
|
||||
formatter: Function,
|
||||
lazyRender: Boolean,
|
||||
currentDate: [Date, Array],
|
||||
allowSameDay: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
showMonthTitle: Boolean,
|
||||
firstDayOfWeek: Number
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title: function title() {
|
||||
return formatMonthTitle(this.date);
|
||||
},
|
||||
rowHeightWithUnit: function rowHeightWithUnit() {
|
||||
return addUnit(this.rowHeight);
|
||||
},
|
||||
offset: function offset() {
|
||||
var firstDayOfWeek = this.firstDayOfWeek;
|
||||
var realDay = this.date.getDay();
|
||||
|
||||
if (!firstDayOfWeek) {
|
||||
return realDay;
|
||||
}
|
||||
|
||||
return (realDay + 7 - this.firstDayOfWeek) % 7;
|
||||
},
|
||||
totalDay: function totalDay() {
|
||||
return getMonthEndDay(this.date.getFullYear(), this.date.getMonth() + 1);
|
||||
},
|
||||
shouldRender: function shouldRender() {
|
||||
return this.visible || !this.lazyRender;
|
||||
},
|
||||
placeholders: function placeholders() {
|
||||
var rows = [];
|
||||
var count = Math.ceil((this.totalDay + this.offset) / 7);
|
||||
|
||||
for (var day = 1; day <= count; day++) {
|
||||
rows.push({
|
||||
type: 'placeholder'
|
||||
});
|
||||
}
|
||||
|
||||
return rows;
|
||||
},
|
||||
days: function days() {
|
||||
var days = [];
|
||||
var year = this.date.getFullYear();
|
||||
var month = this.date.getMonth();
|
||||
|
||||
for (var day = 1; day <= this.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.formatter) {
|
||||
config = this.formatter(config);
|
||||
}
|
||||
|
||||
days.push(config);
|
||||
}
|
||||
|
||||
return days;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getHeight: function getHeight() {
|
||||
var _this$$el;
|
||||
|
||||
return ((_this$$el = this.$el) == null ? void 0 : _this$$el.getBoundingClientRect().height) || 0;
|
||||
},
|
||||
scrollIntoView: function scrollIntoView(body) {
|
||||
var _this$$refs = this.$refs,
|
||||
days = _this$$refs.days,
|
||||
month = _this$$refs.month;
|
||||
var el = this.showSubtitle ? days : month;
|
||||
var scrollTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop;
|
||||
setScrollTop(body, scrollTop);
|
||||
},
|
||||
getMultipleDayType: function getMultipleDayType(day) {
|
||||
var _this = this;
|
||||
|
||||
var isSelected = function isSelected(date) {
|
||||
return _this.currentDate.some(function (item) {
|
||||
return compareDay(item, date) === 0;
|
||||
});
|
||||
};
|
||||
|
||||
if (isSelected(day)) {
|
||||
var prevDay = getPrevDay(day);
|
||||
var nextDay = 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 getRangeDayType(day) {
|
||||
var _this$currentDate = this.currentDate,
|
||||
startDay = _this$currentDate[0],
|
||||
endDay = _this$currentDate[1];
|
||||
|
||||
if (!startDay) {
|
||||
return '';
|
||||
}
|
||||
|
||||
var compareToStart = compareDay(day, startDay);
|
||||
|
||||
if (!endDay) {
|
||||
return compareToStart === 0 ? 'start' : '';
|
||||
}
|
||||
|
||||
var compareToEnd = compareDay(day, endDay);
|
||||
|
||||
if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
|
||||
return 'start-end';
|
||||
}
|
||||
|
||||
if (compareToStart === 0) {
|
||||
return 'start';
|
||||
}
|
||||
|
||||
if (compareToEnd === 0) {
|
||||
return 'end';
|
||||
}
|
||||
|
||||
if (compareToStart > 0 && compareToEnd < 0) {
|
||||
return 'middle';
|
||||
}
|
||||
},
|
||||
getDayType: function getDayType(day) {
|
||||
var type = this.type,
|
||||
minDate = this.minDate,
|
||||
maxDate = this.maxDate,
|
||||
currentDate = this.currentDate;
|
||||
|
||||
if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
|
||||
return 'disabled';
|
||||
}
|
||||
|
||||
if (currentDate === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (type === 'single') {
|
||||
return compareDay(day, currentDate) === 0 ? 'selected' : '';
|
||||
}
|
||||
|
||||
if (type === 'multiple') {
|
||||
return this.getMultipleDayType(day);
|
||||
}
|
||||
/* istanbul ignore else */
|
||||
|
||||
|
||||
if (type === 'range') {
|
||||
return this.getRangeDayType(day);
|
||||
}
|
||||
},
|
||||
getBottomInfo: function getBottomInfo(type) {
|
||||
if (this.type === 'range') {
|
||||
if (type === 'start' || type === 'end') {
|
||||
return t(type);
|
||||
}
|
||||
|
||||
if (type === 'start-end') {
|
||||
return t('startEnd');
|
||||
}
|
||||
}
|
||||
},
|
||||
getDayStyle: function getDayStyle(type, index) {
|
||||
var style = {
|
||||
height: this.rowHeightWithUnit
|
||||
};
|
||||
|
||||
if (type === 'placeholder') {
|
||||
style.width = '100%';
|
||||
return style;
|
||||
}
|
||||
|
||||
if (index === 0) {
|
||||
style.marginLeft = 100 * this.offset / 7 + "%";
|
||||
}
|
||||
|
||||
if (this.color) {
|
||||
if (type === 'start' || type === 'end' || type === 'start-end' || type === 'multiple-selected' || type === 'multiple-middle') {
|
||||
style.background = this.color;
|
||||
} else if (type === 'middle') {
|
||||
style.color = this.color;
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
genTitle: function genTitle() {
|
||||
var h = this.$createElement;
|
||||
|
||||
if (this.showMonthTitle) {
|
||||
return h("div", {
|
||||
"class": bem('month-title')
|
||||
}, [this.title]);
|
||||
}
|
||||
},
|
||||
genMark: function genMark() {
|
||||
var h = this.$createElement;
|
||||
|
||||
if (this.showMark && this.shouldRender) {
|
||||
return h("div", {
|
||||
"class": bem('month-mark')
|
||||
}, [this.date.getMonth() + 1]);
|
||||
}
|
||||
},
|
||||
genDays: function genDays() {
|
||||
var h = this.$createElement;
|
||||
var days = this.shouldRender ? this.days : this.placeholders;
|
||||
return h("div", {
|
||||
"ref": "days",
|
||||
"attrs": {
|
||||
"role": "grid"
|
||||
},
|
||||
"class": bem('days')
|
||||
}, [this.genMark(), days.map(this.genDay)]);
|
||||
},
|
||||
genTopInfo: function genTopInfo(item) {
|
||||
var h = this.$createElement;
|
||||
var slot = this.$scopedSlots['top-info'];
|
||||
|
||||
if (item.topInfo || slot) {
|
||||
return h("div", {
|
||||
"class": bem('top-info')
|
||||
}, [slot ? slot(item) : item.topInfo]);
|
||||
}
|
||||
},
|
||||
genBottomInfo: function genBottomInfo(item) {
|
||||
var h = this.$createElement;
|
||||
var slot = this.$scopedSlots['bottom-info'];
|
||||
|
||||
if (item.bottomInfo || slot) {
|
||||
return h("div", {
|
||||
"class": bem('bottom-info')
|
||||
}, [slot ? slot(item) : item.bottomInfo]);
|
||||
}
|
||||
},
|
||||
genDay: function genDay(item, index) {
|
||||
var _this2 = this;
|
||||
|
||||
var h = this.$createElement;
|
||||
var type = item.type;
|
||||
var style = this.getDayStyle(type, index);
|
||||
var disabled = type === 'disabled';
|
||||
|
||||
var onClick = function onClick() {
|
||||
if (!disabled) {
|
||||
_this2.$emit('click', item);
|
||||
}
|
||||
};
|
||||
|
||||
if (type === 'selected') {
|
||||
return h("div", {
|
||||
"attrs": {
|
||||
"role": "gridcell",
|
||||
"tabindex": -1
|
||||
},
|
||||
"style": style,
|
||||
"class": [bem('day'), item.className],
|
||||
"on": {
|
||||
"click": onClick
|
||||
}
|
||||
}, [h("div", {
|
||||
"class": bem('selected-day'),
|
||||
"style": {
|
||||
width: this.rowHeightWithUnit,
|
||||
height: this.rowHeightWithUnit,
|
||||
background: this.color
|
||||
}
|
||||
}, [this.genTopInfo(item), item.text, this.genBottomInfo(item)])]);
|
||||
}
|
||||
|
||||
return h("div", {
|
||||
"attrs": {
|
||||
"role": "gridcell",
|
||||
"tabindex": disabled ? null : -1
|
||||
},
|
||||
"style": style,
|
||||
"class": [bem('day', type), item.className],
|
||||
"on": {
|
||||
"click": onClick
|
||||
}
|
||||
}, [this.genTopInfo(item), item.text, this.genBottomInfo(item)]);
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
var h = arguments[0];
|
||||
return h("div", {
|
||||
"class": bem('month'),
|
||||
"ref": "month"
|
||||
}, [this.genTitle(), this.genDays()]);
|
||||
}
|
||||
});
|
1
node_modules/vant/es/calendar/index.css
generated
vendored
Normal file
1
node_modules/vant/es/calendar/index.css
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
.van-calendar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;height:100%;background-color:#fff}.van-calendar__popup.van-popup--bottom,.van-calendar__popup.van-popup--top{height:80%}.van-calendar__popup.van-popup--left,.van-calendar__popup.van-popup--right{height:100%}.van-calendar__popup .van-popup__close-icon{top:11px}.van-calendar__header{-webkit-flex-shrink:0;flex-shrink:0;box-shadow:0 2px 10px rgba(125,126,128,.16)}.van-calendar__header-subtitle,.van-calendar__header-title,.van-calendar__month-title{height:44px;font-weight:500;line-height:44px;text-align:center}.van-calendar__header-title{font-size:16px}.van-calendar__header-subtitle{font-size:14px}.van-calendar__month-title{font-size:14px}.van-calendar__weekdays{display:-webkit-box;display:-webkit-flex;display:flex}.van-calendar__weekday{-webkit-box-flex:1;-webkit-flex:1;flex:1;font-size:12px;line-height:30px;text-align:center}.van-calendar__body{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__days{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;color:rgba(242,243,245,.8);font-size:160px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none}.van-calendar__day,.van-calendar__selected-day{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:64px;font-size:16px;cursor:pointer}.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected,.van-calendar__day--start,.van-calendar__day--start-end{color:#fff;background-color:#ee0a24}.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:#ee0a24}.van-calendar__day--middle::after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:.1;content:''}.van-calendar__day--disabled{color:#c8c9cc;cursor:default}.van-calendar__bottom-info,.van-calendar__top-info{position:absolute;right:0;left:0;font-size:10px;line-height:14px}@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{width:54px;height:54px;color:#fff;background-color:#ee0a24;border-radius:4px}.van-calendar__footer{-webkit-flex-shrink:0;flex-shrink:0;padding:0 16px;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.van-calendar__footer--unfit{padding-bottom:0}.van-calendar__confirm{height:36px;margin:7px 0}
|
553
node_modules/vant/es/calendar/index.js
generated
vendored
Normal file
553
node_modules/vant/es/calendar/index.js
generated
vendored
Normal file
@ -0,0 +1,553 @@
|
||||
// Utils
|
||||
import { raf } from '../utils/dom/raf';
|
||||
import { isDate } from '../utils/validate/date';
|
||||
import { getScrollTop } from '../utils/dom/scroll';
|
||||
import { t, bem, copyDate, copyDates, getNextDay, compareDay, calcDateNum, compareMonth, createComponent, getDayByOffset } from './utils'; // Components
|
||||
|
||||
import Popup from '../popup';
|
||||
import Button from '../button';
|
||||
import Toast from '../toast';
|
||||
import Month from './components/Month';
|
||||
import Header from './components/Header';
|
||||
export default createComponent({
|
||||
props: {
|
||||
title: String,
|
||||
color: String,
|
||||
value: Boolean,
|
||||
readonly: Boolean,
|
||||
formatter: Function,
|
||||
rowHeight: [Number, String],
|
||||
confirmText: String,
|
||||
rangePrompt: String,
|
||||
defaultDate: [Date, Array],
|
||||
getContainer: [String, Function],
|
||||
allowSameDay: Boolean,
|
||||
confirmDisabledText: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
poppable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnPopstate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
validator: isDate,
|
||||
default: function _default() {
|
||||
return new Date();
|
||||
}
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
validator: isDate,
|
||||
default: function _default() {
|
||||
var now = new Date();
|
||||
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
|
||||
}
|
||||
},
|
||||
firstDayOfWeek: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
validator: function validator(val) {
|
||||
return val >= 0 && val <= 6;
|
||||
}
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
vanPopup: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
subtitle: '',
|
||||
currentDate: this.getInitialDate()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
months: function months() {
|
||||
var months = [];
|
||||
var cursor = new Date(this.minDate);
|
||||
cursor.setDate(1);
|
||||
|
||||
do {
|
||||
months.push(new Date(cursor));
|
||||
cursor.setMonth(cursor.getMonth() + 1);
|
||||
} while (compareMonth(cursor, this.maxDate) !== 1);
|
||||
|
||||
return months;
|
||||
},
|
||||
buttonDisabled: function buttonDisabled() {
|
||||
var type = this.type,
|
||||
currentDate = this.currentDate;
|
||||
|
||||
if (currentDate) {
|
||||
if (type === 'range') {
|
||||
return !currentDate[0] || !currentDate[1];
|
||||
}
|
||||
|
||||
if (type === 'multiple') {
|
||||
return !currentDate.length;
|
||||
}
|
||||
}
|
||||
|
||||
return !currentDate;
|
||||
},
|
||||
dayOffset: function dayOffset() {
|
||||
return this.firstDayOfWeek ? this.firstDayOfWeek % 7 : 0;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: 'init',
|
||||
type: function type() {
|
||||
this.reset();
|
||||
},
|
||||
defaultDate: function defaultDate(val) {
|
||||
this.currentDate = val;
|
||||
this.scrollIntoView();
|
||||
}
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.init(); // https://github.com/vant-ui/vant/issues/9845
|
||||
|
||||
if (!this.poppable) {
|
||||
var _this$vanPopup;
|
||||
|
||||
(_this$vanPopup = this.vanPopup) == null ? void 0 : _this$vanPopup.$on('opened', this.onScroll);
|
||||
}
|
||||
},
|
||||
|
||||
/* istanbul ignore next */
|
||||
activated: function activated() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// @exposed-api
|
||||
reset: function reset(date) {
|
||||
if (date === void 0) {
|
||||
date = this.getInitialDate();
|
||||
}
|
||||
|
||||
this.currentDate = date;
|
||||
this.scrollIntoView();
|
||||
},
|
||||
init: function init() {
|
||||
var _this = this;
|
||||
|
||||
if (this.poppable && !this.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$nextTick(function () {
|
||||
// add Math.floor to avoid decimal height issues
|
||||
// https://github.com/vant-ui/vant/issues/5640
|
||||
_this.bodyHeight = Math.floor(_this.$refs.body.getBoundingClientRect().height);
|
||||
|
||||
_this.onScroll();
|
||||
|
||||
_this.scrollIntoView();
|
||||
});
|
||||
},
|
||||
// @exposed-api
|
||||
scrollToDate: function scrollToDate(targetDate) {
|
||||
var _this2 = this;
|
||||
|
||||
raf(function () {
|
||||
var displayed = _this2.value || !_this2.poppable;
|
||||
/* istanbul ignore if */
|
||||
|
||||
if (!targetDate || !displayed) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.months.some(function (month, index) {
|
||||
if (compareMonth(month, targetDate) === 0) {
|
||||
var _this2$$refs = _this2.$refs,
|
||||
body = _this2$$refs.body,
|
||||
months = _this2$$refs.months;
|
||||
months[index].scrollIntoView(body);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
_this2.onScroll();
|
||||
});
|
||||
},
|
||||
// scroll to current month
|
||||
scrollIntoView: function scrollIntoView() {
|
||||
var currentDate = this.currentDate;
|
||||
|
||||
if (currentDate) {
|
||||
var targetDate = this.type === 'single' ? currentDate : currentDate[0];
|
||||
this.scrollToDate(targetDate);
|
||||
}
|
||||
},
|
||||
getInitialDate: function getInitialDate() {
|
||||
var type = this.type,
|
||||
minDate = this.minDate,
|
||||
maxDate = this.maxDate,
|
||||
defaultDate = this.defaultDate;
|
||||
|
||||
if (defaultDate === null) {
|
||||
return defaultDate;
|
||||
}
|
||||
|
||||
var defaultVal = new Date();
|
||||
|
||||
if (compareDay(defaultVal, minDate) === -1) {
|
||||
defaultVal = minDate;
|
||||
} else if (compareDay(defaultVal, maxDate) === 1) {
|
||||
defaultVal = maxDate;
|
||||
}
|
||||
|
||||
if (type === 'range') {
|
||||
var _ref = defaultDate || [],
|
||||
startDay = _ref[0],
|
||||
endDay = _ref[1];
|
||||
|
||||
return [startDay || defaultVal, endDay || getNextDay(defaultVal)];
|
||||
}
|
||||
|
||||
if (type === 'multiple') {
|
||||
return defaultDate || [defaultVal];
|
||||
}
|
||||
|
||||
return defaultDate || defaultVal;
|
||||
},
|
||||
// calculate the position of the elements
|
||||
// and find the elements that needs to be rendered
|
||||
onScroll: function onScroll() {
|
||||
var _this$$refs = this.$refs,
|
||||
body = _this$$refs.body,
|
||||
months = _this$$refs.months;
|
||||
var top = getScrollTop(body);
|
||||
var bottom = top + this.bodyHeight;
|
||||
var heights = months.map(function (item) {
|
||||
return item.getHeight();
|
||||
});
|
||||
var heightSum = heights.reduce(function (a, b) {
|
||||
return a + b;
|
||||
}, 0); // iOS scroll bounce may exceed the range
|
||||
|
||||
if (bottom > heightSum && top > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var height = 0;
|
||||
var currentMonth;
|
||||
var visibleRange = [-1, -1];
|
||||
|
||||
for (var i = 0; i < months.length; i++) {
|
||||
var visible = height <= bottom && height + heights[i] >= top;
|
||||
|
||||
if (visible) {
|
||||
visibleRange[1] = i;
|
||||
|
||||
if (!currentMonth) {
|
||||
currentMonth = months[i];
|
||||
visibleRange[0] = i;
|
||||
}
|
||||
|
||||
if (!months[i].showed) {
|
||||
months[i].showed = true;
|
||||
this.$emit('month-show', {
|
||||
date: months[i].date,
|
||||
title: months[i].title
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
height += heights[i];
|
||||
}
|
||||
|
||||
months.forEach(function (month, index) {
|
||||
month.visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
|
||||
});
|
||||
/* istanbul ignore else */
|
||||
|
||||
if (currentMonth) {
|
||||
this.subtitle = currentMonth.title;
|
||||
}
|
||||
},
|
||||
onClickDay: function onClickDay(item) {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
var date = item.date;
|
||||
var type = this.type,
|
||||
currentDate = this.currentDate;
|
||||
|
||||
if (type === 'range') {
|
||||
if (!currentDate) {
|
||||
this.select([date, null]);
|
||||
return;
|
||||
}
|
||||
|
||||
var startDay = currentDate[0],
|
||||
endDay = currentDate[1];
|
||||
|
||||
if (startDay && !endDay) {
|
||||
var compareToStart = compareDay(date, startDay);
|
||||
|
||||
if (compareToStart === 1) {
|
||||
this.select([startDay, date], true);
|
||||
} else if (compareToStart === -1) {
|
||||
this.select([date, null]);
|
||||
} else if (this.allowSameDay) {
|
||||
this.select([date, date], true);
|
||||
}
|
||||
} else {
|
||||
this.select([date, null]);
|
||||
}
|
||||
} else if (type === 'multiple') {
|
||||
if (!currentDate) {
|
||||
this.select([date]);
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedIndex;
|
||||
var selected = this.currentDate.some(function (dateItem, index) {
|
||||
var equal = compareDay(dateItem, date) === 0;
|
||||
|
||||
if (equal) {
|
||||
selectedIndex = index;
|
||||
}
|
||||
|
||||
return equal;
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
var _currentDate$splice = currentDate.splice(selectedIndex, 1),
|
||||
unselectedDate = _currentDate$splice[0];
|
||||
|
||||
this.$emit('unselect', copyDate(unselectedDate));
|
||||
} else if (this.maxRange && currentDate.length >= this.maxRange) {
|
||||
Toast(this.rangePrompt || t('rangePrompt', this.maxRange));
|
||||
} else {
|
||||
this.select([].concat(currentDate, [date]));
|
||||
}
|
||||
} else {
|
||||
this.select(date, true);
|
||||
}
|
||||
},
|
||||
togglePopup: function togglePopup(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
select: function select(date, complete) {
|
||||
var _this3 = this;
|
||||
|
||||
var emit = function emit(date) {
|
||||
_this3.currentDate = date;
|
||||
|
||||
_this3.$emit('select', copyDates(_this3.currentDate));
|
||||
};
|
||||
|
||||
if (complete && this.type === 'range') {
|
||||
var valid = this.checkRange(date);
|
||||
|
||||
if (!valid) {
|
||||
// auto selected to max range if showConfirm
|
||||
if (this.showConfirm) {
|
||||
emit([date[0], getDayByOffset(date[0], this.maxRange - 1)]);
|
||||
} else {
|
||||
emit(date);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
emit(date);
|
||||
|
||||
if (complete && !this.showConfirm) {
|
||||
this.onConfirm();
|
||||
}
|
||||
},
|
||||
checkRange: function checkRange(date) {
|
||||
var maxRange = this.maxRange,
|
||||
rangePrompt = this.rangePrompt;
|
||||
|
||||
if (maxRange && calcDateNum(date) > maxRange) {
|
||||
Toast(rangePrompt || t('rangePrompt', maxRange));
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
onConfirm: function onConfirm() {
|
||||
this.$emit('confirm', copyDates(this.currentDate));
|
||||
},
|
||||
genMonth: function genMonth(date, index) {
|
||||
var h = this.$createElement;
|
||||
var showMonthTitle = index !== 0 || !this.showSubtitle;
|
||||
return h(Month, {
|
||||
"ref": "months",
|
||||
"refInFor": true,
|
||||
"attrs": {
|
||||
"date": date,
|
||||
"type": this.type,
|
||||
"color": this.color,
|
||||
"minDate": this.minDate,
|
||||
"maxDate": this.maxDate,
|
||||
"showMark": this.showMark,
|
||||
"formatter": this.formatter,
|
||||
"rowHeight": this.rowHeight,
|
||||
"lazyRender": this.lazyRender,
|
||||
"currentDate": this.currentDate,
|
||||
"showSubtitle": this.showSubtitle,
|
||||
"allowSameDay": this.allowSameDay,
|
||||
"showMonthTitle": showMonthTitle,
|
||||
"firstDayOfWeek": this.dayOffset
|
||||
},
|
||||
"scopedSlots": {
|
||||
'top-info': this.$scopedSlots['top-info'],
|
||||
'bottom-info': this.$scopedSlots['bottom-info']
|
||||
},
|
||||
"on": {
|
||||
"click": this.onClickDay
|
||||
}
|
||||
});
|
||||
},
|
||||
genFooterContent: function genFooterContent() {
|
||||
var h = this.$createElement;
|
||||
var slot = this.slots('footer');
|
||||
|
||||
if (slot) {
|
||||
return slot;
|
||||
}
|
||||
|
||||
if (this.showConfirm) {
|
||||
var text = this.buttonDisabled ? this.confirmDisabledText : this.confirmText;
|
||||
return h(Button, {
|
||||
"attrs": {
|
||||
"round": true,
|
||||
"block": true,
|
||||
"type": "danger",
|
||||
"color": this.color,
|
||||
"disabled": this.buttonDisabled,
|
||||
"nativeType": "button"
|
||||
},
|
||||
"class": bem('confirm'),
|
||||
"on": {
|
||||
"click": this.onConfirm
|
||||
}
|
||||
}, [text || t('confirm')]);
|
||||
}
|
||||
},
|
||||
genFooter: function genFooter() {
|
||||
var h = this.$createElement;
|
||||
return h("div", {
|
||||
"class": bem('footer', {
|
||||
unfit: !this.safeAreaInsetBottom
|
||||
})
|
||||
}, [this.genFooterContent()]);
|
||||
},
|
||||
genCalendar: function genCalendar() {
|
||||
var _this4 = this;
|
||||
|
||||
var h = this.$createElement;
|
||||
return h("div", {
|
||||
"class": bem()
|
||||
}, [h(Header, {
|
||||
"attrs": {
|
||||
"title": this.title,
|
||||
"showTitle": this.showTitle,
|
||||
"subtitle": this.subtitle,
|
||||
"showSubtitle": this.showSubtitle,
|
||||
"firstDayOfWeek": this.dayOffset
|
||||
},
|
||||
"scopedSlots": {
|
||||
title: function title() {
|
||||
return _this4.slots('title');
|
||||
}
|
||||
}
|
||||
}), h("div", {
|
||||
"ref": "body",
|
||||
"class": bem('body'),
|
||||
"on": {
|
||||
"scroll": this.onScroll
|
||||
}
|
||||
}, [this.months.map(this.genMonth)]), this.genFooter()]);
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
var _this5 = this;
|
||||
|
||||
var h = arguments[0];
|
||||
|
||||
if (this.poppable) {
|
||||
var _attrs;
|
||||
|
||||
var createListener = function createListener(name) {
|
||||
return function () {
|
||||
return _this5.$emit(name);
|
||||
};
|
||||
};
|
||||
|
||||
return h(Popup, {
|
||||
"attrs": (_attrs = {
|
||||
"round": true,
|
||||
"value": this.value
|
||||
}, _attrs["round"] = this.round, _attrs["position"] = this.position, _attrs["closeable"] = this.showTitle || this.showSubtitle, _attrs["getContainer"] = this.getContainer, _attrs["closeOnPopstate"] = this.closeOnPopstate, _attrs["closeOnClickOverlay"] = this.closeOnClickOverlay, _attrs),
|
||||
"class": bem('popup'),
|
||||
"on": {
|
||||
"input": this.togglePopup,
|
||||
"open": createListener('open'),
|
||||
"opened": createListener('opened'),
|
||||
"close": createListener('close'),
|
||||
"closed": createListener('closed')
|
||||
}
|
||||
}, [this.genCalendar()]);
|
||||
}
|
||||
|
||||
return this.genCalendar();
|
||||
}
|
||||
});
|
188
node_modules/vant/es/calendar/index.less
generated
vendored
Normal file
188
node_modules/vant/es/calendar/index.less
generated
vendored
Normal file
@ -0,0 +1,188 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: @calendar-background-color;
|
||||
|
||||
&__popup {
|
||||
&.van-popup--top,
|
||||
&.van-popup--bottom {
|
||||
height: @calendar-popup-height;
|
||||
}
|
||||
|
||||
&.van-popup--left,
|
||||
&.van-popup--right {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.van-popup__close-icon {
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
flex-shrink: 0;
|
||||
box-shadow: @calendar-header-box-shadow;
|
||||
}
|
||||
|
||||
&__month-title,
|
||||
&__header-title,
|
||||
&__header-subtitle {
|
||||
height: @calendar-header-title-height;
|
||||
font-weight: @font-weight-bold;
|
||||
line-height: @calendar-header-title-height;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__header-title {
|
||||
font-size: @calendar-header-title-font-size;
|
||||
}
|
||||
|
||||
&__header-subtitle {
|
||||
font-size: @calendar-header-subtitle-font-size;
|
||||
}
|
||||
|
||||
&__month-title {
|
||||
font-size: @calendar-month-title-font-size;
|
||||
}
|
||||
|
||||
&__weekdays {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__weekday {
|
||||
flex: 1;
|
||||
font-size: @calendar-weekdays-font-size;
|
||||
line-height: @calendar-weekdays-height;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&__days {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__month-mark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 0;
|
||||
color: @calendar-month-mark-color;
|
||||
font-size: @calendar-month-mark-font-size;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__day,
|
||||
&__selected-day {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__day {
|
||||
position: relative;
|
||||
width: 14.285%;
|
||||
height: @calendar-day-height;
|
||||
font-size: @calendar-day-font-size;
|
||||
cursor: pointer;
|
||||
|
||||
&--end,
|
||||
&--start,
|
||||
&--start-end,
|
||||
&--multiple-middle,
|
||||
&--multiple-selected {
|
||||
color: @calendar-range-edge-color;
|
||||
background-color: @calendar-range-edge-background-color;
|
||||
}
|
||||
|
||||
&--start {
|
||||
border-radius: @border-radius-md 0 0 @border-radius-md;
|
||||
}
|
||||
|
||||
&--end {
|
||||
border-radius: 0 @border-radius-md @border-radius-md 0;
|
||||
}
|
||||
|
||||
&--start-end,
|
||||
&--multiple-selected {
|
||||
border-radius: @border-radius-md;
|
||||
}
|
||||
|
||||
&--middle {
|
||||
color: @calendar-range-middle-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: currentColor;
|
||||
opacity: @calendar-range-middle-background-opacity;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: @calendar-day-disabled-color;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&__top-info,
|
||||
&__bottom-info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
font-size: @calendar-info-font-size;
|
||||
line-height: @calendar-info-line-height;
|
||||
|
||||
@media (max-width: 350px) {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
&__top-info {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&__bottom-info {
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
&__selected-day {
|
||||
width: @calendar-selected-day-size;
|
||||
height: @calendar-selected-day-size;
|
||||
color: @calendar-selected-day-color;
|
||||
background-color: @calendar-selected-day-background-color;
|
||||
border-radius: @border-radius-md;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
flex-shrink: 0;
|
||||
padding: 0 @padding-md;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
&--unfit {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__confirm {
|
||||
height: @calendar-confirm-button-height;
|
||||
margin: @calendar-confirm-button-margin;
|
||||
}
|
||||
}
|
9
node_modules/vant/es/calendar/style/index.js
generated
vendored
Normal file
9
node_modules/vant/es/calendar/style/index.js
generated
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
import '../../style/base.css';
|
||||
import '../../overlay/index.css';
|
||||
import '../../info/index.css';
|
||||
import '../../icon/index.css';
|
||||
import '../../popup/index.css';
|
||||
import '../../loading/index.css';
|
||||
import '../../button/index.css';
|
||||
import '../../toast/index.css';
|
||||
import '../index.css';
|
9
node_modules/vant/es/calendar/style/less.js
generated
vendored
Normal file
9
node_modules/vant/es/calendar/style/less.js
generated
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
import '../../style/base.less';
|
||||
import '../../overlay/index.less';
|
||||
import '../../info/index.less';
|
||||
import '../../icon/index.less';
|
||||
import '../../popup/index.less';
|
||||
import '../../loading/index.less';
|
||||
import '../../button/index.less';
|
||||
import '../../toast/index.less';
|
||||
import '../index.less';
|
66
node_modules/vant/es/calendar/utils.js
generated
vendored
Normal file
66
node_modules/vant/es/calendar/utils.js
generated
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
var _createNamespace = createNamespace('calendar'),
|
||||
createComponent = _createNamespace[0],
|
||||
bem = _createNamespace[1],
|
||||
t = _createNamespace[2];
|
||||
|
||||
export { createComponent, bem, t };
|
||||
export function formatMonthTitle(date) {
|
||||
return t('monthTitle', date.getFullYear(), date.getMonth() + 1);
|
||||
}
|
||||
export function compareMonth(date1, 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;
|
||||
}
|
||||
export function compareDay(day1, 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;
|
||||
}
|
||||
export function getDayByOffset(date, offset) {
|
||||
date = new Date(date);
|
||||
date.setDate(date.getDate() + offset);
|
||||
return date;
|
||||
}
|
||||
export function getPrevDay(date) {
|
||||
return getDayByOffset(date, -1);
|
||||
}
|
||||
export function getNextDay(date) {
|
||||
return getDayByOffset(date, 1);
|
||||
}
|
||||
export function calcDateNum(date) {
|
||||
var day1 = date[0].getTime();
|
||||
var day2 = date[1].getTime();
|
||||
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
|
||||
}
|
||||
export function copyDate(dates) {
|
||||
return new Date(dates);
|
||||
}
|
||||
export function copyDates(dates) {
|
||||
if (Array.isArray(dates)) {
|
||||
return dates.map(function (date) {
|
||||
if (date === null) {
|
||||
return date;
|
||||
}
|
||||
|
||||
return copyDate(date);
|
||||
});
|
||||
}
|
||||
|
||||
return copyDate(dates);
|
||||
}
|
Reference in New Issue
Block a user