This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

更新日期组件

old
宇天 2019-08-07 21:29:40 +08:00
parent 3d38ed6b56
commit 5220b030d5
4 changed files with 469 additions and 33 deletions

View File

@ -4,7 +4,6 @@ require('es.shim')
const log = console.log const log = console.log
const fs = require('iofs') const fs = require('iofs')
const path = require('path') const path = require('path')
const babel = require('babel-core')
const scss = require('node-sass') const scss = require('node-sass')
const chokidar = require('chokidar') const chokidar = require('chokidar')
const chalk = require('chalk') 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) { js = js.replace(/props = (\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
props = m props = m
var attr = new Function( 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 `static get observedAttributes() {
return ${JSON.stringify(attr)} return ${JSON.stringify(attr)}
@ -161,17 +165,19 @@ chokidar
return return
} }
switch (file.ext) { setTimeout(() => {
case '.js': switch (file.ext) {
compileJs(entry, output) case '.js':
break compileJs(entry, output)
case '.wc': break
output = output.replace(/\.wc$/, '.js') case '.wc':
compileWC(entry, output) output = output.replace(/\.wc$/, '.js')
break compileWC(entry, output)
default: break
fs.cp(entry, output) default:
} fs.cp(entry, output)
}
}, 100)
} }
}) })
.on('ready', () => { .on('ready', () => {

View File

@ -18,14 +18,14 @@ function getCalendarTable({ year, month, max, min }, last) {
for (let i = numsFixed; i <= nums; i++) { for (let i = numsFixed; i <= nums; i++) {
let day = { let day = {
weeken: !1, weekend: !1,
day: i < 1 ? '' : i, day: i < 1 ? '' : i,
selected: !1, selected: !1,
disabled: !0 disabled: !0
} }
if (i > 0) { if (i > 0) {
let week = getFirstDay(year, month, i) 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.selected = isSelected({ year, month, day: i }, last)
day.disabled = disabledDay({ max, min }, i, isLimitYM) day.disabled = disabledDay({ max, min }, i, isLimitYM)
} }
@ -241,7 +241,7 @@ export default Anot.component('datepicker', {
</section> </section>
<section class="tr do-fn-cl" :click="pick"> <section class="tr do-fn-cl" :click="pick">
<span class="td" <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" :for="calendar.list"
:data-idx="$index" :data-idx="$index"
:text="el.day"></span> :text="el.day"></span>

View File

@ -121,6 +121,10 @@ export default class Icon {
} }
} }
get is() {
return this.props.is
}
set is(val) { set is(val) {
this.props.is = val this.props.is = val
this.drawPath() this.drawPath()

View File

@ -1,22 +1,34 @@
<template> <template>
<label class="input"> <label class="input" tabindex="0">
<input readonly type="text" /> <span>ddd</span>
<wc-icon class="icon" is="calendar"></wc-icon> <wc-icon class="icon" is="calendar"></wc-icon>
</label> </label>
<div class="calendar"> <div class="calendar">
<header> <header class="control">
<wc-icon is="dbl-left"></wc-icon> <wc-icon is="dbl-left"></wc-icon>
<wc-icon is="left"></wc-icon> <wc-icon is="left"></wc-icon>
<span></span>
<wc-icon is="right"></wc-icon> <wc-icon is="right"></wc-icon>
<wc-icon is="dbl-right"></wc-icon> <wc-icon is="dbl-right"></wc-icon>
<span>2019-07</span>
</header> </header>
<section class="week">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</section>
<section class="days"></section>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
:host { :host {
overflow: hidden;
display: inline-block; display: inline-block;
position: relative;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: nth($cd, 2); color: nth($cd, 2);
@ -34,27 +46,20 @@
border-radius: inherit; border-radius: inherit;
background: #fff; background: #fff;
color: inherit; color: inherit;
outline: none;
cursor: text; cursor: text;
input { span {
min-width: 0; min-width: 64px;
padding: 0 5px; padding: 0 5px;
border: 0;
border-radius: inherit;
color: inherit;
font-size: inherit;
background: none;
outline: none;
box-shadow: none;
cursor: inherit;
&::placeholder { &::placeholder {
color: nth($cgr, 1); color: nth($cgr, 1);
} }
} }
&:focus-within { &:focus {
box-shadow: 0 0 3px nth($co, 1); border-color: nth($ct, 1);
} }
/* ----- */ /* ----- */
.icon { .icon {
@ -62,19 +67,440 @@
--size: 20px; --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> </style>
<script> <script>
import '../icon/index' 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 { export default class DatePicker {
props = { props = {
value: '', value: '',
format: 'Y-m-d' format: 'Y-m-d',
'max-date': '',
'min-date': '',
max: null,
min: null,
calendar: null
} }
constructor() { constructor() {
/* render */ /* 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> </script>