@livelybone/vue-datepicker

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@livelybone/vue-datepicker
4724.1.0a month ago3 years agoMinified + gzip package size for @livelybone/vue-datepicker in KB

Readme

@livelybone/vue-datepicker

NPM Version Download Month gzip with dependencies: 25kb typescript pkg.module

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:

  1. Clone the library git clone https://github.com/livelybone/vue-datepicker.git
  2. Go to the directory cd your-module-directory
  3. Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
  4. Open service npm run dev
  5. 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'

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

QA

  1. Error Error: spawn node-sass ENOENT

You may need install node-sass globally, npm i -g node-sass

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.