mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-24 16:10:38 +03:00
feat: add the prop scroll-duration (#475)
This commit is contained in:
mengxiong10
@@ -111,48 +111,49 @@ You can also override some of the default locale by `lang`.
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop | Description | Type | Default |
|
| Prop | Description | Type | Default |
|
||||||
| ------------------- | ---------------------------------------------- | ------------------------------------------- | -------------- |
|
| ------------------- | ------------------------------------------------ | ------------------------------------------- | -------------- |
|
||||||
| type | select the type of picker | date \|datetime\|year\|month\|time\|week | 'date' |
|
| type | select the type of picker | date \|datetime\|year\|month\|time\|week | 'date' |
|
||||||
| range | if true, pick the range date | `boolean` | false |
|
| range | if true, pick the range date | `boolean` | false |
|
||||||
| format | to set the date format. similar to moment.js | [token](#token) | 'YYYY-MM-DD' |
|
| format | to set the date format. similar to moment.js | [token](#token) | 'YYYY-MM-DD' |
|
||||||
| value-type | data type of the binding value | [value-type](#value-type) | 'date' |
|
| value-type | data type of the binding value | [value-type](#value-type) | 'date' |
|
||||||
| default-value | default date of the calendar | `Date` | new Date() |
|
| default-value | default date of the calendar | `Date` | new Date() |
|
||||||
| lang | override the default locale | `object` | |
|
| lang | override the default locale | `object` | |
|
||||||
| placeholder | input placeholder text | `string` | '' |
|
| placeholder | input placeholder text | `string` | '' |
|
||||||
| editable | whether the input is editable | `boolean` | true |
|
| editable | whether the input is editable | `boolean` | true |
|
||||||
| clearable | if false, don't show the clear icon | `boolean` | true |
|
| clearable | if false, don't show the clear icon | `boolean` | true |
|
||||||
| confirm | if true, need click the button to change value | `boolean` | false |
|
| confirm | if true, need click the button to change value | `boolean` | false |
|
||||||
| confirm-text | the text of confirm button | `string` | 'OK' |
|
| confirm-text | the text of confirm button | `string` | 'OK' |
|
||||||
| disabled | disable the component | `boolean` | false |
|
| disabled | disable the component | `boolean` | false |
|
||||||
| disabled-date | specify the date that cannot be selected | `(date) => boolean` | - |
|
| disabled-date | specify the date that cannot be selected | `(date) => boolean` | - |
|
||||||
| disabled-time | specify the time that cannot be selected | `(date) => boolean` | - |
|
| disabled-time | specify the time that cannot be selected | `(date) => boolean` | - |
|
||||||
| append-to-body | append the popup to body | `boolean` | true |
|
| append-to-body | append the popup to body | `boolean` | true |
|
||||||
| inline | without input | `boolean` | false |
|
| inline | without input | `boolean` | false |
|
||||||
| input-class | input classname | `string` | 'mx-input' |
|
| input-class | input classname | `string` | 'mx-input' |
|
||||||
| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — |
|
| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — |
|
||||||
| open | open state of picker | `boolean` | - |
|
| open | open state of picker | `boolean` | - |
|
||||||
| popup-style | popup style | `object` | — |
|
| popup-style | popup style | `object` | — |
|
||||||
| popup-class | popup classes | | — |
|
| popup-class | popup classes | | — |
|
||||||
| shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - |
|
| shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - |
|
||||||
| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' |
|
| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' |
|
||||||
| partial-update | whether update date when select year or month | `boolean` | false |
|
| partial-update | whether update date when select year or month | `boolean` | false |
|
||||||
| range-separator | text of range separator | `string` | ' ~ ' |
|
| range-separator | text of range separator | `string` | ' ~ ' |
|
||||||
| show-week-number | determine whether show week number | `boolean` | false |
|
| show-week-number | determine whether show week number | `boolean` | false |
|
||||||
| hour-step | interval between hours in time picker | 1 - 60 | 1 |
|
| hour-step | interval between hours in time picker | 1 - 60 | 1 |
|
||||||
| minute-step | interval between minutes in time picker | 1 - 60 | 1 |
|
| minute-step | interval between minutes in time picker | 1 - 60 | 1 |
|
||||||
| second-step | interval between seconds in time picker | 1 - 60 | 1 |
|
| second-step | interval between seconds in time picker | 1 - 60 | 1 |
|
||||||
| hour-options | custom hour column | `Array<number>` | - |
|
| hour-options | custom hour column | `Array<number>` | - |
|
||||||
| minute-options | custom minute column | `Array<number>` | - |
|
| minute-options | custom minute column | `Array<number>` | - |
|
||||||
| second-options | custom second column | `Array<number>` | - |
|
| second-options | custom second column | `Array<number>` | - |
|
||||||
| show-hour | whether show hour column | `boolean` | base on format |
|
| show-hour | whether show hour column | `boolean` | base on format |
|
||||||
| show-minute | whether show minute column | `boolean` | base on format |
|
| show-minute | whether show minute column | `boolean` | base on format |
|
||||||
| show-second | whether show second column | `boolean` | base on format |
|
| show-second | whether show second column | `boolean` | base on format |
|
||||||
| use12h | whether show ampm column | `boolean` | base on format |
|
| use12h | whether show ampm column | `boolean` | base on format |
|
||||||
| show-time-header | whether show header of time picker | `boolean` | false |
|
| show-time-header | whether show header of time picker | `boolean` | false |
|
||||||
| time-title-format | format of the time header | [token](#token) | 'YYYY-MM-DD' |
|
| time-title-format | format of the time header | [token](#token) | 'YYYY-MM-DD' |
|
||||||
| time-picker-options | set fixed time list to select | [time-picker-options](#time-picker-options) | null |
|
| time-picker-options | set fixed time list to select | [time-picker-options](#time-picker-options) | null |
|
||||||
| prefix-class | set prefix class | `string` | 'mx' |
|
| prefix-class | set prefix class | `string` | 'mx' |
|
||||||
|
| scroll-duration | set the duration of scroll when hour is selected | `number` | 100 |
|
||||||
|
|
||||||
#### Token
|
#### Token
|
||||||
|
|
||||||
|
|||||||
@@ -151,6 +151,7 @@ import 'vue2-datepicker/locale/zh-cn';
|
|||||||
| time-title-format | 时间面板头部的格式化 | [token](#token) | 'YYYY-MM-DD' |
|
| time-title-format | 时间面板头部的格式化 | [token](#token) | 'YYYY-MM-DD' |
|
||||||
| time-picker-options | 设置固定时间去选择 | [time-picker-options](#time-picker-options) | null |
|
| time-picker-options | 设置固定时间去选择 | [time-picker-options](#time-picker-options) | null |
|
||||||
| prefix-class | 设置 class 的前缀 | `string` | 'mx' |
|
| prefix-class | 设置 class 的前缀 | `string` | 'mx' |
|
||||||
|
| scroll-duration | 设置滚动时候当选中小时的时候 | `number` | 100 |
|
||||||
|
|
||||||
#### Token
|
#### Token
|
||||||
|
|
||||||
|
|||||||
@@ -74,6 +74,10 @@ export default {
|
|||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
date: Date,
|
date: Date,
|
||||||
|
scrollDuration: {
|
||||||
|
type: Number,
|
||||||
|
default: 100,
|
||||||
|
},
|
||||||
getClasses: {
|
getClasses: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
@@ -125,7 +129,7 @@ export default {
|
|||||||
date: {
|
date: {
|
||||||
handler() {
|
handler() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.scrollToSelected(100);
|
this.scrollToSelected(this.scrollDuration);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -28,6 +28,7 @@
|
|||||||
:hour-step="hourStep"
|
:hour-step="hourStep"
|
||||||
:minute-step="minuteStep"
|
:minute-step="minuteStep"
|
||||||
:second-step="secondStep"
|
:second-step="secondStep"
|
||||||
|
:scroll-duration="scrollDuration"
|
||||||
v-bind="ShowHourMinuteSecondAMPM"
|
v-bind="ShowHourMinuteSecondAMPM"
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
></list-columns>
|
></list-columns>
|
||||||
@@ -114,6 +115,10 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: undefined,
|
default: undefined,
|
||||||
},
|
},
|
||||||
|
scrollDuration: {
|
||||||
|
type: Number,
|
||||||
|
default: 100,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
innerValue() {
|
innerValue() {
|
||||||
|
|||||||
Reference in New Issue
Block a user