theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 进一步完善 date-picker 组件

Browse Source
This commit is contained in:
就眠儀式 2022-03-27 14:05:14 +08:00
parent a3d9326459
commit 1d55131fbc
3 changed files with 52 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/docs/zh-CN/guide/changelog.md
View File

@ -19,6 +19,7 @@
<li>[新增] date-picker 组件 name 属性, 等同原生 name 属性。</li>
<li>[新增] date-picker 组件 type 属性 date 值, 支持日期选择。 </li>
<li>[新增] date-picker 组件 type 属性 datetime 值, 支持日期时间选择。</li>
<li>[新增] date-picker 组件 now 操作, 将日期重置为当前。</li>
<li>[修复] menu 组件 level 属性的语义与实际功能相悖。</li>
<li>[修复] input 组件 height 高度固定 38 px。</li>
<li>[修复] step 组件 line 样式。</li>

81
src/component/datePicker/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<lay-dropdown>
<lay-input :name="name" :value="dateValue || modelValue" readonly >
<lay-input :name="name" :value="dateValue || modelValue" readonly>
<template #prefix>
<lay-icon type="layui-icon-date"></lay-icon>
<lay-icon type="layui-icon-date"></lay-icon>
</template>
</lay-input>
<template #content>
@ -73,18 +73,12 @@
</div>
</div>
<div class="layui-laydate-footer">
<span
v-if="type === 'datetime'"
@click="showPane = 'time'"
class="layui-laydate-preview"
style="color: rgb(102, 102, 102)"
<span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time"
>选择时间</span
>
{{ `${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="now" class="laydate-btns-now" @click="now">现在</span
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
</div>
</div>
@ -126,7 +120,7 @@
>
<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="now" class="laydate-btns-now" @click="now">现在</span
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
</div>
</div>
@ -180,7 +174,7 @@
>
<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="now" class="laydate-btns-now" @click="now">现在</span
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
</div>
</div>
@ -219,12 +213,12 @@
</div>
</div>
<div class="layui-laydate-footer">
<span @click="showPane = 'date'" class="layui-laydate-preview"
>返回</span
<span @click="showPane = 'date'" class="laydate-btns-time"
>返回日期</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="now" class="laydate-btns-now" @click="now">现在</span
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
</div>
</div>
@ -235,16 +229,9 @@
</template>
<script lang="ts" setup>
import {
computed,
nextTick,
ref,
watch,
defineProps,
defineEmits
} from "vue";
import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
import moment from 'moment';
import moment from "moment";
import LayIcon from "../icon/index";
import LayInput from "../input/index.vue";
import LayDropdown from "../dropdown/index.vue";
@ -296,12 +283,27 @@ const showPane = ref("date");
// 计算结果日期
const dateValue = computed<string>(() => {
let momentObj = moment(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss);
let momentVal = "";
if(props.type === 'datetime') {
momentVal = momentObj.format('YYYY-MM-DD hh:mm:ss')
} else if(props.type === 'date') {
momentVal = momentObj.format('YYYY-MM-DD');
let momentVal;
let momentObj = moment(currentDay.value)
.hour(hms.value.hh)
.minute(hms.value.mm)
.second(hms.value.ss);
switch(props.type)
{
case 'date':
momentVal = momentObj.format("YYYY-MM-DD");
break;
case 'datetime':
momentVal = momentObj.format("YYYY-MM-DD hh:mm:ss");
break;
case 'year':
momentVal = momentObj.format("YYYY");
break;
case 'month':
momentVal = momentObj.format("MM");
break;
default:
momentVal = momentObj.format();
}
$emits("update:modelValue", momentVal);
return momentVal;
@ -362,12 +364,25 @@ watch(
const handleDayClick = (item: any) => {
currentDay.value = item.value;
if (item.type !== "current") {
currentMonth.value = item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
currentMonth.value =
item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
}
};
// 确认事件
const ok = () => {};
const ok = () => {
};
// 现在时间
const now = () => {
currentDay.value = moment().valueOf();
}
// 清空日期
const clear = () => {
}
// 切换年月
const changeYearOrMonth = (type: "year" | "month", num: number) => {

6
src/theme/date.less
View File

@ -22,7 +22,7 @@
/* 主体结构 */
.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{ z-index: 66666666; 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,
@ -92,7 +92,7 @@
.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-hint{ top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
/* 双日历 */
@ -103,7 +103,7 @@
/* 默认简约主题 */
.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, .layui-laydate-hint{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;}