123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <template>
- <div class="date-temp">
- <span class="arrow-left" @click="pickerChangeLeft"></span>
- <span class="arrow-line arrow-line1" @click="pickerChangeLeft"></span>
- <el-date-picker v-model="pickerVal" type="date" format="yyyy.MM.dd" value-format="yyyy.MM.dd"></el-date-picker>
- <span class="arrow-line" @click="pickerChangeRight"></span>
- <span class="arrow-right" @click="pickerChangeRight"></span>
- </div>
- </template>
- <script>
- var moment = require("moment");
- import "moment/locale/zh-cn";
- export default {
- data() {
- return {
- pickerVal: new Date()
- };
- },
- props: ["date"],
- methods: {
- formatter(date) {
- return moment.unix(date / 1000).format("YYYYMMDD");
- },
- formatterStr2(str) {
- if (str) {
- return str.substring(0, 2) + "" + str.substring(3, 5);
- }
- },
- pickerChangeLeft() {
- if (this.pickerVal) {
- let dateTime = new Date(this.pickerVal);
- let newData = this.formatter(
- new Date(dateTime.setDate(dateTime.getDate() - 1))
- );
- this.pickerVal =
- newData.slice(0, 4) +
- "." +
- newData.slice(4, 6) +
- "." +
- newData.slice(6, 8);
- }
- this.$emit("pickerVal", this.pickerVal);
- },
- pickerChangeRight() {
- if (this.pickerVal) {
- let dateTime = new Date(this.pickerVal);
- let newData = this.formatter(
- new Date(dateTime.setDate(dateTime.getDate() + 1))
- );
- this.pickerVal =
- newData.slice(0, 4) +
- "." +
- newData.slice(4, 6) +
- "." +
- newData.slice(6, 8);
- }
- this.$emit("pickerVal", this.pickerVal);
- },
- formatterStr(str) {
- if (str) {
- return (
- str.substring(0, 4) +
- "." +
- str.substring(4, 6) +
- "." +
- str.substring(6, 8)
- );
- }
- }
- },
- mounted() {
- if (this.date) {
- this.pickerVal = this.formatterStr(
- new Date().getFullYear() + this.formatterStr2(this.date)
- );
- this.$emit("pickerVal", this.pickerVal);
- }
- }
- };
- </script>
- <style lang="scss">
- .date-temp {
- background: rgba(255, 255, 255, 1);
- border-radius: 4px;
- border: 1px solid rgba(195, 198, 203, 1);
- display: flex;
- align-items: center;
- .arrow-left {
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-right: 5px solid #9ca2a9;
- margin-right: 5px;
- margin-left: 7px;
- cursor: pointer;
- }
- .arrow-right {
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-left: 5px solid #9ca2a9;
- margin-right: 7px;
- margin-left: 5px;
- cursor: pointer;
- }
- .arrow-line {
- display: inline-block;
- width: 2px;
- height: 16px;
- background: rgba(228, 229, 231, 1);
- }
- .arrow-line1 {
- margin-right: 3.5px;
- }
- }
- </style>
- <style lang="scss">
- .date-temp {
- text-align: center;
- .el-input__inner {
- width: 93px !important;
- margin: 7px 6px;
- height: 22px;
- line-height: 22px;
- border: none;
- }
- .el-input__icon {
- display: none;
- }
- .el-input--prefix .el-input__inner {
- padding-left: 5px;
- }
- .el-input--suffix .el-input__inner {
- padding-right: 5px;
- }
- }
- </style>
|