685 lines
15 KiB
Plaintext
685 lines
15 KiB
Plaintext
<template>
|
|
<label class="input" tabindex="0">
|
|
<slot name="label"></slot>
|
|
<span></span>
|
|
<wc-icon class="icon" is="calendar"></wc-icon>
|
|
</label>
|
|
<div class="calendar">
|
|
<header class="control">
|
|
<wc-icon is="dbl-left"></wc-icon>
|
|
<wc-icon is="left"></wc-icon>
|
|
<span></span>
|
|
<wc-icon is="right"></wc-icon>
|
|
<wc-icon is="dbl-right"></wc-icon>
|
|
</header>
|
|
<section class="week">
|
|
<span>日</span>
|
|
<span>一</span>
|
|
<span>二</span>
|
|
<span>三</span>
|
|
<span>四</span>
|
|
<span>五</span>
|
|
<span>六</span>
|
|
</section>
|
|
<section class="days"></section>
|
|
<div class="tips">日期超出限制</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
:host {
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
min-width: 105px;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
color: var(--color-dark-2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 32px;
|
|
font-size: 13px;
|
|
border: 1px solid var(--color-plain-3);
|
|
border-radius: inherit;
|
|
white-space: nowrap;
|
|
background: #fff;
|
|
color: inherit;
|
|
outline: none;
|
|
cursor: text;
|
|
|
|
slot {
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: auto;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
font-size: 14px;
|
|
border-right: 1px solid var(--color-plain-3);
|
|
border-radius: 2px 0 0 2px;
|
|
background: var(--color-plain-1);
|
|
}
|
|
|
|
span {
|
|
flex: 1;
|
|
padding: 0 5px;
|
|
|
|
&::placeholder {
|
|
color: var(--color-grey-1);
|
|
}
|
|
}
|
|
|
|
/* ----- */
|
|
.icon {
|
|
padding: 0 5px;
|
|
--size: 16px;
|
|
}
|
|
|
|
&[label] slot {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 10480;
|
|
left: 0;
|
|
top: 0;
|
|
width: 216px;
|
|
height: auto;
|
|
padding: 8px 10px;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
background: #fff;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
left: 30px;
|
|
top: -4px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #fff;
|
|
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
|
|
transform: rotate(45deg);
|
|
content: '';
|
|
}
|
|
|
|
.control {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 30px;
|
|
margin: 8px 0;
|
|
font-size: 14px;
|
|
|
|
wc-icon {
|
|
--size: 14px;
|
|
margin: 0 3px;
|
|
color: var(--color-grey-1);
|
|
cursor: pointer;
|
|
}
|
|
span {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.week {
|
|
display: flex;
|
|
height: 29px;
|
|
border-bottom: 1px solid #f2f5fc;
|
|
font-size: 14px;
|
|
span {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.days {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 8px;
|
|
line-height: 26px;
|
|
|
|
span {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 1px solid transparent;
|
|
border-radius: 50%;
|
|
|
|
&:hover {
|
|
border-color: #f2f5fc;
|
|
font-size: 13px;
|
|
}
|
|
|
|
&[weekend] {
|
|
color: var(--color-teal-1);
|
|
}
|
|
&[picked] {
|
|
color: #fff;
|
|
border-color: #f2f5fc;
|
|
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 3px;
|
|
z-index: -1;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--color-teal-1);
|
|
content: '';
|
|
}
|
|
}
|
|
&[disabled] {
|
|
border-color: transparent;
|
|
font-size: 12px;
|
|
color: var(--color-plain-3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 10241;
|
|
left: 25%;
|
|
top: 40%;
|
|
width: 50%;
|
|
height: 30px;
|
|
line-height: 28px;
|
|
background: #fffbed;
|
|
color: var(--color-orange-2);
|
|
border: 1px solid var(--color-orange-1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&.show {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
:host(:focus-within) {
|
|
@include focus1;
|
|
}
|
|
:host(:focus-within[readonly]) {
|
|
@include focus2;
|
|
}
|
|
:host([disabled]) {
|
|
opacity: 0.6;
|
|
.input {
|
|
cursor: not-allowed;
|
|
background: #f3f5fb;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import '../icon/index'
|
|
import $ from '../utils'
|
|
|
|
const today = new Date()
|
|
|
|
/**************** 公共函数 *****************/
|
|
|
|
//计算日历数组
|
|
function getCalendarTable({ year, month, max, min, last }) {
|
|
let nums = getTotalDays(year, month)
|
|
let numsFixed = 1 - getFirstDay(year, month)
|
|
let isLimitYM = isLimited({ max, min }, { year, month })
|
|
let list = []
|
|
|
|
for (let i = numsFixed; i <= nums; i++) {
|
|
let day = {
|
|
weekend: false,
|
|
day: i < 1 ? '' : i,
|
|
picked: false,
|
|
disabled: true
|
|
}
|
|
if (i > 0) {
|
|
let week = getFirstDay(year, month, i)
|
|
day.weekend = week === 0 || week === 6
|
|
day.picked = !!isPicked({ year, month, day: i }, last)
|
|
day.disabled = disabledDay({ max, min }, i, isLimitYM)
|
|
day._ = new Date(year, month, i)
|
|
}
|
|
list.push(day)
|
|
}
|
|
return list
|
|
}
|
|
|
|
//判断当前年/月是否超出限制
|
|
function isLimited({ max, min }, { year, month }) {
|
|
let result = ''
|
|
|
|
if (!max && !min) {
|
|
return false
|
|
}
|
|
|
|
if (max) {
|
|
if (year > max.year) {
|
|
return true
|
|
} else if (year === max.year) {
|
|
if (month > max.month) {
|
|
return true
|
|
} else if (month === max.month) {
|
|
result += '+'
|
|
}
|
|
}
|
|
}
|
|
|
|
if (min) {
|
|
if (year < min.year) {
|
|
return true
|
|
} else if (year === min.year) {
|
|
if (month < min.month) {
|
|
return true
|
|
} else if (month === min.month) {
|
|
result += '-'
|
|
}
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
//判断指定天数是否有效
|
|
function disabledDay({ max, min }, day, limitedYM) {
|
|
if (limitedYM === '-') {
|
|
return day < min.day
|
|
}
|
|
|
|
if (limitedYM === '+') {
|
|
return max.day && day > max.day
|
|
}
|
|
|
|
if (limitedYM === '+-') {
|
|
return day < min.day || (max.day && day > max.day)
|
|
}
|
|
|
|
return limitedYM
|
|
}
|
|
|
|
//判断指定天数是否被选中
|
|
function isPicked({ year, month, day }, last) {
|
|
return last && last.year === year && last.month === month && last.day === day
|
|
}
|
|
|
|
//获取今年的年份/月份，返回的是数组
|
|
function getThisYearMonth() {
|
|
var oDate = new Date()
|
|
return [oDate.getFullYear(), oDate.getMonth() + 1]
|
|
}
|
|
|
|
//根据年份获取指定月份天数
|
|
function getTotalDays(year, month) {
|
|
return new Date(year, month + 1, 0).getDate()
|
|
}
|
|
|
|
//判断指定年月第一天是星期几
|
|
function getFirstDay(year, month, day) {
|
|
return new Date(year, month, day || 1).getDay()
|
|
}
|
|
|
|
export default class DatePicker {
|
|
props = {
|
|
value: '',
|
|
format: 'Y-m-d',
|
|
'max-date': '',
|
|
'min-date': '',
|
|
max: null,
|
|
min: null,
|
|
calendar: {
|
|
year: 0,
|
|
month: 0,
|
|
list: []
|
|
},
|
|
readonly: false,
|
|
disabled: false
|
|
}
|
|
|
|
__init__() {
|
|
/* render */
|
|
|
|
this.__INPUT__ = this.root.children[1]
|
|
this.__CALENDAR__ = this.root.children[2]
|
|
this.__CTRL__ = this.__CALENDAR__.firstElementChild
|
|
this.__DAYS__ = this.__CALENDAR__.children[2]
|
|
this.__TIPS__ = this.__CALENDAR__.lastElementChild
|
|
}
|
|
|
|
get value() {
|
|
return this.props.value
|
|
}
|
|
|
|
set value(val) {
|
|
if (val) {
|
|
if (!Date.isDate(val)) {
|
|
val = new Date(val)
|
|
if (val.toString() === 'Invalid Date') {
|
|
return
|
|
}
|
|
}
|
|
this._updateValue(val)
|
|
} else {
|
|
this.props.last = null
|
|
this.props.value = ''
|
|
this.__INPUT__.children[1].textContent = ''
|
|
}
|
|
let { calendar, last } = this.props
|
|
|
|
if (
|
|
!calendar.year ||
|
|
(last && calendar.year !== last.year && calendar.month !== last.month)
|
|
) {
|
|
this.props.calendar = { ...last, list: [] }
|
|
}
|
|
this._renderCalendar()
|
|
$.nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
|
|
}
|
|
|
|
get readonly() {
|
|
return this.props.readonly
|
|
}
|
|
|
|
set readonly(val) {
|
|
var type = typeof val
|
|
|
|
if (val === this.props.readonly) {
|
|
return
|
|
}
|
|
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
this.props.readonly = true
|
|
this.setAttribute('readonly', '')
|
|
} else {
|
|
this.props.readonly = false
|
|
this.removeAttribute('readonly')
|
|
}
|
|
}
|
|
|
|
get disabled() {
|
|
return this.props.disabled
|
|
}
|
|
|
|
set disabled(val) {
|
|
var type = typeof val
|
|
|
|
if (val === this.props.disabled) {
|
|
return
|
|
}
|
|
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
this.props.disabled = true
|
|
this.setAttribute('disabled', '')
|
|
this.__INPUT__.removeAttribute('tabindex')
|
|
} else {
|
|
this.props.disabled = false
|
|
this.removeAttribute('disabled')
|
|
this.__INPUT__.setAttribute('tabindex', '0')
|
|
}
|
|
}
|
|
|
|
_tips() {
|
|
clearTimeout(this.timer)
|
|
this.__TIPS__.style.display = 'block'
|
|
|
|
this.timer = setTimeout(() => {
|
|
this.__TIPS__.style.display = ''
|
|
}, 1500)
|
|
}
|
|
|
|
// 修正日历日期渲染
|
|
_fixedRenderDate() {
|
|
var { max, min, last } = this.props
|
|
|
|
if (!last) {
|
|
this._updateValue(today)
|
|
last = this.props.last
|
|
}
|
|
if (max) {
|
|
if (last.year > max.year) {
|
|
last.year = max.year
|
|
last.month = max.month
|
|
last.day = max.day
|
|
} else if (max.year === last.year) {
|
|
if (last.month > max.month) {
|
|
last.month = max.month
|
|
last.day = max.day
|
|
} else if (last.month === max.month) {
|
|
if (last.day > max.day) {
|
|
last.day = max.day
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (min) {
|
|
if (last.year < min.year) {
|
|
last.year = min.year
|
|
last.month = min.month
|
|
last.day = min.day
|
|
} else if (last.year === min.year) {
|
|
if (last.month < min.month) {
|
|
last.month = min.month
|
|
last.day = min.day
|
|
} else if (last.month === min.month) {
|
|
if (last.day < min.day) {
|
|
last.day = min.day
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var _date = new Date(last.year, last.month, last.day)
|
|
this.props.calendar = {
|
|
year: _date.getFullYear(),
|
|
month: _date.getMonth(),
|
|
list: []
|
|
}
|
|
|
|
this._updateValue(_date)
|
|
this._renderCalendar()
|
|
|
|
return _date
|
|
}
|
|
|
|
_updateValue(oDate, needUpdateStyle) {
|
|
this.props.last = {
|
|
year: oDate.getFullYear(),
|
|
month: oDate.getMonth(),
|
|
day: oDate.getDate()
|
|
}
|
|
this.props.value = oDate.format(this.props.format)
|
|
this.__INPUT__.children[1].textContent = this.props.value
|
|
|
|
if (needUpdateStyle) {
|
|
var list = this.props.calendar.list
|
|
$.each(this.__DAYS__.children, (el, i) => {
|
|
if (this.props.last.day === list[i].day) {
|
|
list[i].picked = true
|
|
el.setAttribute('picked', '')
|
|
} else {
|
|
list[i].picked = false
|
|
el.removeAttribute('picked')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
_renderCalendar() {
|
|
var { calendar, max, min, last } = this.props
|
|
|
|
calendar.list = getCalendarTable({ ...calendar, max, min, last })
|
|
|
|
this.__CTRL__.children[2].textContent = `${
|
|
calendar.year
|
|
}年${calendar.month + 1}月`
|
|
|
|
this.__DAYS__.innerHTML = calendar.list
|
|
.map(
|
|
(it, i) =>
|
|
`<span data-idx="${i}" ${it.picked ? 'picked' : ''} ${
|
|
it.weekend ? 'weekend' : ''
|
|
} ${it.disabled ? 'disabled' : ''}>${it.day}</span>`
|
|
)
|
|
.join('')
|
|
}
|
|
|
|
mounted() {
|
|
var label = this.__INPUT__.firstElementChild.assignedNodes()
|
|
while (label.length > 1) {
|
|
this.removeChild(label.pop())
|
|
}
|
|
if (label.length) {
|
|
this.__INPUT__.setAttribute('label', '')
|
|
}
|
|
|
|
this._fixedRenderDate()
|
|
|
|
this._activeFn = $.bind(this.__INPUT__, 'click', ev => {
|
|
if (this.props.disabled || this.props.readonly) {
|
|
return
|
|
}
|
|
this.props.active = !this.props.active
|
|
|
|
let { x, y } = this.getBoundingClientRect()
|
|
|
|
this.__CALENDAR__.style.cssText = `left:${x}px;top:${y + 50}px`
|
|
this.__CALENDAR__.classList.toggle('show')
|
|
})
|
|
|
|
this._inactiveFn = $.outside(this, ev => {
|
|
this.__CALENDAR__.classList.toggle('show', false)
|
|
this.props.active = false
|
|
})
|
|
|
|
this._ctrlFn = $.bind(this.__CTRL__, 'click', ev => {
|
|
let {
|
|
calendar: { year, month },
|
|
max,
|
|
min
|
|
} = this.props
|
|
if (ev.target.tagName === 'WC-ICON') {
|
|
let act = ev.target.is
|
|
// log(ev.target, act)
|
|
switch (act) {
|
|
case 'left':
|
|
month--
|
|
if (month < 0) {
|
|
month = 11
|
|
year--
|
|
}
|
|
break
|
|
case 'right':
|
|
month++
|
|
if (month > 11) {
|
|
month = 0
|
|
year++
|
|
}
|
|
break
|
|
case 'dbl-left':
|
|
year--
|
|
break
|
|
case 'dbl-right':
|
|
year++
|
|
break
|
|
}
|
|
if (isLimited({ max, min }, { year, month }) === true) {
|
|
return this._tips()
|
|
}
|
|
this.props.calendar.month = month
|
|
this.props.calendar.year = year
|
|
this._renderCalendar()
|
|
}
|
|
})
|
|
|
|
this._pickFn = $.bind(this.__DAYS__, 'click', ev => {
|
|
if (ev.target.tagName === 'SPAN') {
|
|
let { calendar, last } = this.props
|
|
let item = calendar.list[ev.target.dataset.idx]
|
|
if (item.disabled) {
|
|
return
|
|
}
|
|
|
|
// 日期未变化时, 直接隐藏, 不作处理
|
|
if (
|
|
last &&
|
|
calendar.year === last.year &&
|
|
calendar.month === last.month &&
|
|
item.day === last.day
|
|
) {
|
|
return this._inactiveFn()
|
|
}
|
|
|
|
this._updateValue(item._, true)
|
|
$.nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
|
|
this.dispatchEvent(
|
|
new CustomEvent('pick', {
|
|
detail: { value: this.value, _: item._ }
|
|
})
|
|
)
|
|
this._inactiveFn()
|
|
}
|
|
})
|
|
}
|
|
|
|
unmount() {
|
|
$.unbind(this.__INPUT__, 'click', this._activeFn)
|
|
$.unbind(this.__DAYS__, 'click', this._pickFn)
|
|
$.unbind(this.__CTRL__, 'click', this._ctrlFn)
|
|
$.clearOutside(this._inactiveFn)
|
|
}
|
|
|
|
watch() {
|
|
switch (name) {
|
|
// label和placeholder 功能相同
|
|
case 'label':
|
|
case 'placeholder':
|
|
this.__INPUT__.setAttribute('placeholder', val)
|
|
break
|
|
|
|
case 'format':
|
|
if (val) {
|
|
this.props.format = val
|
|
}
|
|
break
|
|
|
|
case 'max-date':
|
|
case 'min-date':
|
|
if (val) {
|
|
let v = +val
|
|
if (v === v) {
|
|
val = v
|
|
}
|
|
let tmp = new Date(val)
|
|
if (tmp.getFullYear()) {
|
|
this.props[name.slice(0, 3)] = {
|
|
year: tmp.getFullYear(),
|
|
month: tmp.getMonth(),
|
|
day: tmp.getDate()
|
|
}
|
|
this._fixedRenderDate()
|
|
}
|
|
}
|
|
|
|
this.removeAttribute(name)
|
|
break
|
|
|
|
case 'value':
|
|
this.value = val
|
|
break
|
|
|
|
case 'readonly':
|
|
case 'disabled':
|
|
this[name] = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
</script>
|
JavaScript
95.2%
CSS
4.8%