vue-datetime|基于Vue的日期时间选择器

vue-datetime是一个基于Vue的日期时间选择器，适用于移动设备。它支持日期、日期时间和时间模式，i18n和禁用日期等功能。

使用方法

安装

如果您想使用vue-datetime，首先您需要安装它，命令如下：

npm install --save luxon vue-datetime weekstart
// 或者使用yarn
yarn add luxon vue-datetime weekstart
		

注意：luxon请使用1.25.0版本，否则可能会出现问题。另外，weekstart是可选的它用于获取一周的第一天是哪一天。

使用

注册

import Vue from 'vue'
import { Datetime } from 'vue-datetime'
// You need a specific loader for CSS files
import 'vue-datetime/dist/vue-datetime.css'

Vue.use(Datetime)			
		

或者

import { Datetime } from 'vue-datetime';

Vue.component('datetime', Datetime);			
		

也可以局部注册使用

import { Datetime } from 'vue-datetime';

Vue.extend({
  template: '...',
  components: {
    datetime: Datetime
  }
});			
		

然后可以在vue组件中使用：

在浏览器页面中，通过下面的方法引入

<link rel="stylesheet" href="vue-datetime.css"></link>
<script src="vue.js"></script>
<script src="luxon.js"></script>
<script src="weekstart.js"></script>
<script src="vue-datetime.js"></script>	
		

此时，组件会自动被注册为<datetime>，如果你想用其它不同的名字，可以使用下面的方法：

Vue.component('vue-datetime', window.VueDatetime.Datetime);			
		

配置参数

下面是vue-datetime的配置参数，你可以在<datetime>标签中设置它们来自定义选择器的行为和外观。

• type: 选择器的模式，可以是date、datetime或time，默认是datetime
• format: 选择器的格式，可以是任何有效的Luxon格式字符串，默认是"yyyy-MM-dd HH:mm"
• zone: 选择器的时区，可以是任何有效的IANA时区字符串，默认是本地时区
• min-datetime: 选择器的最小可选日期时间，可以是一个Date对象或一个ISO字符串，默认是null
• max-datetime: 选择器的最大可选日期时间，可以是一个Date对象或一个ISO字符串，默认是null
• disabled-weekdays: 选择器的禁用星期，可以是一个包含0到6之间数字的数组，表示星期日到星期六，默认是空数组
• auto: 选择器是否自动关闭，默认是true
• input-class: 选择器的输入框样式类，默认是空字符串
• wrapper-class: 选择器的包裹元素样式类，默认是空字符串
• step: 选择器的时间步长，以分钟为单位，默认是1
• use12-hour: 选择器是否使用12小时制，默认是false
• input-id: 选择器的输入框id，默认是空字符串
• input-style: 选择器的输入框样式，默认是空对象
• hidden-name: 选择器的隐藏输入框name，默认是空字符串
• value-zone: 选择器的值时区，默认是本地时区
• phrases: 选择器的自定义短语对象，默认是空对象
• hour-step: 选择器的小时步长，以小时为单位，默认是1
• minute-step: 选择器的分钟步长，以分钟为单位，默认是1
• week-start: 选择器的星期开始日，可以是0到6之间的数字，表示星期日到星期六，默认是0
• flow: 选择器的流程控制函数，默认是null
• title: 选择器的标题文本，默认是"Select Date"
• hide-backdrop: 是否隐藏背景遮罩层，默认是false
• backdrop-click: 是否允许点击背景遮罩层关闭选择器，默认是true

github网址：https://github.com/mariomka/vue-datetime