vue2好用的日期选择插件vue2-datepicker

中文文档：vue2-datepicker/README.zh-CN.md at master · mengxiong10/vue2-datepicker · GitHub

npm下载地址：

npm install vue2-datepicker --save

示例（去除默认样式）

<style scoped>
.datePicker{
  width: 15vw;
  background-color: none;
  margin: 0 auto;

}
>>>.datePicker .mx-input-wrapper{
  padding: 0;
  border: none;
}

>>>.datePicker .mx-input{
  padding: 0;
  border: none !important;
  box-shadow:none !important;

}
>>>.datePicker .mx-input-wrapper input {
  text-align: right;
  color: #01c6fe;
  background: none;
}
>>>.datePicker .mx-input-wrapper input::placeholder {
  color: #01c6fe; 
}
>>>.datePicker .mx-icon-calendar{
  display: none !important; /* 右边图标隐藏 */
}
</style>
<template>
  <div class="box" style="width: 100%;height: 100vh;background-color: pink;">
    <div>{{ value2 }}</div>
    <section>
    
      <date-picker
      @close="datePickerblur"
      class="datePicker"
      :editable="false"
        v-model="value2"
        value-type="format" format="YYYY-MM-DD"
        :clearable="false"
        range
        placeholder="日期选择"
      ></date-picker>
    </section>
  </div>
</template>
 
<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/zh-cn'; // 中文

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      value2: [],
    };
  },
  methods: {
    datePickerblur() {
      console.log('选择的日期值为：', this.value2);
    }
  }
};
</script>

打开

选择后