更新日期组件
宇天
parent
3d38ed6b56
commit
5220b030d5
10
build.dev.js
10
build.dev.js
|
|
@ -4,7 +4,6 @@ require('es.shim')
|
|||
const log = console.log
|
||||
const fs = require('iofs')
|
||||
const path = require('path')
|
||||
const babel = require('babel-core')
|
||||
const scss = require('node-sass')
|
||||
const chokidar = require('chokidar')
|
||||
const chalk = require('chalk')
|
||||
|
|
@ -69,7 +68,12 @@ function mkWCFile({ style, html, js }) {
|
|||
js = js.replace(/props = (\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
|
||||
props = m
|
||||
var attr = new Function(
|
||||
`var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
|
||||
`try {
|
||||
var props = ${m}, attr = []
|
||||
for(var i in props){attr.push(i)}
|
||||
return attr
|
||||
} catch(err) {console.error(err);return []}
|
||||
`
|
||||
)()
|
||||
return `static get observedAttributes() {
|
||||
return ${JSON.stringify(attr)}
|
||||
|
|
@ -161,6 +165,7 @@ chokidar
|
|||
return
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
switch (file.ext) {
|
||||
case '.js':
|
||||
compileJs(entry, output)
|
||||
|
|
@ -172,6 +177,7 @@ chokidar
|
|||
default:
|
||||
fs.cp(entry, output)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
.on('ready', () => {
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@ function getCalendarTable({ year, month, max, min }, last) {
|
|||
|
||||
for (let i = numsFixed; i <= nums; i++) {
|
||||
let day = {
|
||||
weeken: !1,
|
||||
weekend: !1,
|
||||
day: i < 1 ? '' : i,
|
||||
selected: !1,
|
||||
disabled: !0
|
||||
}
|
||||
if (i > 0) {
|
||||
let week = getFirstDay(year, month, i)
|
||||
day.weeken = week === 0 || week === 6
|
||||
day.weekend = week === 0 || week === 6
|
||||
day.selected = isSelected({ year, month, day: i }, last)
|
||||
day.disabled = disabledDay({ max, min }, i, isLimitYM)
|
||||
}
|
||||
|
|
@ -241,7 +241,7 @@ export default Anot.component('datepicker', {
|
|||
</section>
|
||||
<section class="tr do-fn-cl" :click="pick">
|
||||
<span class="td"
|
||||
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
||||
:class="{weekend:el.weekend, disabled: el.disabled, selected: el.selected}"
|
||||
:for="calendar.list"
|
||||
:data-idx="$index"
|
||||
:text="el.day"></span>
|
||||
|
|
|
|||
|
|
@ -121,6 +121,10 @@ export default class Icon {
|
|||
}
|
||||
}
|
||||
|
||||
get is() {
|
||||
return this.props.is
|
||||
}
|
||||
|
||||
set is(val) {
|
||||
this.props.is = val
|
||||
this.drawPath()
|
||||
|
|
|
|||
|
|
@ -1,22 +1,34 @@
|
|||
<template>
|
||||
<label class="input">
|
||||
<input readonly type="text" />
|
||||
<label class="input" tabindex="0">
|
||||
<span>ddd</span>
|
||||
<wc-icon class="icon" is="calendar"></wc-icon>
|
||||
</label>
|
||||
<div class="calendar">
|
||||
<header>
|
||||
<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>
|
||||
<span>2019-07</span>
|
||||
</header>
|
||||
<section class="week">
|
||||
<span>日</span>
|
||||
<span>一</span>
|
||||
<span>二</span>
|
||||
<span>三</span>
|
||||
<span>四</span>
|
||||
<span>五</span>
|
||||
<span>六</span>
|
||||
</section>
|
||||
<section class="days"></section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
color: nth($cd, 2);
|
||||
|
|
@ -34,27 +46,20 @@
|
|||
border-radius: inherit;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
cursor: text;
|
||||
|
||||
input {
|
||||
min-width: 0;
|
||||
span {
|
||||
min-width: 64px;
|
||||
padding: 0 5px;
|
||||
border: 0;
|
||||
border-radius: inherit;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
cursor: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: nth($cgr, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: 0 0 3px nth($co, 1);
|
||||
&:focus {
|
||||
border-color: nth($ct, 1);
|
||||
}
|
||||
/* ----- */
|
||||
.icon {
|
||||
|
|
@ -62,19 +67,440 @@
|
|||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10240;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 202px;
|
||||
height: auto;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&::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;
|
||||
|
||||
wc-icon {
|
||||
--size: 16px;
|
||||
margin: 0 3px;
|
||||
color: nth($cgr, 1);
|
||||
}
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.week {
|
||||
display: flex;
|
||||
height: 27px;
|
||||
border-bottom: 1px solid #f2f5fc;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
&[weekend] {
|
||||
color: nth($ct, 1);
|
||||
}
|
||||
&[picked] {
|
||||
color: #fff;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: nth($ct, 1);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
color: nth($cp, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import '../icon/index'
|
||||
|
||||
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 = []
|
||||
|
||||
log(isLimitYM, year, month)
|
||||
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 += '+'
|
||||
}
|
||||
// todo next
|
||||
// result += '+'
|
||||
} else {
|
||||
// return true
|
||||
}
|
||||
}
|
||||
|
||||
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 += '-'
|
||||
}
|
||||
// todo next
|
||||
} else {
|
||||
// return true
|
||||
}
|
||||
}
|
||||
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 changeStyle(calendar, day) {
|
||||
calendar.list.forEach(function(item) {
|
||||
if (item.day != day) {
|
||||
item.selected = !1
|
||||
} else {
|
||||
item.selected = !0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取今年的年份/月份，返回的是数组
|
||||
function getThisYearMonth() {
|
||||
var oDate = new Date()
|
||||
return [oDate.getFullYear(), oDate.getMonth() + 1]
|
||||
}
|
||||
|
||||
//根据年份获取指定月份天数
|
||||
function getTotalDays(year, month) {
|
||||
return new Date(year, month, 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'
|
||||
format: 'Y-m-d',
|
||||
'max-date': '',
|
||||
'min-date': '',
|
||||
max: null,
|
||||
min: null,
|
||||
calendar: null
|
||||
}
|
||||
|
||||
constructor() {
|
||||
/* render */
|
||||
|
||||
this.calendar = []
|
||||
this.__INPUT__ = this.root.children[1]
|
||||
this.__CALENDAR__ = this.root.children[2]
|
||||
this.__CTRL__ = this.__CALENDAR__.firstElementChild
|
||||
this.__DAYS__ = 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') {
|
||||
val = new Date()
|
||||
}
|
||||
}
|
||||
this._updateValue(val)
|
||||
} else {
|
||||
this.props.last = null
|
||||
this.props.value = ''
|
||||
this.__INPUT__.firstElementChild.textContent = ''
|
||||
}
|
||||
this._renderCalendar()
|
||||
}
|
||||
|
||||
_updateValue(oDate) {
|
||||
this.props.last = {
|
||||
year: oDate.getFullYear(),
|
||||
month: oDate.getMonth(),
|
||||
day: oDate.getDate()
|
||||
}
|
||||
this.props.value = oDate.format(this.props.format)
|
||||
this.__INPUT__.firstElementChild.textContent = this.props.value
|
||||
}
|
||||
|
||||
_renderCalendar() {
|
||||
var { calendar, max, min, last } = this.props
|
||||
this.calendar = getCalendarTable({ ...calendar, max, min, last })
|
||||
|
||||
this.__CTRL__.children[2].textContent = `${
|
||||
calendar.year
|
||||
}年${calendar.month + 1}月`
|
||||
|
||||
this.__DAYS__.innerHTML = this.calendar
|
||||
.map(
|
||||
(it, i) =>
|
||||
`<span data-idx="${i}" ${it.picked ? 'picked' : ''} ${
|
||||
it.weekend ? 'weekend' : ''
|
||||
} ${it.disabled ? 'disabled' : ''}>${it.day}</span>`
|
||||
)
|
||||
.join('')
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.props.calendar = {
|
||||
year: today.getFullYear(),
|
||||
month: today.getMonth()
|
||||
}
|
||||
|
||||
this._renderCalendar()
|
||||
|
||||
this.__INPUT__.addEventListener(
|
||||
'click',
|
||||
ev => {
|
||||
if (this.props.active) {
|
||||
return
|
||||
}
|
||||
this.props.active = true
|
||||
|
||||
let { x, y } = this.getBoundingClientRect()
|
||||
|
||||
this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
|
||||
50}px`
|
||||
},
|
||||
false
|
||||
)
|
||||
|
||||
this.addEventListener('click', ev => ev.stopPropagation(), false)
|
||||
|
||||
document.addEventListener(
|
||||
'click',
|
||||
ev => {
|
||||
this.__CALENDAR__.style.cssText = ''
|
||||
this.props.active = false
|
||||
},
|
||||
false
|
||||
)
|
||||
|
||||
this.__CTRL__.addEventListener(
|
||||
'click',
|
||||
ev => {
|
||||
let { year, month } = this.props.calendar
|
||||
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
|
||||
}
|
||||
this.props.calendar.month = month
|
||||
this.props.calendar.year = year
|
||||
this._renderCalendar()
|
||||
}
|
||||
},
|
||||
false
|
||||
)
|
||||
|
||||
this.__DAYS__.addEventListener(
|
||||
'click',
|
||||
ev => {
|
||||
if (ev.target.tagName === 'SPAN') {
|
||||
let item = this.calendar[ev.target.dataset.idx]
|
||||
log(item)
|
||||
if (item.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
item.selected = true
|
||||
}
|
||||
},
|
||||
false
|
||||
)
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
switch (name) {
|
||||
// label和placeholder 功能相同
|
||||
case 'label':
|
||||
case 'placeholder':
|
||||
this.__INPUT__.setAttribute('placeholder', val)
|
||||
break
|
||||
|
||||
case 'max-date':
|
||||
if (val) {
|
||||
let tmp = new Date(val)
|
||||
if (tmp.getFullYear()) {
|
||||
this.props.max = {
|
||||
year: tmp.getFullYear(),
|
||||
month: tmp.getMonth(),
|
||||
day: tmp.getDate()
|
||||
}
|
||||
this._renderCalendar()
|
||||
}
|
||||
}
|
||||
this.removeAttribute('max-date')
|
||||
break
|
||||
|
||||
case 'min-date':
|
||||
if (val) {
|
||||
let tmp = new Date(val)
|
||||
if (tmp.getFullYear()) {
|
||||
this.props.min = {
|
||||
year: tmp.getFullYear(),
|
||||
month: tmp.getMonth(),
|
||||
day: tmp.getDate()
|
||||
}
|
||||
this._renderCalendar()
|
||||
}
|
||||
}
|
||||
this.removeAttribute('min-date')
|
||||
break
|
||||
|
||||
case 'value':
|
||||
this.value = val
|
||||
|
||||
if (!this.props.calendar.year) {
|
||||
this.props.calendar = {
|
||||
year: this.props.pick.getFullYear(),
|
||||
month: this.props.pick.getMonth()
|
||||
}
|
||||
}
|
||||
this._renderCalendar()
|
||||
break
|
||||
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this.disabled = true
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Reference in New Issue