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

example/docs/zh-CN/guide/changelog.md

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

src/component/datePicker/index.vue

@@ -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
+            <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time"
-              v-if="type === 'datetime'"
+              >选择时间</span
-              @click="showPane = '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="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 @click="showPane = 'date'" class="laydate-btns-time"
-              >返回</span
+              >返回日期</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 {
+import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
-  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;
-  let momentVal = "";
+  let momentObj = moment(currentDay.value)
-  if(props.type === 'datetime') {
+    .hour(hms.value.hh)
-    momentVal = momentObj.format('YYYY-MM-DD hh:mm:ss')
+    .minute(hms.value.mm)
-  } else if(props.type === 'date') {
+    .second(hms.value.ss);
-    momentVal = momentObj.format('YYYY-MM-DD');
+  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) => {

src/theme/date.less

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