chore: 研发 date-picker 日期组件
This commit is contained in:
就眠儀式
parent
e6b7338d37
commit
0e39e81e5c
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
|
||||
@ -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: "图标选择器",
|
||||
|
||||
8
src/component/datePicker/index.ts
Normal file
8
src/component/datePicker/index.ts
Normal file
@ -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;
|
||||
419
src/component/datePicker/index.vue
Normal file
419
src/component/datePicker/index.vue
Normal file
@ -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>
|
||||
@ -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";
|
||||
export * from "./resolver";
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
160
src/theme/date.less
Normal file
160
src/theme/date.less
Normal file
@ -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;}
|
||||
BIN
src/theme/font/iconfont.eot
Normal file
BIN
src/theme/font/iconfont.eot
Normal file
Binary file not shown.
45
src/theme/font/iconfont.svg
Normal file
45
src/theme/font/iconfont.svg
Normal file
@ -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="" 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="" 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="" 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="" 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>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/theme/font/iconfont.ttf
Normal file
BIN
src/theme/font/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/theme/font/iconfont.woff
Normal file
BIN
src/theme/font/iconfont.woff
Normal file
Binary file not shown.
@ -1,4 +1,5 @@
|
||||
@import "./variable.less";
|
||||
@import "./date.less";
|
||||
|
||||
.layui-inline,
|
||||
img {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user