datepicker-nash-travel

Installation

npm i -S @d.blizen/datepicker-nash-travel

Usage

import { Datepicker, Timepicker, DatetimePicker, DateRangePicker } from '@d.blizen/datepicker-nash-travel';

// 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 '@d.blizen/datepicker-nash-travel'

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