Vue 日期选择框之时间范围的使用介绍

在 Vue 中，使用日期选择框可以方便用户选择时间。在某些场景下，我们需要选择起始时间和截止时间之间的时间段。本文将介绍如何在 Vue 中使用日期时间范围选择框。

引入组件

Vue.Datepicker 组件是一个支持时间范围选择的日期选择框组件。我们可以通过代码库或者 CDN 引入该组件。

<!-- 通过 CDN 引入 -->
<link rel="stylesheet" href="https://unpkg.com/vue-datepicker/dist/vue-datepicker.css">
<script src="https://unpkg.com/vue-datepicker@1.6.1"></script>

<!-- 通过 npm 引入 -->
npm install vue-datepicker --save

使用组件

在 Vue 中使用日期时间范围选择框组件需要先注册组件，以及在模板中使用该组件。

注册组件

可以在 Vue 单文件组件或者全局注册组件中注册 Datepicker 组件。

// 全局注册组件
import Vue from 'vue'
import Datepicker from 'vue-datepicker'

Vue.component('v-datepicker', Datepicker)

// 单文件组件中注册组件
<script>
import Datepicker from 'vue-datepicker'

export default {
  components:{
    Datepicker
  }
}
</script>

在模板中使用组件

通过 v-model 可以将日期选择框的值绑定到 Vue 实例的数据属性上。

<template>
  <div>
    <h2>时间范围选择</h2>
    <div>
      <label>开始时间</label>
      <v-datepicker v-model="startTime"></v-datepicker>
    </div>
    <div>
      <label>结束时间</label>
      <v-datepicker v-model="endTime"></v-datepicker>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      startTime: null,
      endTime: null
    }
  }
}
</script>

时间范围选择

在 Vue 中，Datepicker 组件提供了丰富的属性用于自定义时间范围的选择。

选择时间范围

通过 min-date 和 max-date 属性可以限制用户选择的时间范围。例如，如果需要让用户在 2021 年 6 月 1 日至 2021 年 6 月 30 日之间选择，则可以这样使用：

<template>
  <div>
    <label>开始时间</label>
    <v-datepicker v-model="startTime" :min-date="minDate" :max-date="maxDate"></v-datepicker>

    <label>结束时间</label>
    <v-datepicker v-model="endTime" :min-date="startTime" :max-date="maxDate"></v-datepicker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      startTime: null,
      endTime: null,
      minDate: new Date(2021,5,1), //2021年6月1日
      maxDate: new Date(2021,5,30) //2021年6月30日
    }
  }
}
</script>

时间格式化

Vue 中的 Datepicker 组件默认使用 yyyy-MM-dd 格式，如果需要使用其他格式，可以通过 format 属性自定义格式。例如：

<template>
  <div>
    <label>开始时间</label>
    <v-datepicker v-model="startTime" :format="yyyy/MM/dd"></v-datepicker>

    <label>结束时间</label>
    <v-datepicker v-model="endTime"></v-datepicker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      startTime: null,
      endTime: null,
    }
  }
}
</script>

示例

下面通过两个示例，演示如何在 Vue 中使用时间范围选择框。

示例一：选择时间段

查看演示

<template>
  <div>
    <label>开始时间</label>
    <v-datepicker v-model="startTime" :min-date="minDate" :max-date="endTime"></v-datepicker>

    <label>结束时间</label>
    <v-datepicker v-model="endTime" :min-date="startTime" :max-date="maxDate"></v-datepicker>

    <p>您选择了: {{ startTime }} 至 {{ endTime }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      startTime: null,
      endTime: null,
      minDate: new Date(2021,5,1), //2021年6月1日
      maxDate: new Date(2021,5,30) //2021年6月30日
    }
  }
}
</script>

示例二：日期时间格式化