@livelybone/vue-datepicker NPM

@livelybone/vue-datepicker

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

中文文档

A vue component of datepicker, includes DatePicker, DatetimePicker, DateRangePicker, TimePicker

repository

https://github.com/livelybone/vue-datepicker.git

Demo

https://livelybone.github.io/vue/vue-datepicker/

Run Example

Your can see the usage by run the example of the module, here is the step:

Clone the library git clone https://github.com/livelybone/vue-datepicker.git
Go to the directory cd your-module-directory
Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
Open service npm run dev
See the example(usually is http://127.0.0.1:3000/examples/test.html) in your browser

Installation

npm i -S @livelybone/vue-datepicker

Global name - The variable the module exported in `umd` bundle

VueDatepicker

Interface

See what method or params you can use in index.d.ts

Usage

import { Datepicker, Timepicker, DatetimePicker, DateRangePicker } from '@livelybone/vue-datepicker';

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

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

when you want to set this module as external while you are developing another module, you should import it like this:

import * as VueDatepicker  from '@livelybone/vue-datepicker'

// then use it by need

Use in html, see what your can use in 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`	`请选择`
`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

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
`monthStr`	`Array`	`['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']`	Used to set month name
`multiple`	`Boolean`	`false`
`type`	`String`	`date`	Options: `year`,`month`,`date`
`firstDayOfWeek`	`Number`	`0`	Used to set the first day of week. Options: 0, 1, 2, 3, 4, 5, 6
`btnStr`	`String`	`确定`	Used to set text of button

Timepicker

Name	Type	DefaultValue	Description
`type`	`String`	`second`	Options: `hour`,`minute`,`second`
`timeStr`	`Array`	`['时', '分', '秒']`	Used to set time name
`btnStr`	`String`	`确定`	Used to set text of button

DatetimePicker

Name	Type	DefaultValue	Description
`dayStr`	`Array`	`['日', '一', '二', '三', '四', '五', '六']`	Used to set day name
`monthStr`	`Array`	`['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']`	Used to set month name
`timeStr`	`Array`	`['时', '分', '秒']`	Used to set time name
`btnStr`	`String`	`确定`	Used to set text of button
`firstDayOfWeek`	`Number`	`0`	Used to set the first day of week. Options: 0, 1, 2, 3, 4, 5, 6
`timeType`	`String`	`second`	Options: `hour`,`minute`,`second`

DateRangePicker

Name	Type	DefaultValue	Description
`value`	`Array`	`[null, null]`	Used to set day name
`dayStr`	`Array`	`['日', '一', '二', '三', '四', '五', '六']`	Used to set day name
`monthStr`	`Array`	`['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']`	Used to set month name
`btnStr`	`String`	`确定`	Used to set text of button
`firstDayOfWeek`	`Number`	`0`	Used to set the first day of week. Options: 0, 1, 2, 3, 4, 5, 6
`secondPlaceholder`	`String`	`请选择结束`
`rangeSeparator`	`String`	`至`

Events

Name	EmittedData	Description
`input`	`String`

style

For building style, you may need to import the css or scss file:

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

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

// 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, editing and importing node_modules/@livelybone/vue-datepicker/lib/css/index.scss