@livelybone/vue-datepicker

A vue datepicker, includes date, datetime, time

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

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

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

Timepicker

Name Type DefaultValue Description
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
timeStr Array ['时', '分', '秒'] Used to set time name
btnStr String 确定 Used to set text of button

Events

Name EmittedData Description
input String

style

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

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

GitHub