dateTemp.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <div class="date-temp">
  3. <span class="arrow-left" @click="pickerChangeLeft"></span>
  4. <span class="arrow-line arrow-line1" @click="pickerChangeLeft"></span>
  5. <el-date-picker v-model="pickerVal" type="date" format="yyyy.MM.dd" value-format="yyyy.MM.dd"></el-date-picker>
  6. <span class="arrow-line" @click="pickerChangeRight"></span>
  7. <span class="arrow-right" @click="pickerChangeRight"></span>
  8. </div>
  9. </template>
  10. <script>
  11. var moment = require("moment");
  12. import "moment/locale/zh-cn";
  13. export default {
  14. data() {
  15. return {
  16. pickerVal: new Date()
  17. };
  18. },
  19. props: ["date"],
  20. methods: {
  21. formatter(date) {
  22. return moment.unix(date / 1000).format("YYYYMMDD");
  23. },
  24. formatterStr2(str) {
  25. if (str) {
  26. return str.substring(0, 2) + "" + str.substring(3, 5);
  27. }
  28. },
  29. pickerChangeLeft() {
  30. if (this.pickerVal) {
  31. let dateTime = new Date(this.pickerVal);
  32. let newData = this.formatter(
  33. new Date(dateTime.setDate(dateTime.getDate() - 1))
  34. );
  35. this.pickerVal =
  36. newData.slice(0, 4) +
  37. "." +
  38. newData.slice(4, 6) +
  39. "." +
  40. newData.slice(6, 8);
  41. }
  42. this.$emit("pickerVal", this.pickerVal);
  43. },
  44. pickerChangeRight() {
  45. if (this.pickerVal) {
  46. let dateTime = new Date(this.pickerVal);
  47. let newData = this.formatter(
  48. new Date(dateTime.setDate(dateTime.getDate() + 1))
  49. );
  50. this.pickerVal =
  51. newData.slice(0, 4) +
  52. "." +
  53. newData.slice(4, 6) +
  54. "." +
  55. newData.slice(6, 8);
  56. }
  57. this.$emit("pickerVal", this.pickerVal);
  58. },
  59. formatterStr(str) {
  60. if (str) {
  61. return (
  62. str.substring(0, 4) +
  63. "." +
  64. str.substring(4, 6) +
  65. "." +
  66. str.substring(6, 8)
  67. );
  68. }
  69. }
  70. },
  71. mounted() {
  72. if (this.date) {
  73. this.pickerVal = this.formatterStr(
  74. new Date().getFullYear() + this.formatterStr2(this.date)
  75. );
  76. this.$emit("pickerVal", this.pickerVal);
  77. }
  78. }
  79. };
  80. </script>
  81. <style lang="scss">
  82. .date-temp {
  83. background: rgba(255, 255, 255, 1);
  84. border-radius: 4px;
  85. border: 1px solid rgba(195, 198, 203, 1);
  86. display: flex;
  87. align-items: center;
  88. .arrow-left {
  89. width: 0;
  90. height: 0;
  91. border-top: 5px solid transparent;
  92. border-bottom: 5px solid transparent;
  93. border-right: 5px solid #9ca2a9;
  94. margin-right: 5px;
  95. margin-left: 7px;
  96. cursor: pointer;
  97. }
  98. .arrow-right {
  99. width: 0;
  100. height: 0;
  101. border-top: 5px solid transparent;
  102. border-bottom: 5px solid transparent;
  103. border-left: 5px solid #9ca2a9;
  104. margin-right: 7px;
  105. margin-left: 5px;
  106. cursor: pointer;
  107. }
  108. .arrow-line {
  109. display: inline-block;
  110. width: 2px;
  111. height: 16px;
  112. background: rgba(228, 229, 231, 1);
  113. }
  114. .arrow-line1 {
  115. margin-right: 3.5px;
  116. }
  117. }
  118. </style>
  119. <style lang="scss">
  120. .date-temp {
  121. text-align: center;
  122. .el-input__inner {
  123. width: 93px !important;
  124. margin: 7px 6px;
  125. height: 22px;
  126. line-height: 22px;
  127. border: none;
  128. }
  129. .el-input__icon {
  130. display: none;
  131. }
  132. .el-input--prefix .el-input__inner {
  133. padding-left: 5px;
  134. }
  135. .el-input--suffix .el-input__inner {
  136. padding-right: 5px;
  137. }
  138. }
  139. </style>