Date-picker 日历选择器实现

时间  2019-11-09
标签 date picker 日历 选择器 实现 繁體版
原文   原文链接

用于选择日期javascript

Date-picer 组件的难点在于：
  • 获取年月日，相关日期的逻辑以及 new Date 的 Api 使用；
  • 结合Functional Component，减小切换日期时 render 的代价；
  • 组件功能解耦。

1. 实例

最终效果

代码html

<!-- 基础用法 -->
<fat-date-picker v-model="date" />
<!-- 语言为EN -->
<fat-date-picker lang="EN" v-model="secDate" />
复制代码

实例地址：DatePicker 实例java

代码地址：Github UI-Librarygit

2. 原理

基本结构以下github

最终效果 
<template>
  <div class="date-picker-wrapper" ref="date-picker">
    <fat-input type="text" readonly :class="['picker-data', 'not-select', {'disabled': disabled}]" :value="selectValue | dateFormat('day', lang)" :placeholder="placeholder" @click="toggle" />
    <transition name="fade">
      <div class="picker-panel" v-show="UI.isOpen">
        <!-- 显示日期 -->
      </div>
    </transition>
  </div>
</template>

<script> export default { props: { value: { type: [Date, String, Number] }, ... }, filters: { dateFormat(val, mode, lang) { // 用于 format 对应日期 } }, model: { prop: "value", event: "input" }, data() { return { date: { year: null, month: null, day: null }, UI: { isOpen: false }, selectValue: null, panelType: "day" }; }, computed: { ... }, watch: { ... value: { handler(newValue) { this.date = dateToObj(newValue ? new Date(newValue) : new Date()); this.selectValue = newValue ? new Date(newValue) : ""; }, immediate: true } }, methods: { ... toggle() { this.UI.isOpen = !this.UI.isOpen; if (this.UI.isOpen) { const datePicker = this.$refs["date-picker"]; const handler = event => { let dom = event.target; let flag = false; while (dom) { if (dom === datePicker) { flag = true; break; } dom = dom.parentNode; } if (!flag) this.UI.isOpen = flag; document.removeEventListener("click", handler, true); }; document.addEventListener("click", handler, true); } } } }; </script>
复制代码

首先处理 Date-picker 的数据双向绑定以及下拉框的展开与收缩：json

  • 数据绑定，与以前 Select 组件一直，须要定义 v-model 的相关 prop 以及 event，经过watch prop的变化，具体逻辑以下
    value: {
  handler(newValue) {
      // 从 new Date() 中分离出当前的年月日，方便生成对应的年Table、月Table、日Table
      this.date = dateToObj(newValue ? new Date(newValue) : new Date());
      this.selectValue = newValue ? new Date(newValue) : "";
  },
  immediate: true
}
export const dateToObj = function (date) {
  return {
      year: date.getFullYear(),
      month: date.getMonth(),
      day: date.getDate()
  }
}
复制代码
  • 下拉框的展开和收缩，与以前 Select 组件不一样的是，因为 Date-picker 的下拉框存在着多种状态，并且后续提供输入功能，因此 tabIndex 为 div 添加 blur 事件的方案实现起来较为复杂，因此采用比较常规的作法
    toggle() {
    this.UI.isOpen = !this.UI.isOpen;
    if (this.UI.isOpen) {
        const datePicker = this.$refs["date-picker"];
        const handler = event => {
            let dom = event.target;
            let flag = false;

        while (dom) {
            if (dom === datePicker) {
                flag = true;
                break;
            }
            dom = dom.parentNode;
        }
        if (!flag) this.UI.isOpen = flag;
        document.removeEventListener("click", handler, true);
    };
    document.addEventListener("click", handler, true);
  }
}
复制代码
    当下拉框展开的时候，监听 document 的 click 事件，同时定义事件传播模式为 use capture，此时遍历 Dom，判断是否在 event.target 是否为 Date-picker组件。

在处理数据的时候获取到了当前的年、月、日，也就是 data 中的 date 对象bash

date: {
    year: null,
    month: null,
    day: null
}
复制代码

利用该对象来生成相应的下拉框的数据：app

  • 年：date.year 来生成年份的数据，也就是当前年份--到--当前年份+12；dom

    yearList() {
    const {
        date: { year }
    } = this;
    return Array.from({ length: 12 }, (v = year, i) => ({
        type: "year",
        value: v + i
    })
  );
}
复制代码

  • 月：区分中英文，当前路径下维护了一份 CONST.json 用于防止静态的中英文月份；函数

    monthList() {
    const { lang } = this;
    return CONST[lang].month;
}
复制代码

  • 日：这一部分比较复杂，首先实现当前月份的总天数，以后依据本月一天的星期数以及下个月第一天的星期数来填充表格，如图

    最终效果 
    dayList() {
  const {
    date: { year, month },
    selectValue
  } = this;
  // 后去当前月份的天数
  let curMonthDays = new Date(year, month + 1, 0).getDate();
  // 第一天的星期数
  let firstDay = new Date(year, month, 1).getDay();
  // 下个月第一天的星期数
  let preMonthDays = new Date(year, month, 0).getDate();
  let days = Array.from(
    {
      length: curMonthDays
    },
    (val, index) => {
      let value = index + 1;
      let date = {
        year,
        month,
        day: value
      };
      // 选中日期高亮
      let type = isEqualDay(date, new Date(selectValue))
        ? "cur-month is-selected"
        : "cur-month";
      return {
        type,
        value
      };
    }
  );
  // 标识上一月以及下一个月，对应作样式处理
  for (let index = 0; index < firstDay; index++) {
    days = [
      {
        type: "pre-month",
        value: preMonthDays--
      }
    ].concat(days);
  }
  for (let index = days.length, item = 1; index < 42; index++, item++) {
    days.push({
      type: "next-month",
      value: item
    });
  }
  return CONST[lang].day.concat(days);
}
复制代码

下拉框主要分为两部分：操做栏、日期选择框

最终效果

  • 操做栏

    <div class="picker-panel" v-show="UI.isOpen">
    <div class="panel-header">
        <div class="left-part">
            <fat-icon class="panel-header-btn" name="chevron_left" :size="20" @click.stop="handleClick('decYear')" />
            <fat-icon class="panel-header-btn" name="chevron_left" :size="20" @click.stop="handleClick('decMonth')" />
        </div>
        ...
        <div>
            <fat-icon class="panel-header-btn" name="chevron_right" :size="20" @click.stop="handleClick('addMonth')" />
            <fat-icon class="panel-header-btn" name="chevron_right" :size="20" @click.stop="handleClick('addYear')" />
        </div>
    </div>
 </div>
复制代码

    四个 icon 主要负责加减月份以及年份，因为四个都属于点击事件，而且只修改了 data，利用适配器模式来处理

    handleClick(type) {
    const handlers = {
        addYear: () => ++this.date.year,
        decYear: () => --this.date.year,
        addMonth: () => ++this.date.month,
        decMonth: () => --this.date.month,
        year: () => (this.panelType = "year"),
        month: () => (this.panelType = "month")
    };
    handlers[type]();
}
复制代码

    同时 watch 状态 date ，完成相关年月的进位

    date: {
    handler(newValue) {
        let { month } = newValue;
        if (month > 11) {
            ++this.date.year;
            this.date.month = 0;
        } else if (month < 0) {
            --this.date.year;
            this.date.month = 11;
        } else {
            this.date.month = newValue.month;
        }
    },
    deep: true
},
复制代码

  • 日期选择框：这部分要实时变更，为了省去模板解析的耗费，采用 Functional Component 来实现，也就是说这一部分是函数式组件。

    <date-panel class="panel-content" :type="panelType" :data="list" @select="panelClick" />
复制代码

    其 props 包含上述年、月、日的数据，一样也采用适配器模式，依据 panelType 来区分展现的是那一部分数据

    import GeneratorRows from './basic'

export default Vue.component('panel', {
    functional: true,
    render: function (_h, context) {
        // 获取panel组件的props，包含数据data以及类型type
        const {
            data: list,
            type
        } = context.props
        let result = null
        // 若是展现的日，一行的数量为7个，若是是年月则展现3个。
        let num = type === 'day' ? 7 : 3
        // 此处利用事件委托
        const clickHandler = (e) => {
            if (e.target.attributes.index) {
                let value = e.target.attributes.index.value
                let params = {
                    type,
                    value
                }

                type === 'day' && Object.assign(params, {
                    dateType: e.target.attributes.dateType.value
                })
                context.listeners.select(params)
            }
            e.stopPropagation()
        }
        // GeneratorRows为自定义函数，用来生成对应的行
        result = _h('table', {
            attrs: {
                class: context.data.staticClass,
                cellspacing: 0,
                cellpadding: 0
            },
            on: {
                click: clickHandler
            }
        }, GeneratorRows(_h, type, list, num))
        return result
    }
})
复制代码

    总体结构很是简单，首先获取该组件的 props ，从中获得数据和类型，

    而后利用 GeneratorRows 函数去生成对应的 table，因为 table 内项比较多，因此利用事件委托技术，监听 table 的 click 事件，

    若是触发的话，获取 e.target 对应的属性值 e.target.attributes.index.value，结合以前的类型，构建参数 params，再触发自定义事件 context.listeners.select(params)。

    export default function GeneratorRows(_h, type, list, itemNum) {
    let rows = []
    let row = []

    list.forEach((elem, index) => {
        let dom = index < itemNum ? 'th' : 'td'
        let className = index < itemNum && type === 'day' ? 'head-item' : `data-item ${elem.type}`
        let label = elem.label || elem.value

        row.push(
            _h(
                dom, {
                    attrs: {
                        class: className,
                        // 用于事件委托
                        dateType: elem.type,
                        index: elem.value,
                    }
                },
                label
            )
        )
        if (row.length % itemNum === 0 && row.length) {
            // 换行
            rows.push(
                _h(
                    'tr', {
                        attrs: {
                            class: "panel-content-row"
                        }
                    },
                    row
                )
            )
            row = []
        }
    })
    return rows
}
复制代码

    GeneratorRows 函数就是遍历上述 list ，而后依据规则生成对应 table。

3. 总结

这个组件原始的逻辑比较复杂，经过组件化的拆分以及数据的整合，使得总体的逻辑比较明了，也是我写这套组件库的缘由。

原创声明： 该文章为原创文章，转载请注明出处。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程