vue日期选择器移动端_适用于Vue的移动友好日期时间选择器

vue日期选择器移动端

约会时间 (vue-datetime)

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Vue的移动友好日期时间选择器。支持日期，日期时间和时间模式，i18n和禁用日期。

NOTICE: This README is related to next version (1.x) of vue-datetime.

注意：本自述文件与vue-datetime的下一版本(1.x)相关。

View demo 查看演示 Download Source 下载源

去做 (TODO)

v1.x currently support most of v0.x functionality but it's still behind.

v1.x当前支持v0.x的大部分功能，但仍然落后。

Old features not yet implemented:

尚未实现的旧功能：

Disabled dates
禁用日期
Time picker (Not sure if it will be implemented)
时间选择器(不确定是否将实现)

安装 (Installation)

Bundler(Webpack，汇总...) (Bundler (Webpack, Rollup...))

yarn add luxon vue-datetime weekstart

要么

npm install --save luxon vue-datetime weekstart

weekstart is optional, is used to get the first day of the week.

weekstart是可选的，用于获取一周的第一天。

寄存器 (Register)

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)

手动注册 (Register manually)

全球 (Global)

import { Datetime } from 'vue-datetime';

Vue.component('datetime', Datetime);

本地 (Local)

import { Datetime } from 'vue-datetime';

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

浏览器 (Browser)

Download vue, luxon, weekstart and vue-datetime or use a CDN like unpkg.

下载vue，luxon，weekstart和vue-datetime，或使用unpkg之类的CDN。

<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>

weekstart is optional, is used to get the first day of the week.

weekstart是可选的，用于获取一周的第一天。

用法 (Usage)

最小的 (Minimal)

<datetime v-model="date"></datetime>

建立 (Setup)

参量 (Parameters)

Parameter	Type	Default	Description
v-model (required)	ISO 8601 `String`	-	Datetime.
type	`String`	`date`	Picker type. date or datetime.
input-class	`String`	`''`	Class for the input.
value-zone	`String`	`UTC`	Time zone for the value.
zone	`String`	`local`	Time zone for the picker.
format	`String`	`DateTime.DATE_MED` or `DateTime.DATETIME_MED`	Input date format.
phrases	`Object`	`{ok: 'Ok', cancel: 'Cancel'}`	Phrases.
hour-step	`Number`	`1`	Hour step.
minute-step	`Number`	`1`	Minute step.
min-datetime	ISO 8601 `String`	`null`	Minimum datetime.
max-datetime	ISO 8601 `String`	`null`	Maximum datetime.
auto	`Boolean`	`false`	Auto continue/close on select.
week-start	`Number`	auto from locale if weekstart is available or `1`	First day of the week. 1 is Monday and 7 is Sunday.

参数	类型	默认	描述
v模型( 必填 )	ISO 8601 `String`	--	约会时间。
类型	`String`	`date`	选择器类型。日期或日期时间。
输入类	`String`	`''`	输入的类。
价值区	`String`	`UTC`	值的时区。
区	`String`	`local`	选择器的时区。
格式	`String`	`DateTime.DATE_MED`或`DateTime.DATETIME_MED`	输入日期格式。
词组	`Object`	`{ok: 'Ok', cancel: 'Cancel'}`	短语。
时步	`Number`	`1`	小时的步骤。
分钟步	`Number`	`1`	分钟。
最小日期时间	ISO 8601 `String`	`null`	最小日期时间。
最大日期时间	ISO 8601 `String`	`null`	最大日期时间。
汽车	`Boolean`	`false`	选择后自动继续/关闭。
周开始	`Number`	如果可以使用Weekstart，则自动从区域设置中获取；或者`1`	一周的第一天。 1是星期一，7是星期日。

Input inherits all props not defined above but style and class will be inherited by root element.

输入继承了上面没有定义的所有道具，但是style和class将被根元素继承。

国际化 (Internationalization)

Date internationalization depends on luxon. Set the default locale.

日期国际化取决于luxon。设置默认语言环境。

import { Settings } from 'luxon'

Settings.defaultLocale = 'es'

大事记 (Events)

Component emits the input event to work with v-model. More info.

组件发出input事件以使用v-model 。更多信息。

Also, input text inherits all component events.

同样，输入文本继承所有组件事件。

主题化 (Theming)

Theming is supported by overwriting CSS classes.

覆盖CSS类可支持主题化。

发展历程 (Development)

启动皮棉和测试 (Launch lint and tests)

yarn test

启动视觉测试 (Launch visual tests)

yarn dev

建立 (Build)

Bundle the js and css to the dist folder:

将js和css捆绑到dist文件夹：

yarn build

翻译自: https://vuejsexamples.com/mobile-friendly-datetime-picker-for-vue/

vue日期选择器移动端