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

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