Vue Material 设计日期选择器 - vue-date-picker

Vue日期选择器组件。

安装:

$ npm install vue-md-date-picker --save

最常见的用例

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
/>

请注意，有一个v-if指令和一个@close事件。这是因为日期选择器允许您选择显示的时间以及如何关闭它。

设定最小日期以供选择

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
  min="2017-8-16"
/>

设置最大日期以供选择

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
  max="2017-8-24"
/>

设置日期范围以供选择

<date-picker
  v-if="show"
  v-model="date"
  @close="show = false"
  min="2017-8-16"
  max="2017-8-24"
/>

您还可以指定一种颜色来更改日期选择器的主题

<DatePicker
  color="#F44336"
  @close="show = false"
  v-if="show"
  v-model="date"
/>

如果要淡入日期选择器，还提供了一个过渡

<transition name="calendar-fade">
  <DatePicker
    @close="show = false"
    v-if="show"
    v-model="date"
  />
</transition>