vue项目中引入vue-datepicker插件的详解

引入 vue-datepicker 插件，主要需要以下几个步骤：

1. 安装 vue-datepicker 插件

使用 npm 或 yarn 安装该插件：

npm install vue-datepicker --save

# 或

yarn add vue-datepicker

2. 在 main.js 中注册插件

在 main.js 文件中添加如下代码：

import Vue from 'vue'
import DatePicker from 'vue-datepicker'

Vue.component('datepicker', DatePicker)

3. 在组件中使用 datepicker 组件

可以在任何 Vue 组件中使用该组件，只需要在 template 中使用 datepicker 标签，并且绑定 v-model 实现双向数据绑定。

<datepicker v-model="selectedDate" :format="dateFormat" :language="lang"></datepicker>

其中，selectedDate 是绑定的数据模型，dateFormat 和 lang 是可选的，用于配置日期格式和日期语言。

示例一：简单使用

<template>
  <div>
    <h2>日期选择器示例</h2>
    <datepicker v-model="selectedDate"></datepicker>
    <p>选择的日期是：{{ selectedDate }}</p>
  </div>
</template>

<script>
import DatePicker from 'vue-datepicker'

export default {
  name: 'DatePickerDemo',
  components: {
    DatePicker
  },
  data() {
    return {
      selectedDate: ''
    }
  }
}
</script>

在上述示例中，我们简单使用了 vue-datepicker 插件，将选择的日期绑定到 selectedDate 变量上，并打印出来。

示例二：自定义日期格式和语言

<template>
  <div>
    <h2>日期选择器示例</h2>
    <datepicker 
      v-model="selectedDate" 
      :format="dateFormat" 
      :language="lang"
    ></datepicker>
    <p>选择的日期是：{{ selectedDate }}</p>
  </div>
</template>

<script>
import DatePicker from 'vue-datepicker'
import 'vue-datepicker/dist/vue-datepicker.min.css'

export default {
  name: 'DatePickerDemo',
  components: {
    DatePicker
  },
  data() {
    return {
      selectedDate: '',
      dateFormat: 'yyyy-MM-dd',
      lang: {
        days: ['日', '一', '二', '三', '四', '五', '六'],
        months: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ],
        pickers: ['去年', '今年', '明年'],
        placeholder: {
          date: '选择日期',
          dateRange: '选择日期范围',
          dateTime: '选择日期时间',
          dateTimeRange: '选择日期时间范围'
        },
        clear: '清除',
        now: '当前',
        confirm: '确定',
        selectDate: '选择日期',
        selectTime: '选择时间',
        startDate: '开始日期',
        startTime: '开始时间',
        endDate: '结束日期',
        endTime: '结束时间',
        prevYear: '上一年',
        nextYear: '下一年',
        prevMonth: '上个月',
        nextMonth: '下个月',
        year: '年',
        month1: '1 月',
        month2: '2 月',
        month3: '3 月',
        month4: '4 月',
        month5: '5 月',
        month6: '6 月',
        month7: '7 月',
        month8: '8 月',
        month9: '9 月',
        month10: '10 月',
        month11: '11 月',
        month12: '12 月',
        // week: '周次',
        weeks: {
          sun: '日',
          mon: '一',
          tue: '二',
          wed: '三',
          thu: '四',
          fri: '五',
          sat: '六'
        },
        monthsShort: [
          '1 月',
          '2 月',
          '3 月',
          '4 月',
          '5 月',
          '6 月',
          '7 月',
          '8 月',
          '9 月',
          '10 月',
          '11 月',
          '12 月'
        ],
        // shortcuts: {
        //   preset1: '规定时间',
        //   preset2: '期间时间',
        //   preset3: '今天',
        //   preset4: '昨天',
        //   preset5: '上周',
        //   preset6: '上个月',
        //   preset7: '今年',
        //   preset8: '去年'
        // },
        // but there is no i18n in this project, so I leave the unused code here
        // pluralize: function (n) {
        //   if (n === 1)
        //     return 'singular';
        //   else
        //     return 'plural';
        // }
        firstDayOfWeek: 1
      }
    }
  }
}
</script>

在上述示例中，我们自定义了日期的格式和语言，将语言选项传到 lang 变量中，日期格式传到 dateFormat 变量中，然后在 datepicker 组件中进行配置。同时，我们还引入 vue-datepicker 的 CSS 文件进行样式的配置。