diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js index 8211ed68c..9f2d20a54 100644 --- a/src/datetime-picker/DatePicker.js +++ b/src/datetime-picker/DatePicker.js @@ -95,6 +95,10 @@ export default createComponent({ result = result.slice(1, 3); } + if (this.type === 'datehour') { + result = result.slice(0, 4); + } + return result; }, }, @@ -176,6 +180,10 @@ export default createComponent({ let hour = 0; let minute = 0; + if (type === 'datehour') { + hour = getValue(3); + } + if (type === 'datetime') { hour = getValue(3); minute = getValue(4); @@ -213,6 +221,12 @@ export default createComponent({ ); } + if (this.type === 'datehour') { + values.push( + formatter('hour', padZero(value.getHours())) + ); + } + if (this.type === 'year-month') { values = values.slice(0, 2); } diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index fa884c5fe..bd5539af8 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -155,6 +155,30 @@ export default { }; ``` +### Choose DateHour + +```html + +``` + +```js +export default { + data() { + return { + minDate: new Date(2020, 0, 1), + maxDate: new Date(2025, 10, 1), + currentDate: new Date(), + }; + }, +}; +``` + ### Option Filter ```html @@ -190,7 +214,7 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| type | Can be set to `date` `time`
`year-month` `month-day` | _string_ | `datetime` | +| type | Can be set to `date` `time`
`year-month` `month-day` `datehour` | _string_ | `datetime` | | title | Toolbar title | _string_ | `''` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 5d40c1ace..b134b7d7d 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -165,6 +165,32 @@ export default { }; ``` +### 选择年月日小时 + +将 type 设置为 `datehour` 即可选择日期和小时，包括年月日和小时。 + +```html + +``` + +```js +export default { + data() { + return { + minDate: new Date(2020, 0, 1), + maxDate: new Date(2025, 10, 1), + currentDate: new Date(), + }; + }, +}; +``` + ### 选项过滤器 通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔 @@ -197,7 +223,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 时间类型，可选值为 `date` `time`
`year-month` `month-day` | _string_ | `datetime` | +| type | 时间类型，可选值为 `date` `time`
`year-month` `month-day` `datehour` | _string_ | `datetime` | | title | 顶部栏标题 | _string_ | `''` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue index 1d57560b3..531385c1c 100644 --- a/src/datetime-picker/demo/index.vue +++ b/src/datetime-picker/demo/index.vue @@ -52,6 +52,16 @@ /> + + + + +
+
+
+
选择年月日小时
+
+ +
+
+
    +
  • +
    2020
    +
    • +
  • +
    2021
    +
    • +
  • +
    2022
    +
    • +
  • +
    2023
    +
    • +
  • +
    2024
    +
    • +
  • +
    2025
    +
    • +
+
+
+
    +
  • +
    01
    +
    • +
  • +
    02
    +
    • +
  • +
    03
    +
    • +
  • +
    04
    +
    • +
  • +
    05
    +
    • +
  • +
    06
    +
    • +
  • +
    07
    +
    • +
  • +
    08
    +
    • +
  • +
    09
    +
    • +
  • +
    10
    +
    • +
  • +
    11
    +
    • +
  • +
    12
    +
    • +
+
+
+
    +
  • +
    01
    +
    • +
  • +
    02
    +
    • +
  • +
    03
    +
    • +
  • +
    04
    +
    • +
  • +
    05
    +
    • +
  • +
    06
    +
    • +
  • +
    07
    +
    • +
  • +
    08
    +
    • +
  • +
    09
    +
    • +
  • +
    10
    +
    • +
  • +
    11
    +
    • +
  • +
    12
    +
    • +
  • +
    13
    +
    • +
  • +
    14
    +
    • +
  • +
    15
    +
    • +
  • +
    16
    +
    • +
  • +
    17
    +
    • +
  • +
    18
    +
    • +
  • +
    19
    +
    • +
  • +
    20
    +
    • +
  • +
    21
    +
    • +
  • +
    22
    +
    • +
  • +
    23
    +
    • +
  • +
    24
    +
    • +
  • +
    25
    +
    • +
  • +
    26
    +
    • +
  • +
    27
    +
    • +
  • +
    28
    +
    • +
  • +
    29
    +
    • +
  • +
    30
    +
    • +
  • +
    31
    +
    • +
+
+
+
    +
  • +
    00
    +
    • +
  • +
    01
    +
    • +
  • +
    02
    +
    • +
  • +
    03
    +
    • +
  • +
    04
    +
    • +
  • +
    05
    +
    • +
  • +
    06
    +
    • +
  • +
    07
    +
    • +
  • +
    08
    +
    • +
  • +
    09
    +
    • +
  • +
    10
    +
    • +
  • +
    11
    +
    • +
  • +
    12
    +
    • +
  • +
    13
    +
    • +
  • +
    14
    +
    • +
  • +
    15
    +
    • +
  • +
    16
    +
    • +
  • +
    17
    +
    • +
  • +
    18
    +
    • +
  • +
    19
    +
    • +
  • +
    20
    +
    • +
  • +
    21
    +
    • +
  • +
    22
    +
    • +
  • +
    23
    +
    • +
+
+
+
+
+ +
+
diff --git a/src/datetime-picker/test/date-picker.spec.js b/src/datetime-picker/test/date-picker.spec.js index 0b50b9b49..07b4148fc 100644 --- a/src/datetime-picker/test/date-picker.spec.js +++ b/src/datetime-picker/test/date-picker.spec.js @@ -122,6 +122,23 @@ test('month-day type', () => { expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31); }); +test('datehour type', async () => { + const wrapper = mount(DatePicker, { + propsData: { + minDate: new Date(2010, 0, 1), + maxDate: new Date(2025, 10, 1), + value: new Date(2020, 10, 1, 0, 0), + }, + }); + + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[0][0].getHours()).toEqual(0); + + triggerDrag(wrapper.findAll('.van-picker-column').at(3), 0, -300); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[1][0].getHours()).toEqual(23); +}); + test('cancel event', () => { const wrapper = mount(DatePicker);