时间选择器

src/views/cockpit/datePicker.vue

@@ -18,8 +18,11 @@
 
 <script>
 const nowYear = new Date().getFullYear();
-const nowMonth = new Date().getMonth() + 1;
-const nowDay = new Date().getDate();
+const nowMonth = new Date().getMonth() + 1 + "";
+const nowDay = new Date().getDate() + "";
+function setdata(time) {
+  return `${time.length == 1 ? "0" : ""}${time}`;
+}
 export default {
   data() {
     return {
@@ -60,11 +63,13 @@ export default {
         ],
       },
       // dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`]
-      dateValue: [`${nowYear}0101`, new Date().format("yyyyMMdd")],
+      dateValue: [
+        `${nowYear}0101`,
+        `${nowYear}${setdata(nowMonth)}${setdata(nowDay)}`,
+      ],
     };
   },
   mounted() {
-    console.log(this.dateValue)
     this.dateChange();
   },
   methods: {
@@ -87,112 +92,5 @@ export default {
   padding: 0;
   width: 180px !important;
 }
-
-.el-date-editor .el-range__close-icon {
-  display: none;
-}
-
-.el-picker-panel__sidebar {
-  background: #002446;
-  border-color: rgba(37, 103, 141, 0.46);
-  border-radius: 6px 0 0 6px;
-
-  .el-picker-panel__shortcut {
-    color: rgba(255, 255, 255, 1);
-  }
-}
-
-//// 时间选择器  通用样式
-.el-date-editor--daterange.el-input__inner {
-  width: 200px;
-  background: #002446;
-}
-
-.el-date-editor .el-range-separator {
-  padding: 0;
-  height: 78%;
-}
-
-.el-date-editor .el-range__close-icon {
-  line-height: 23px;
-}
-
-.el-date-editor .el-range__icon {
-  line-height: 22px;
-}
-
-.el-date-picker__header-label {
-  color: #fff;
-}
-
-.el-range-input {
-  background: #002446;
-  font-size: 12px;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 1);
-}
-
-.el-range-separator {
-  line-height: 20px !important;
-  color: rgba(255, 255, 255, 1) !important;
-}
-
-.el-date-editor .el-range-input {
-  font-size: 12px;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 1);
-}
-
-.el-picker-panel,
-.el-time-panel {
-  background: #002446 !important;
-  border: 1px solid rgba(37, 103, 141, 0.46);
-  color: #fff;
-  border-radius: 6px;
-}
-
-.el-time-spinner__item {
-  color: #fff;
-
-  &.active:not(.disabled) {
-    color: #fff;
-  }
-
-  &:hover {
-    background: transparent !important;
-    color: rgb(64, 158, 255); //#3B5064
-  }
-}
-
-.el-date-range-picker__content.is-left {
-  border-right: 1px solid rgba(37, 103, 141, 0.46);
-  color: #fff;
-}
-
-.el-date-table td.in-range div,
-.el-date-table td.in-range div:hover,
-.el-date-table.is-week-mode .el-date-table__row.current div,
-.el-date-table.is-week-mode .el-date-table__row:hover div {
-  background: rgba(23, 94, 165, 0.31) !important;
-}
-
-.el-date-table th {
-  color: #fff;
-}
-
-.el-date-table td.next-month,
-.el-date-table td.prev-month {
-  color: #747985;
-}
-
-// 选择器箭头方向
-.el-input__suffix-inner .el-icon-arrow-down:before {
-  content: " ";
-  border-top: 8px solid #64daff !important;
-  border-bottom: 8px solid transparent !important;
-  border-left: 5.5px solid transparent !important;
-  border-right: 5.5px solid transparent !important;
-  position: relative;
-  top: 12px;
-}
+@import "../cockpitNew1/datePicker.scss";
 </style>

src/views/cockpitNew1/datePicker.vue

@@ -18,8 +18,11 @@
 
 <script>
 const nowYear = new Date().getFullYear();
-const nowMonth = new Date().getMonth() + 1;
-const nowDay = new Date().getDate();
+const nowMonth = new Date().getMonth() + 1 + "";
+const nowDay = new Date().getDate() + "";
+function setdata(time) {
+  return `${time.length == 1 ? "0" : ""}${time}`;
+}
 export default {
   data() {
     return {
@@ -60,7 +63,10 @@ export default {
         ],
       },
       // dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`]
-      dateValue: [`${nowYear}0101`, new Date().format("yyyyMMdd")],
+      dateValue: [
+        `${nowYear}0101`,
+        `${nowYear}${setdata(nowMonth)}${setdata(nowDay)}`,
+      ],
     };
   },
   mounted() {
@@ -68,7 +74,6 @@ export default {
   },
   methods: {
     dateChange() {
-      console.log(this.dateValue)
       this.$emit("dateChange", this.dateValue);
       store.setCockpitDate(this.dateValue);
     },