更新日期组件

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', () => {

src/datepicker/index.js

@@ -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>

src/icon/index.wc

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

src/picker/date.wc

@@ -1,22 +1,34 @@
 <template>
-  <label class="input">
+  <label class="input" tabindex="0">
-    <input readonly type="text" />
+    <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 {
+  span {
-    min-width: 0;
+    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 {
+  &:focus {
-    box-shadow: 0 0 3px nth($co, 1);
+    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>