Vue Datepicker组件选择了日期和时间

@ livelybone / vue-datepicker (@livelybone/vue-datepicker)

A vue datepicker, includes date, datetime, time

Vue日期选择器，包括日期，日期时间，时间

pkg.module supported, which means that you can apply tree-shaking in you project

支持pkg.module，这意味着您可以在项目中应用摇树

View demo 查看演示 View Github 查看Github

安装 (Installation)

npm i -S @livelybone/vue-datepicker

寄存器 (Register)

// import all
import {Datepicker, Timepicker, DatetimePicker} from '@livelybone/vue-datepicker';
// or
import * as VueDatepicker from '@livelybone/vue-datepicker';

// Global register
Vue.component('datepicker', Datepicker);
Vue.component('timepicker', Timepicker);
Vue.component('datetime-picker', DatetimePicker);

// Local register
new Vue({
  components:{Datepicker, Timepicker, DatetimePicker}
})

Use in html, see what your can use in CDN: unpkg

在html中使用，查看可以在CDN中使用的内容：unpkg

<-- use what you want -->
<script src="https://unpkg.com/@livelybone/vue-datepicker/lib/umd/<--module-->.js"></script>

道具 (Props)

共同 (Common)

Name	Type	DefaultValue	Description
id	[String, Number]	none
value	[String, Number]	none
placeholder	String	none
min	String	none	Min
max	String	none	Max
canEdit	Boolean	true	If it can be changed
inputStyle	Object	none	Style of input tag
popperProps	Object	defaultPopperProps	Props of module @livelybone/vue-popper
scrollbarProps	Object	{ isMobile: false, maxHeight: 200 }	Props of scrollbar, see vue-scrollbar-live

名称	类型	默认值	描述
id	[String, Number]	没有
value	[String, Number]	没有
placeholder	String	没有
min	String	没有	敏
max	String	没有	最高
canEdit	Boolean	true	如果可以更改
inputStyle	Object	没有	输入标签样式
popperProps	Object	defaultPopperProps	模块@ livelybone / vue-popper的道具
scrollbarProps	Object	{ isMobile: false, maxHeight: 200 }	滚动条的属性，请参见vue-scrollbar-live

const defaultPopperProps = {
  arrowPosition: 'start',
  arrowOffsetScaling: 1,
  popperOptions: {
    placement: 'bottom-start',
    positionFixed: true,
    // more options in https://popper.js.org
  },
}

日期选择器 (Datepicker)

Name	Type	DefaultValue	Description
dayStr	Array	['日', '一', '二', '三', '四', '五', '六']	Used to set day name

名称	类型	默认值	描述
dayStr	Array	['日', '一', '二', '三', '四', '五', '六']	用于设置日期名称

时间选择器 (Timepicker)

Name	Type	DefaultValue	Description
timeStr	Array	['时', '分', '秒']	Used to set time name
btnStr	String	确定	Used to set text of button

名称	类型	默认值	描述
timeStr	Array	['时', '分', '秒']	用于设置时间名称
btnStr	String	确定	用于设置按钮的文字

日期时间选择器 (DatetimePicker)

Name	Type	DefaultValue	Description
dayStr	Array	['日', '一', '二', '三', '四', '五', '六']	Used to set day name
timeStr	Array	['时', '分', '秒']	Used to set time name
btnStr	String	确定	Used to set text of button

名称	类型	默认值	描述
dayStr	Array	['日', '一', '二', '三', '四', '五', '六']	用于设置日期名称
timeStr	Array	['时', '分', '秒']	用于设置时间名称
btnStr	String	确定	用于设置按钮的文字

大事记 (Events)

Name	EmittedData	Description
input	String

名称	发射数据	描述
input	String

样式 (style)

For building style, you can use the css or scss file in lib directory.

对于构建样式，可以使用lib目录中的css或scss文件。

// scss
import 'node_modules/@livelybone/vue-datepicker/lib/css/index.scss'

// css
import 'node_modules/@livelybone/vue-datepicker/lib/css/index.css'

Or

要么

// scss
@import 'node_modules/@livelybone/vue-datepicker/lib/css/index.scss';

// css
@import 'node_modules/@livelybone/vue-datepicker/lib/css/index.css';

Or, you can build your custom style by copying and editing index.scss

或者，您可以通过复制和编辑index.scss来构建自定义样式。

翻译自: https://vuejsexamples.com/a-vue-datepicker-component-chose-date-and-time/