time-range-picker 0.1.23 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +31 -24
  2. package/demo/index.vue +24 -18
  3. package/dist/time-range-picker.common.js +352 -52
  4. package/dist/time-range-picker.common.js.map +1 -1
  5. package/dist/time-range-picker.umd.js +352 -52
  6. package/dist/time-range-picker.umd.js.map +1 -1
  7. package/dist/time-range-picker.umd.min.js +1 -1
  8. package/dist/time-range-picker.umd.min.js.map +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # time-range-picker
2
2
 
3
3
  ### 引入
4
+
4
5
  ```
5
6
  yarn add time-range-picker
6
7
  npm i time-range-picker
@@ -9,28 +10,25 @@ npm i time-range-picker
9
10
  ```
10
11
 
11
12
  ### 使用
12
- `
13
- <TimeRangePicker
14
- :start.sync="time.start"
15
- :end.sync="time.end"
16
- />
17
- `
13
+
14
+ `<TimeRangePicker :start.sync="time.start" :end.sync="time.end" />`
18
15
 
19
16
  ### 参数
20
17
 
21
- | 参数 | 说明 | 类型 | 可选值 | 默认值 |
22
- | --- | --- | --- | --- | --- |
23
- | start | 开始日期时间（必填） | String | -- | |
24
- | end | 结束日期时间（必填） | String | -- | |
25
- | type | 选择类型 | String | 见下方说明1 | date |
26
- | placeholder | 选择框默提示文字，前后用 / 隔开 | String | | 见下方说明2 |
27
- | value-format | 值类型 | String | 见下方说明3 | |
28
- | disabled | 是否禁用 | Boolean | | false |
29
- | size | 组件大小 | String | large medium small mini | medium |
30
- | defaultDate | 设置默认时间，可以选择设置是当前年范围还是月范围 | String, Array | 见下方说明5 | '' |
31
- | pickerOptions | 附加参数 | Object | 见下方说明4 | {start: '00:00',step: '00:60',end: '23:00'} |
32
-
33
- ### 说明1（type可选项）
18
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
19
+ | --------------------- | ------------------------------------------------ | ------------- | ----------------------- | ------------------------------------------- |
20
+ | start | 开始日期时间（必填） | String | -- | |
21
+ | end | 结束日期时间（必填） | String | -- | |
22
+ | type | 选择类型 | String | 见下方说明 1 | date |
23
+ | placeholder | 选择框默提示文字，前后用 / 隔开 | String | | 见下方说明 2 |
24
+ | value-format | 值类型 | String | 见下方说明 3 | |
25
+ | disabled | 是否禁用 | Boolean | | false |
26
+ | size | 组件大小 | String | large medium small mini | medium |
27
+ | defaultDate(即将弃用) | 设置默认时间，可以选择设置是当前年范围还是月范围 | String, Array | 见下方说明 5 | '' |
28
+ | pickerOptions | 附加参数 | Object | 见下方说明 4 | {start: '00:00',step: '00:60',end: '23:00'} |
29
+
30
+ ### 说明 1（type 可选项）
31
+
34
32
  ```
35
33
  time 时间选择
36
34
  date-time 日期时间选择
@@ -41,8 +39,8 @@ year 年份选择
41
39
  time-select时间段范围选择
42
40
  ```
43
41
 
42
+ ### 说明 2（placeholder 默认值）
44
43
 
45
- ### 说明2（placeholder默认值）
46
44
  ```
47
45
  time 起始时间/结束时间
48
46
  date-time 起始时间/结束时间
@@ -53,7 +51,8 @@ year 起始年份/结束年份
53
51
  time-select起始时间/结束时间
54
52
  ```
55
53
 
56
- ### 说明3（value-format值类型） 第一个为默认
54
+ ### 说明 3（value-format 值类型） 第一个为默认
55
+
57
56
  ```
58
57
  time 'HH:mm', 'HH', 'HH:mm:ss'
59
58
  date-time 'yyyy-MM-dd HH:mm:ss'
@@ -64,7 +63,8 @@ year 'yyyy'
64
63
  time-select'HH:mm'
65
64
  ```
66
65
 
67
- ### 说明4 （pickerOptions） 附加属性
66
+ ### 说明 4 （pickerOptions） 附加属性
67
+
68
68
  ```
69
69
  start 开始时间 string — 00:00 (time-select有效)
70
70
  end 结束时间 string — 23:59 (time-select有效)
@@ -74,7 +74,8 @@ startDisabledDate(time, start, end) 开始时间限制方法 (date date-time 有
74
74
  endDisabledDate(time, start, end) 结束时间限制方法 (date date-time 有效，同原生disabledDate方法, 后面的第二和第三个参数是开始时间和结束时间)
75
75
  ```
76
76
 
77
- ### 说明5 （defaultDate） 设置默认值
77
+ ### 说明 5 （defaultDate 即将弃用） 设置默认值
78
+
78
79
  ```
79
80
  thisYear 本年第一天今天
80
81
  thisMonth 本月第一天到今天
@@ -86,4 +87,10 @@ pastOneMonth 近一月
86
87
  注意：如果需要点击表单重置时，恢复到默认设置的值，需要设置默认值为null或undefined
87
88
  ```
88
89
 
89
- #### 注意： 如果需要设置默认值，请设置在defaultDate里，通过数组设置，否则点击重置按钮可能会导致bug
90
+ #### 注意：现已升级，设置默认时间可不用 defaultDate 设置，直接给 start 和 end 设置即可，组件默认导出了常见的几个时间：
91
+
92
+ - currentYear 本年第一天到今天
93
+ - currentMonth 本月第一天到今天
94
+ - pastOneYear 近一年
95
+ - pastOneMonth 近一月
96
+ - nowDate 当前时间
package/demo/index.vue CHANGED
@@ -1,3 +1,11 @@
1
+ <!--
2
+ * @Descripttion:
3
+ * @version:
4
+ * @Author: 韩应波
5
+ * @Date: 2021-01-20 10:21:21
6
+ * @LastEditors: 韩应波
7
+ * @LastEditTime: 2021-02-08 11:48:34
8
+ -->
1
9
  <template>
2
10
  <div id="App">
3
11
  <div>
@@ -11,21 +19,15 @@
11
19
  <el-button @click="type = 'time-select'">time-select</el-button>
12
20
  </div>
13
21
  <br />
14
- 设置defaultDate: <el-button @click="defaultDate = ''">空</el-button>
15
- <el-button @click="defaultDate = 'thisMonth'"
16
- >thisMonth(本月第一天到今天)</el-button
17
- >
18
- <el-button @click="defaultDate = 'thisYear'"
19
- >thisYear(本年第一天今天)</el-button
20
- >
21
- <el-button @click="defaultDate = 'pastOneYear'"
22
- >pastOneYear(近一年)</el-button
23
- >
24
- <el-button @click="defaultDate = 'pastOneMonth'"
25
- >pastOneMonth(近一月)</el-button
26
- >
22
+ 设置defaultDate:
23
+ <el-button @click="defaultDate = ''">空</el-button>
24
+ <el-button @click="defaultDate = 'thisMonth'">thisMonth(本月第一天到今天)</el-button>
25
+ <el-button @click="defaultDate = 'thisYear'">thisYear(本年第一天今天)</el-button>
26
+ <el-button @click="defaultDate = 'pastOneYear'">pastOneYear(近一年)</el-button>
27
+ <el-button @click="defaultDate = 'pastOneMonth'">pastOneMonth(近一月)</el-button>
27
28
  <br />
28
- 设置disabled: <el-switch v-model="disabled" />
29
+ 设置disabled:
30
+ <el-switch v-model="disabled" />
29
31
  <br />
30
32
  <br />
31
33
  <el-form ref="rowForm" :model="time">
@@ -36,7 +38,10 @@
36
38
  :start.sync="time.start"
37
39
  :end.sync="time.end"
38
40
  :disabled="disabled"
39
- :defaultDate="['2020-01-01 00:00:00', '2020-10-10 23:59:59']"
41
+ :defaultDate="defaultDate"
42
+ :picker-options="{
43
+ step: '00:30'
44
+ }"
40
45
  />
41
46
  </el-form-item>
42
47
  <el-form-item label="重置">
@@ -48,7 +53,8 @@
48
53
  <br />
49
54
  <br />
50
55
  外部设置值：
51
- <el-input v-model="start" style="width: 100px" /> -
56
+ <el-input v-model="start" style="width: 100px" />
57
+ -
52
58
  <el-input v-model="end" style="width: 100px" />
53
59
  <el-button @click="setTime">设置</el-button>
54
60
  </div>
@@ -66,8 +72,8 @@ export default {
66
72
  disabled: false,
67
73
  defaultDate: '',
68
74
  time: {
69
- start: undefined,
70
- end: undefined
75
+ start: TimeRangePicker.defaultDate.currentMonth[0],
76
+ end: TimeRangePicker.defaultDate.currentMonth[1]
71
77
  },
72
78
  start: '',
73
79
  end: '',