4.0.7 • Published 3 years ago
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 | |