From 0e39e81e5c1f9a4f24c2c46030102e8ed12f2d77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 15 Mar 2022 22:44:07 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E7=A0=94=E5=8F=91=20date-picker=20?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/datePicker.md |   6 +-
 example/src/router/zh-CN.ts                 |   6 +
 example/src/view/utils/menus.ts             |   6 +
 src/component/datePicker/index.ts           |   8 +
 src/component/datePicker/index.vue          | 419 ++++++++++++++++++++
 src/index.ts                                |   5 +-
 src/resolver/index.ts                       |   6 +-
 src/theme/date.less                         | 160 ++++++++
 src/theme/font/iconfont.eot                 | Bin 0 -> 2456 bytes
 src/theme/font/iconfont.svg                 |  45 +++
 src/theme/font/iconfont.ttf                 | Bin 0 -> 2272 bytes
 src/theme/font/iconfont.woff                | Bin 0 -> 1492 bytes
 src/theme/index.less                        |   1 +
 13 files changed, 655 insertions(+), 7 deletions(-)
 create mode 100644 src/component/datePicker/index.ts
 create mode 100644 src/component/datePicker/index.vue
 create mode 100644 src/theme/date.less
 create mode 100644 src/theme/font/iconfont.eot
 create mode 100644 src/theme/font/iconfont.svg
 create mode 100644 src/theme/font/iconfont.ttf
 create mode 100644 src/theme/font/iconfont.woff

diff --git a/example/docs/zh-CN/components/datePicker.md b/example/docs/zh-CN/components/datePicker.md
index 7e7213a5..a0d750bd 100644
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@@ -7,8 +7,7 @@
 ::: demo
 
 <template>
-  <lay-date-picker>
-  </lay-date-picker>
+  <lay-date-picker  v-model="endTime"  frontText="结束时间:"></lay-date-picker>
 </template>
 
 <script>
@@ -17,7 +16,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+   const endTime = ref("2022-03-04 17:35:00");
+
     return {
+      endTime
     }
   }
 }
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index c0b2d628..f4e105ed 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -291,6 +291,12 @@ const zhCN = [
               import("../../docs/zh-CN/components/colorPicker.md"),
             meta: { title: "颜色选择器" },
           },
+          {
+            path: "/zh-CN/components/datePicker",
+            component: () =>
+              import("../../docs/zh-CN/components/datePicker.md"),
+            meta: { title: "日期选择器" },
+          },
           {
             path: "/zh-CN/components/layer",
             component: () => import("../../docs/zh-CN/components/layer.md"),
diff --git a/example/src/view/utils/menus.ts b/example/src/view/utils/menus.ts
index 9d42817e..31300fbb 100644
--- a/example/src/view/utils/menus.ts
+++ b/example/src/view/utils/menus.ts
@@ -165,6 +165,12 @@ const menus = [
         subTitle: "colorPicker",
         path: "/zh-CN/components/colorPicker",
       },
+      {
+        id: 40,
+        title: "日期选择器",
+        subTitle: "datePicker",
+        path: "/zh-CN/components/datePicker",
+      },
       {
         id: 29,
         title: "图标选择器",
diff --git a/src/component/datePicker/index.ts b/src/component/datePicker/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/datePicker/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/component/datePicker/index.vue b/src/component/datePicker/index.vue
new file mode 100644
index 00000000..e6a34654
--- /dev/null
+++ b/src/component/datePicker/index.vue
@@ -0,0 +1,419 @@
+<template>
+  <div>
+    <lay-dropdown>
+      <lay-input v-model="dateValue" readonly />
+      <template #content>
+        <!-- 日期选择 -->
+        <div class="layui-laydate" v-show="showPanel === 'date'">
+          <div class="layui-laydate-main laydate-main-list-0">
+            <div class="layui-laydate-header">
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+                ></i
+              ><i
+                class="layui-icon laydate-icon laydate-prev-m"
+                @click="changeYearOrMonth('month', -1)"
+                ></i
+              >
+              <div class="laydate-set-ym">
+                <span @click="showYearPanel">{{ curYear }} 年</span
+                ><span @click="showPanel = 'month'">{{ curMonth }} 月</span>
+              </div>
+              <i
+                class="layui-icon laydate-icon laydate-next-m"
+                @click="changeYearOrMonth('month', 1)"
+                ></i
+              ><i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+                ></i
+              >
+            </div>
+            <div class="layui-laydate-content">
+              <table>
+                <thead>
+                  <tr>
+                    <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <template
+                    v-for="(o, i) of dateList.length % 7 == 0
+                      ? dateList.length / 7
+                      : Math.floor(dateList.length / 7) + 1"
+                    :key="i"
+                  >
+                    <tr>
+                      <td
+                        v-for="(item, index) of dateList.slice(
+                          i * 7,
+                          i * 7 + 7
+                        )"
+                        :key="index"
+                        :data-unix="item.value"
+                        :class="{
+                          'laydate-day-prev': item.type !== 'current',
+                          'layui-this': item.value === selectedDay,
+                        }"
+                        @click="handleDayClick(item)"
+                      >
+                        {{ item.day }}
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div class="layui-laydate-footer">
+            <span
+              @click="showPanel = 'time'"
+              class="layui-laydate-preview"
+              style="color: rgb(102, 102, 102)"
+            >
+              {{ `${hms.hh}:${hms.mm}:${hms.ss}` }}
+            </span>
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="layui-laydate" v-show="showPanel === 'year'"
+        >
+          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+            <div class="layui-laydate-header">
+              <div class="laydate-set-ym">
+                <span class="laydate-time-text">选择年份</span>
+              </div>
+            </div>
+            <div class="layui-laydate-content" style="height: 220px;overflow-y: auto;">
+              <ul class="layui-laydate-list laydate-year-list">
+           <li
+            v-for="item of yearList"
+            :key="item"
+            :class="[{ 'layui-this': curYear === item }]"
+            @click="
+              curYear = item;
+              showPanel = 'date';
+            "
+          >
+            {{ item }}
+          </li>
+              </ul>
+            </div>
+          </div>
+          <div class="layui-laydate-footer">
+            <span
+              class="layui-laydate-preview"
+              title="当前选中的结果"
+              style="color: rgb(102, 102, 102)"
+              >2022</span
+            >
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="layui-laydate" v-show="showPanel === 'month'">
+          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+            <div class="layui-laydate-header">
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+                ></i
+              >
+              <div class="laydate-set-ym">
+                <span @click="showYearPanel">{{ curYear }} 年</span
+                ><span @click="showPanel = 'month'">{{ curMonth }} 月</span>
+              </div>
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+                ></i
+              >
+            </div>
+            <div class="layui-laydate-content" style="height: 220px">
+              <ul class="layui-laydate-list laydate-month-list">
+                <li
+                  v-for="item of MONTH_NAME"
+                  :key="item"
+                  :class="[
+                    { 'layui-this': MONTH_NAME.indexOf(item) === curMonth },
+                  ]"
+                  @click="
+                    curMonth = MONTH_NAME.indexOf(item);
+                    showPanel = 'date';
+                  "
+                >
+                  {{ item.slice(0, 3) }}
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="layui-laydate-footer">
+            <span
+              class="layui-laydate-preview"
+              title="当前选中的结果"
+              style="color: rgb(102, 102, 102)"
+              >2022-03</span
+            >
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="layui-laydate" v-if="showPanel == 'time'">
+          <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
+            <div class="layui-laydate-header">
+              <div class="laydate-set-ym">
+                <span class="laydate-time-text">选择时间</span>
+              </div>
+            </div>
+            <div class="layui-laydate-content" style="height: 210px">
+              <ul class="layui-laydate-list laydate-time-list">
+                <li
+                  class="num-list"
+                  v-for="item in hms.insertEls"
+                  :key="item.type"
+                >
+                  <ol class="scroll" @click="chooseTime">
+                    <li
+                      v-for="(it, index) in item.count"
+                      :id="item.type + index.toString()"
+                      :data-value="index.toString().padStart(2, '0')"
+                      :data-type="item.type"
+                      :key="it"
+                      :class="[
+                        'num',
+                        index.toString().padStart(2, '0') == hms[item.type]
+                          ? 'layui-this'
+                          : '',
+                      ]"
+                    >
+                      {{ index.toString().padStart(2, "0") }}
+                    </li>
+                  </ol>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="layui-laydate-footer">
+            <span @click="showPanel = 'date'" class="layui-laydate-preview"
+              >返回</span
+            >
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
+import LayInput from "../input/index.vue";
+import LayDropdown from "../dropdown/index.vue";
+
+defineProps({
+  modelValue: { type: String, required: false },
+  frontText: { type: String, required: false },
+});
+
+const $emits = defineEmits(["update:modelValue"]);
+const currentDate = new Date();
+const yearList = ref<number[]>([]);
+const dateList = ref<any[]>([]);
+const curYear = ref(currentDate.getFullYear());
+const curMonth = ref(currentDate.getMonth());
+const showPanel = ref("date");
+const showDropdown = ref(false);
+const selectedDay = ref<number>();
+
+const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
+const MONTH_NAME = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+];
+
+const hms = ref({
+  hh: "23",
+  mm: "59",
+  ss: "59",
+  insertEls: [
+    {
+      count: 24,
+      type: "hh",
+    },
+    {
+      count: 60,
+      type: "mm",
+    },
+    {
+      count: 60,
+      type: "ss",
+    },
+  ],
+});
+
+const dateValue = computed<string>(() => {
+  if (!selectedDay.value) return "";
+  const d = new Date(selectedDay.value);
+  const y = d.getFullYear();
+  const m = (d.getMonth() + 1).toString().padStart(2, "0");
+  const day = d.getDate().toString().padStart(2, "0");
+  const currentValue = `${y}-${m}-${day} ${hms.value.hh}:${hms.value.mm}:${hms.value.ss}`;
+  $emits("update:modelValue", currentValue);
+  return currentValue;
+});
+
+// 生成近100年的年份列表
+(() => {
+  for (let i = 1970; i < curYear.value + 100; i++) {
+    yearList.value.push(i);
+  }
+})();
+
+// 获取传入的月份有多少天
+const getDayLength = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+// 设置日期列表
+const setDateList = (year: number, month: number) => {
+  const curDays = getDayLength(year, month); // 当月天数
+  const prevDays = getDayLength(year, month - 1); // 上月天数
+  const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
+  const list: any[] = [];
+  // 填充上月最后几天
+  for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month - 1, i),
+      isRange: false,
+      isSelected: false,
+      type: "prev",
+    });
+  }
+
+  // 填充当月
+  for (let i = 1; i <= curDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month, i),
+      isRange: false,
+      isSelected: false,
+      type: "current",
+    });
+  }
+
+  const nextDays = 7 - (list.length % 7);
+  if (nextDays !== 7) {
+    // 填充下月
+    for (let i = 1; i <= nextDays; i++) {
+      list.push({
+        day: i,
+        value: +new Date(year, month + 1, i),
+        isRange: false,
+        isSelected: false,
+        type: "next",
+      });
+    }
+  }
+  dateList.value = list;
+};
+
+watch(
+  [curYear, curMonth],
+  () => {
+    setDateList(curYear.value, curMonth.value);
+  },
+  { immediate: true }
+);
+
+// 点击日期
+const handleDayClick = (item: any) => {
+  selectedDay.value = item.value;
+  if (item.type !== "current") {
+    curMonth.value =
+      item.type === "prev" ? curMonth.value - 1 : curMonth.value + 1;
+  }
+  showDropdown.value = false;
+};
+
+// 切换年月
+const changeYearOrMonth = (type: "year" | "month", num: number) => {
+  if (type === "year") {
+    curYear.value += num;
+  } else {
+    let month = curMonth.value + num;
+
+    if (month > 11) {
+      month = 0;
+      curYear.value++;
+    } else if (month < 0) {
+      month = 11;
+      curYear.value--;
+    }
+    curMonth.value = month;
+  }
+};
+
+// 显示年列表面板
+const showYearPanel = () => {
+  showPanel.value = "year";
+  nextTick(() => {
+    (
+      document.querySelector(".year-panel-item.active") as HTMLElement
+    ).scrollIntoView({ block: "center" });
+  });
+};
+
+const showHmPanel = ref(false);
+
+const openHmPanel = () => {
+  let activeEl = document.querySelectorAll(".hms-change .isactive") as any;
+  let count = 0;
+  const initScrollIntoView = () => {
+    if (count > activeEl.length) return;
+    activeEl[count].scrollIntoView({ behavior: "smooth" });
+    count++;
+    setTimeout(initScrollIntoView, Number(activeEl[count].dataset.value) * 16);
+  };
+
+  initScrollIntoView();
+  showHmPanel.value = !showHmPanel.value;
+};
+
+const chooseTime = (e: any) => {
+  if (e.target.nodeName == "LI") {
+    let { value, type } = e.target.dataset;
+    hms.value[type as keyof typeof hms.value] = value;
+    e.target.scrollIntoView({ behavior: "smooth" });
+  }
+};
+</script>
diff --git a/src/index.ts b/src/index.ts
index 23c4224b..38d7d5de 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -77,6 +77,7 @@ import LaySplitPanelItem from "./component/splitPanelItem/index";
 import LayException from "./component/exception/index";
 import LayResult from "./component/result/index";
 import LayFullscreen from "./component/fullscreen/index";
+import LayDatePicker from "./component/datePicker/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -152,6 +153,7 @@ const components: Record<string, Component> = {
   LayResult,
   LayFullscreen,
   LayConfigProvider,
+  LayDatePicker
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -235,10 +237,11 @@ export {
   LayResult,
   LayFullscreen,
   LayConfigProvider,
+  LayDatePicker
 };
 
 export { layer };
 
 export default { install };
 
-export * from "./resolver";
\ No newline at end of file
+export * from "./resolver";
diff --git a/src/resolver/index.ts b/src/resolver/index.ts
index e70deae1..4acddd48 100644
--- a/src/resolver/index.ts
+++ b/src/resolver/index.ts
@@ -1,6 +1,6 @@
 /**
  * Layui-vue Resolver
- * 
+ *
  * √ On-demand import components for @layui/layui-vue
  * √ component and style resolver for @layui/icons-vue
  * √ layer API
@@ -111,7 +111,6 @@ const matchComponents = [
 ];
 
 export interface LayuiVueResolverOptions {
-
   /**
    * import style along with components
    *
@@ -133,7 +132,6 @@ export interface LayuiVueResolverOptions {
    *
    */
   exclude?: string[];
-
 }
 
 const libRE = /^Lay[A-Z]/;
@@ -189,7 +187,7 @@ function resolveComponent(name: string, options: LayuiVueResolverOptions) {
 
 /**
  * Resolver for layui-vue
- * 
+ *
  * @param options
  * @returns
  */
diff --git a/src/theme/date.less b/src/theme/date.less
new file mode 100644
index 00000000..2a17681e
--- /dev/null
+++ b/src/theme/date.less
@@ -0,0 +1,160 @@
+/** 图标字体 **/
+@font-face {font-family: 'laydate-icon';
+    src: url('./font/iconfont.eot');
+    src: url('./font/iconfont.eot#iefix') format('embedded-opentype'),
+    url('./font/iconfont.svg#iconfont') format('svg'),
+    url('./font/iconfont.woff') format('woff'),
+    url('./font/iconfont.ttf') format('truetype');
+  }
+                      
+  .laydate-icon{
+    font-family:"laydate-icon" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
+  
+  /* 初始化 */
+  .layui-laydate *{margin: 0; padding: 0;}
+  
+  /* 主体结构 */
+  .layui-laydate, .layui-laydate *{box-sizing: border-box;}
+  .layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
+  .layui-laydate-main{width: 272px;}
+  .layui-laydate-header *,
+  .layui-laydate-content td,
+  .layui-laydate-list li{transition-duration: .3s; -webkit-transition-duration: .3s;}
+  
+  /* 微微往下滑入 */
+  @keyframes laydate-downbit {
+    0% {opacity: 0.3; transform: translate3d(0, -5px, 0);}
+    100% {opacity: 1; transform: translate3d(0, 0, 0);}
+  }
+  
+  .layui-laydate{animation-name: laydate-downbit;}
+  .layui-laydate-static{ position: relative; z-index: 0; display: inline-block; margin: 0; -webkit-animation: none; animation: none;}
+  
+  /* 展开年月列表时 */
+  .laydate-ym-show .laydate-prev-m,
+  .laydate-ym-show .laydate-next-m{display: none !important;}
+  .laydate-ym-show .laydate-prev-y,
+  .laydate-ym-show .laydate-next-y{display: inline-block !important;}
+  .laydate-ym-show .laydate-set-ym span[lay-type="month"]{display: none !important;}
+  
+  /* 展开时间列表时 */
+  .laydate-time-show .layui-laydate-header .layui-icon,
+  .laydate-time-show .laydate-set-ym span[lay-type="year"],
+  .laydate-time-show .laydate-set-ym span[lay-type="month"]{display: none !important;}
+  
+  /* 头部结构 */
+  .layui-laydate-header{position: relative; line-height:30px; padding: 10px 70px 5px;}
+  .layui-laydate-header *{display: inline-block; vertical-align: bottom;}
+  .layui-laydate-header i{position: absolute; top: 10px; padding: 0 5px; color: #999; font-size: 18px; cursor: pointer;}
+  .layui-laydate-header i.laydate-prev-y{left: 15px;}
+  .layui-laydate-header i.laydate-prev-m{left: 45px;}
+  .layui-laydate-header i.laydate-next-y{right: 15px;}
+  .layui-laydate-header i.laydate-next-m{right: 45px;}
+  .laydate-set-ym{width: 100%; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
+  .laydate-set-ym span{padding: 0 10px; cursor: pointer;}
+  .laydate-time-text{cursor: default !important;}
+  
+  /* 主体结构 */
+  .layui-laydate-content{position: relative; padding: 10px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
+  .layui-laydate-content table{border-collapse: collapse; border-spacing: 0;}
+  .layui-laydate-content th,
+  .layui-laydate-content td{width: 36px; height: 30px; padding: 5px; text-align: center;}
+  .layui-laydate-content th{font-weight: 400;}
+  .layui-laydate-content td{position: relative; cursor: pointer;}
+  .laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
+  .laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
+  
+  /* 底部结构 */
+  .layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px;}
+  .layui-laydate-footer span{display: inline-block;  vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #C9C9C9; border-radius: 2px; background-color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s;}
+  .layui-laydate-footer span:hover{color: #5FB878;}
+  .layui-laydate-footer span.layui-laydate-preview{cursor: default; border-color: transparent !important;}
+  .layui-laydate-footer span.layui-laydate-preview:hover{color: #666;}
+  .layui-laydate-footer span:first-child.layui-laydate-preview{padding-left: 0;}
+  .laydate-footer-btns{position: absolute; right: 10px; top: 10px;}
+  .laydate-footer-btns span{margin: 0 0 0 -1px;}
+  
+  /* 年月列表 */
+  .layui-laydate-list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff;}
+  .layui-laydate-list>li{position: relative; display: inline-block; width: 33.3%; height: 36px; line-height: 36px; margin: 3px 0; vertical-align: middle; text-align: center; cursor: pointer;}
+  .laydate-month-list>li{width: 25%; margin: 17px 0;}
+  .laydate-time-list>li{height: 100%; margin: 0; line-height: normal; cursor: default;}
+  .laydate-time-list p{position: relative; top: -4px; line-height: 29px;}
+  .laydate-time-list ol{height: 181px; overflow: hidden;}
+  .laydate-time-list>li:hover ol{overflow-y: auto;}
+  .laydate-time-list ol li{width: 130%; padding-left: 4px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
+  
+  /* 提示 */
+  .layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
+  
+  
+  /* 双日历 */
+  .layui-laydate-range{width: 546px;}
+  .layui-laydate-range .layui-laydate-main{display: inline-block; vertical-align: middle;}
+  .layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
+  .layui-laydate-range .laydate-main-list-1 .layui-laydate-content{border-left: 1px solid #e2e2e2;}
+  
+  
+  /* 默认简约主题 */
+  .layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
+  .layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
+  .layui-laydate-header i:hover,
+  .layui-laydate-header span:hover{color: #5FB878;}
+  .layui-laydate-content{border-top: none 0; border-bottom: none 0;}
+  .layui-laydate-content th{color: #333;}
+  .layui-laydate-content td{color: #666;}
+  .layui-laydate-content td.laydate-selected{background-color: #B5FFF8;}
+  .laydate-selected:hover{background-color: #00F7DE !important;}
+  .layui-laydate-content td:hover,
+  .layui-laydate-list li:hover{background-color: #eee; color: #333;}
+  .laydate-time-list li ol{margin: 0; padding: 0; border: 1px solid #e2e2e2;}
+  .laydate-time-list li:first-child ol{border-left-width: 1px;}
+  .laydate-time-list>li:hover{background: none;}
+  .layui-laydate-content .laydate-day-prev,
+  .layui-laydate-content .laydate-day-next{color: #d2d2d2;}
+  .laydate-selected.laydate-day-prev,
+  .laydate-selected.laydate-day-next{background-color: #f8f8f8 !important;}
+  .layui-laydate-footer{border-top: 1px solid #e2e2e2;}
+  .layui-laydate-hint{color: #FF5722;}
+  .laydate-day-mark::after{background-color: #5FB878;}
+  .layui-laydate-content td.layui-this .laydate-day-mark::after{display: none;}
+  .layui-laydate-footer span[lay-type="date"]{color: #5FB878;}
+  .layui-laydate .layui-this{background-color: #009688 !important; color: #fff !important;}
+  .layui-laydate .laydate-disabled,
+  .layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
+  
+  /* 墨绿/自定义背景色主题 */
+  .laydate-theme-molv{border: none;}
+  .laydate-theme-molv.layui-laydate-range{width: 548px}
+  .laydate-theme-molv .layui-laydate-main{width: 274px;}
+  .laydate-theme-molv .layui-laydate-header{border: none; background-color: #009688;}
+  .laydate-theme-molv .layui-laydate-header i,
+  .laydate-theme-molv .layui-laydate-header span{color: #f6f6f6;}
+  .laydate-theme-molv .layui-laydate-header i:hover,
+  .laydate-theme-molv .layui-laydate-header span:hover{color: #fff;}
+  .laydate-theme-molv .layui-laydate-content{border: 1px solid #e2e2e2; border-top: none; border-bottom: none;}
+  .laydate-theme-molv .laydate-main-list-1 .layui-laydate-content{border-left: none;}
+  .laydate-theme-molv .layui-laydate-footer{border: 1px solid #e2e2e2;}
+  
+  /* 格子主题 */
+  .laydate-theme-grid .layui-laydate-content td,
+  .laydate-theme-grid .layui-laydate-content thead,
+  .laydate-theme-grid .laydate-year-list>li,
+  .laydate-theme-grid .laydate-month-list>li{border: 1px solid #e2e2e2;}
+  .laydate-theme-grid .laydate-selected,
+  .laydate-theme-grid .laydate-selected:hover{background-color: #f2f2f2 !important; color: #009688 !important;}
+  .laydate-theme-grid .laydate-selected.laydate-day-prev,
+  .laydate-theme-grid .laydate-selected.laydate-day-next{color: #d2d2d2 !important;}
+  .laydate-theme-grid .laydate-year-list,
+  .laydate-theme-grid .laydate-month-list{margin: 1px 0 0 1px;}
+  .laydate-theme-grid .laydate-year-list>li,
+  .laydate-theme-grid .laydate-month-list>li{margin: 0 -1px -1px 0;}
+  .laydate-theme-grid .laydate-year-list>li{height: 43px; line-height: 43px;}
+  .laydate-theme-grid .laydate-month-list>li{height: 71px; line-height: 71px;}  
\ No newline at end of file
diff --git a/src/theme/font/iconfont.eot b/src/theme/font/iconfont.eot
new file mode 100644
index 0000000000000000000000000000000000000000..c861caa8e2c1e5bfff43ca36bf79fe3195545148
GIT binary patch
literal 2456
zcmc&$U2GIp6h3EWclM|4ENt8Dw(PdkmhM(tw(YtU3JL_Uh&B;HOP~_7bZ6U={bRd@
zEkWIo_!|<4i3VfP#9-i&L`)1Jkw+dhCIsS(AsAs3<IjsR;X!Bp?#$GdpZdz|-aFs<
z&bjxVbLY&Qd&Wa_+fBqIk+>vs$|eAFngtr$Wyy=ZNkcq#`CiW=yMTg}p(M>y3Vn%m
zT0=85NqNe_K&9ParfANzDS`>mIG7^M!b;d^G(<5Pgy#R|fm%3GM-`H3aL1lkwq7*8
z{2k<auv=f;GY}vD<GG!Xk3$}x%q9!px65ZB|AzMURAxS{jNXJSUqZy|r}bn?{p|IR
zV0#;Fcp8N3mi!Lz6|~jU*;2XX7a-yr=z^L2WKtUBG{&EUtY(wt0yonE=!1~8Tr#Wg
zz3#-mIkBE}wveAKtsOt`0g?M8^t*-ca-~+GR~-<E&@XJMDWg+N25is0%g0{xJ^dHe
zS++N?hQ1R<*1dMkLGn6?Zu{|BGb!{EIfa$UddUk^Gi6KfrFQBk-ab0^GDcbxTN=*H
zOeMkD5_Ce#U>H7GEPDBGK8+RJ(tFakU{6_h{*~g4v5Pqb-F?@t^s_12Lgng&6~A1e
z3JmP%#Zof%S=^U4h$0%1m;IKCGxnG?STVXEcSH%^K^q{u@e>JMuFBPknuxtzm8$zq
z1Oa1&h1eI7_%cRe1r`xLrt853cuZ~()tf7i+3SmaFWU_+R<Wm|iM_4jd59*SOLf21
z#AB;YSk2DBBlJFfN<VT4mYA*flYB)EQX}=^Mc+<%M_B3OE>#M1XEYI$`nb8%+1%2k
z%F*s<r>nawCO^Y1T}o3RKAecOC@#gvD!21fo$=vlOp5Z_#3pGY#{*&J)>UnL{5>JR
ze44$%X!~2n^U~+s+|eEKZCYdO?BCoJ*BaeN>;3*#zyG9LaXQ_S<nXDSZ3%ds9<O4Y
zbNbqvuXH>ib#Q%av~6r(gSN__d^eE`_q2GJD-~{BrK#sPuWVb1|M9j!qrcU)qQM<(
zYv^9x#7FPc1sm(bk)IK&$jaKE(p|a1%&c`DjxvWv_>^&Ygm+2THyX3X>_#@f1xxIr
z9$v@Noe|?OpBgbPF0sQd*RIJ|@wWS@gEXQ>9*zf^TpkWIDP03R^q|a}`MfV0R*kcq
z^0h~Ny)s{b?1QYU;i%ecyulT|00_$XM40ySiH8Ugi&*=H{FU5CE2xvYh&-%xMG^=q
zk{FJ6@DO+2PjvH;e91_uk+919jW5(tM2+%M<8345i-c6(2P!NmF7ul(3q^dqk0*pK
zYP|Ol0T29i%Y4s;H_d3)>%z#^W*bZ7f^QZtgYUJm12|!0Co0Ak8!O;nu(6l=Xs?ay
zkeeqEF*{Hh=}G#~#*BjWjg2J~vL9?LgTHHI2k<{Oc2WQ}!J0>*AotnWOXIxF#&s0o
zkG<Q9da|Uaw1e~7%w#^7&gV+rOmaR2a*ZH%>r-=?WN|6A6p!o0*_nJ!8;T7srFZB#
zy|^&%?2)N>sg%~z#e7y9#R7UJlh+Ex{2_g^6q_!U3L6Fn#KMA)P3E)sG;Tvx*6kXe
zLc$$HP1pXb<!Q58mtePCwZFg8FK4wJ|L9Y}a@ITGY0f-HSZ9t!e`o0k&Kq%@L`sx~
z|7k>(r!3H@9f6JrGQb)YOx+>OGYRV$O`D?%C@2H?EkwLvA2UxiS&@<AizqHpPabtC
lEV0ZEcCx}Q;<7TIpTl1{HkZfWRh~)C&&=y?`#vP5_!q}2aU1{u

literal 0
HcmV?d00001

diff --git a/src/theme/font/iconfont.svg b/src/theme/font/iconfont.svg
new file mode 100644
index 00000000..1e04218f
--- /dev/null
+++ b/src/theme/font/iconfont.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="laydate-icon" horiz-adv-x="1024" >
+  <font-face
+    font-family="laydate-icon"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="youyou" unicode="&#58882;" d="M283.648 721.918976 340.873216 780.926976 740.352 383.997952 340.876288-12.925952 283.648 46.077952 619.52 383.997952Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zuozuo" unicode="&#58883;" d="M740.352 721.918976 683.126784 780.926976 283.648 383.997952 683.123712-12.925952 740.352 46.077952 404.48 383.997952Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiayiye" unicode="&#58970;" d="M62.573 384.103l423.401 423.662c18.985 18.985 49.757 18.985 68.727 0 18.982-18.972 18.985-49.746 0-68.729l-355.058-355.067 356.796-356.796c18.977-18.971 18.976-49.746 0-68.727-18.982-18.976-49.751-18.976-68.727 0l-39.753 39.753 0.269 0.246-385.655 385.661zM451.365 384.103l423.407 423.662c18.985 18.985 49.757 18.985 68.727 0 18.982-18.972 18.985-49.746 0-68.729l-355.058-355.067 356.796-356.796c18.977-18.971 18.976-49.746 0-68.727-18.982-18.976-49.757-18.977-68.727 0l-39.762 39.754 0.273 0.249-385.662 385.661zM451.365 384.103z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiayiye1" unicode="&#58971;" d="M948.066926 382.958838l-411.990051-412.24426c-18.47333-18.47333-48.417689-18.47333-66.875207 0-18.47333 18.461167-18.47333 48.405526 0 66.875207L814.691135 383.088983 467.512212 730.269123c-18.466032 18.458735-18.466032 48.405526 0 66.873991 18.468465 18.464816 48.410391 18.464816 66.872774 0l38.682336-38.682336-0.261507-0.239614 375.259894-375.265975v0.003649m-378.312834 0L157.756743-29.285422c-18.47333-18.47333-48.415256-18.47333-66.872775 0-18.47333 18.461167-18.47333 48.405526 0 66.875207L436.369787 383.088983 89.19208 730.269123c-18.4636 18.458735-18.4636 48.405526 0 66.873991 18.470898 18.464816 48.415256 18.464816 66.872774 0l38.692067-38.682336-0.266372-0.239614 375.267191-375.265975-0.004865 0.003649m0 0z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
diff --git a/src/theme/font/iconfont.ttf b/src/theme/font/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..0bd6c4a88dd899aea3926e49bdfb37e81004bcb9
GIT binary patch
literal 2272
zcmc&#TWl0n82<m6-PudqS=hGQZP{(7E$miXw(YtU3Q7rJ5hW2pOP~_7?9R3&dt-MC
zy9RYb;srwjG0|uYnivc`l8A{9B=X3E#)Lq8F~kdOV!XT<6CZTe@5~Hl<?_s#`Oo?O
z@BEkZpE)x_Ohj!|Cz&R8?0sSDMdP#Ih<F3ot<UZqkI()7)K2Kfq0gmq$>KNt^83(#
zg?zD)t!0$i8_?xTMAC*uJ(*TNe&s#beh-;i1mU_VzX^O9vU)LBsrLK~M0_1xFk46^
zr3uc!{~UBRm#h}Kn+{?=2wlr3bNaq(&fP>#<de=83+2kXxr6Tzxldt!4`J<cy;-Lh
z9Z-qTi)vb%VlrUY{B_~Smwb=^No|(xjVqzAg`qVzuR2Ix57kYQ?JgoI^c*=&U9etU
zL`_q-GI^<=#)!Ai?s^`cR$yy}vr7v}aJGgyG0R{WQ7sm|{5PLL2Dfxl`U>o6Yvf-j
z&hVAUDTBRF+nsqbO<Snin78Ve>r{uCUA;&pW1q#?Do{l=BIcMi#aY`Y16FvCVMLYS
z9kda;8<(iP+K?ObO;LNbAvF$|2nu|Jh1eH{oeVEzU{T>iYW5a9r0gwe+fBU7X2iZ%
zZNU;7*i#{5ZyR_XLd0`v9I!+@w#K|A_6a;nZ_`Kg9fx3vXw4tw%W{x9X@n+eJK-H+
zWt4|hDa?b>L`)jx?m=gFPnRl3hogh8;h~uP1osRnU4i&iBGRL{6d$YH&yNkpr=l?_
z%IgxFrA-_UgqeF+_3ibq3HjwS><vcyUpJnXKH=_x;gE0hT4U$fOjlg%bRTQ?`+NQV
zQ*OoSbW4)Mr*f_*;Bk7qigC{A>+8Ne@Q5_P?Y+^yUHdz<RsQ5#iF|lXkB7Nl=gw7{
zdVXeQ-%8xa`vRT*Ue}5acd)Nxcy$*ayVVx#Y!63%LaE|ZHvf=r%N^#)TJPZ~b7-1R
z8%L&jw{&fjQ8vn(*!&i>*hM|Oo~2vU#t}X}ZCq@z!!9?k%2)8V`)GhPqE4QQ2fADy
z4s<C)<2-q{&NF=87Y(b%Sx)=<Bfb%tFF^M}*VS-T9Wh?zI$r<;Wqc@1NBG1&gs4U2
zzAk?*kJ1Vnq#+^?D?^b4ii#wr;sZR%ga0Rnc~ZV)q}51R<paj2YAB*c`IzyBk@iJG
zD(?ps78F<cHJF7WKHkssVlHZ&yobOF{B+ZN&&6uGA=c}{)DF$U61lK83(Md~Z0rC|
z*w~3b#ughZ;GeOvmquxyjoWZGPoQFUc#!8&de_EGLHg3h5~=j9jb-q+ZR`O4$Hq<y
z;GbZ{Q7FixHulmSZ?kb5Mfd~nwvwK#=xOaxO<PJ8@|i-u;>{*&X^?9Lu}5E6&L&H(
zR4bm-OXa0PUYm?fw9-5Dyk5E!w|sOVUa4fXOsSC5W|2V8W(!)eR5+}sDzU{%rMPi?
zTqG8JELF(i)3}XFq*IbA=+iiGhp2{riBeRcJY~$j0=q11YOt^@*Zya*2Yw5*Y|fV+
zX!RiPIe3?-jA$a8hL1&zCLS1N2dwj^$KC5K(^0G<jw&ixvj!<4Vh(85u0TiBEU-pJ
zbM7$Wq+lJRMboQ@AIdncI~CutkC{7>6DLx95k(XKllwJ=C6?L2PFC1OTvcj?W!%ck
U%LUx7>Qb_{RMXw|I4MH>3rdt+EdT%j

literal 0
HcmV?d00001

diff --git a/src/theme/font/iconfont.woff b/src/theme/font/iconfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..bfe5599671f9441ceebdc8afeac71d4f65a741c7
GIT binary patch
literal 1492
zcmY+Ec~Fx_7{)gwfRsQv0;F70?g7dvDTi_k2q?&X&U_&x2IUmw6v>BjMv!1R4M!=}
zat=&T#2N_qQ9*2LQO<yJsh|ibjuyIT`$u=?H~T)%zB}*i&byoF?&t_G01m-Ff#|_}
zi2p?&#Qz^oUOsjJU=Bgo1Y*~^$60sxGBAeTQK%gtzP=mICn%BR80ayej)(KzhsxNp
zGZD!&7;i(m0T3_~a(rAyr;@_}z_!CY0|-gHI<15bP3S#`S`nfyJcrGuN5&@sfP)f9
zLx^%~07OJnU>=SDwfF%7h8S8TISJOqsY87jqJohDAyMQ=D)by+U2j;o((iXckC^DV
zczE72m}3s{H1!QBN@7!xFa+U;7E&h2NPO&;2$_!{WCke2Q%=!RR6X#c*wHpdxVQ@K
za*hDVQ^UH0&wKXz%uuu#y<C5N4UfgzTVJ7F97Fntdw9Hl-sl5{46d&8rlFak_faM-
zYImL|(Ko}J00bIt1Os%#@xLXp2Uyc$3>EzG=wzb3;(!RdM}$9bAdD=wplNTO;eyZC
zaM2&yfiXjyZ6~lQXuFf+y6i;QlGYzd46q#^XH64j1zTk6hocD0jQb}8QIei?v+m!M
z<d4Tp)>Es8<;=~df(i=8GaG;6EG(;}OU%e5Cb6m4jH3UrA!c<?W>?--Pi$T{%cW?w
z*{9i}HN@-Md30G>345QLyekC9!Ul1&jl{R8jh&8VsBKL`7^4}hX0rIT%BTTieK%sF
zs%v3xCAH4opxhz-QmdM;TIszbHRsw-;u^EBC`g8uzt30JX$z=NVUHAC6|Jm$*iu{J
zUsWx()qYk+4^yD2KlIe&omj5!hY};(WhWc1<ji@JeKvP6@Fc0aUSZJEJFwCtBE);r
zz>V9qE-R-oRBt)nSWB%q-e;y}w&9mH-9D+eGe@vp`sKnL{YUT8p0R+=*_e&4;lmC$
zd=&ik7f4f|kb9C5tI34j7B7RQQs(WN8S@o#?8Q6FCAHgHYr?ZT9h=PJ6CH!YS-4)K
zcaJxS(}NwkQ(mdkuh?(u@+Gf6YnvL_^H2LUM49?H+SMv4a`yC%;Q_-fZid)Ar^uDa
zeo(e(Gn~`dQO2a{+{0&Eh*rMdbbi~Ca#cfo$4_mC_H)AKHo^Zw!0g_*6-T+*%T0tO
zrh6hTL}x5Jz;!-vUswtMM9Xv~ygxQ5jZYrckbTiv!94Q3ES%6Rp}d&;SFbmcW!YHi
zZQzb}&wh+K^QG?)1cW|5tgAe*HGPrFr;!2LC>%Dfy1K9BPb?clgT;k33$=l#v?%4j
z{4ed-3j}P6SQwdB3~<5=M8h5?BM5S7gvaY;<YA<$F`qvJ01`kRr~)$>_zM4h8wll4
z7(xXYO_gN<JE5$7#0m=}oiTB6{lc|hU9h&q%!ki4qx$V~>l76v?MZS?o+4;ntE=S8
zF&atkofJ(AjZ703tsWd|<!l+@+!LHc&{u}m^X74T<>{E<1yO;4Nxr^6Kcj&!H6C-W
z(`|q5eC8*5XP!ls-sGxvP{KqnbIGD*b5y}$iTwf-T_RYq+Zx=fVf9_<T6$1RVY;4Q
zteSkuIeK0RRoKg@J$R@xDKRTB*>P-1@4Bva?qzk-sa0xR#X8sMG&6E_&HiQKEtgx3
z>LtfIQt8)xnzrY;Yf+EB*DOR&shTfhb@0-ik46GN42H;azKOR$cS5Xl&6XwPzf#7(
zRFpCaYtr3ymQWjRB<qK1Qfi&=>`O~G2;TY7X;p5q<X(To^98qPwdeTzuoO3$6{VrA
zn@?i%tU~(AH9BZc4)RZ}J?@*TyGFd_m?~9wF{yL6dw^04U;FiPv{Sc=V~Wwiorf}j
zzR)X1J}Z}1&dOvJv+`M$Xj?|JaW^67NrTH4n!{B!X*1>+7h_!%j12);&&J2W5A7dm
CyJwOB

literal 0
HcmV?d00001

diff --git a/src/theme/index.less b/src/theme/index.less
index 2c3cc873..f36b3c9e 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -1,4 +1,5 @@
 @import "./variable.less";
+@import "./date.less";
 
 .layui-inline,
 img {