点我扫二维码，查看demo
# DateTimePicker 日期时间选择器
# 介绍
在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { DateTimePicker } from '@dolphin-iot/ui'
Vue.use(DateTimePicker);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
DateTimePicker组件中的title属性自定义组件头部标题; v-model为当前选择的日期时间值，必填项；pattern属性用于定义日期时间选择器的类型，可选值有：date datetime time；根据show-suffix属性判断是否展示日期单位。
<div class="demo-list">
<div class="panel">
<mx-cell title="选择日期" type="link" @click="showdate = true" ></mx-cell>
<mx-cell title="选择日期时间" type="link" @click="showdateTime = true"></mx-cell>
<mx-cell title="选择时间" type="link" @click="showTime = true"></mx-cell>
<div class="demo-panel">
<mx-popup :show="showdate" @close="showdate = false">
<mx-date-time-picker
v-model="date"
pattern="date"
:show-suffix="true"
title="选择日期"
@confirm="showdate = false"
@cancel="showdate = false"
/>
</mx-popup>
<mx-popup :show="showdateTime" @close="showdateTime = false">
<mx-date-time-picker
v-model="datetime"
pattern="datetime"
title="选择日期时间"
@confirm="showdateTime = false"
@cancel="showdateTime = false"
/>
</mx-popup>
<mx-popup :show="showTime" @close="showTime = false">
<mx-date-time-picker
v-model="time"
pattern="time"
:show-suffix="true"
title="选择时间"
@confirm="showTime = false"
@cancel="showTime = false"
/>
</mx-popup>
</div>
</div>
</div>
<script>
export default {
data() {
return {
date: new date(),
time: '21:18:29',
showdate: false,
showdateTime: false,
showTime: false,
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
# 选项只读
<div class="demo-list">
<div class="panel">
<mx-cell title="选项只读" type="link" @click="showReadOnly = true"></mx-cell>
<div class="demo-panel">
<mx-popup :show="showReadOnly" @close="showReadOnly = false">
<mx-date-time-picker
v-model="time"
readonly
pattern="time"
:show-suffix="true"
title="选择时间"
@confirm="showReadOnly = false"
@cancel="showReadOnly = false"
/>
</mx-popup>
</div>
</div>
</div>
<script>
export default {
data() {
return {
time: '20:18:29',
showReadOnly: false,
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 自定义日期时间选择器
<div class="demo-list">
<div class="panel">
<mx-cell title="最小日期" type="link" @click="showMindate = true"></mx-cell>
<mx-cell title="最大日期" type="link" @click="showMaxdate = true"></mx-cell>
<div class="demo-panel">
<mx-popup :show="showMindate" @close="showMindate = false">
<mx-date-time-picker
v-model="date"
:mindate="new date(2018,11,4)"
pattern="date"
:show-suffix="true"
title="选择时间"
@confirm="showMindate = false"
@cancel="showMindate = false"
/>
</mx-popup>
<mx-popup :show="showMaxdate" @close="showMaxdate = false">
<mx-date-time-picker
v-model="date"
:maxdate="new date(2025,11,4)"
pattern="date"
:show-suffix="true"
title="选择时间"
@confirm="showMaxdate = false"
@cancel="showMaxdate = false"
/>
</mx-popup>
</div>
</div>
</div>
<script>
export default {
data() {
return {
date: new date(),
showMindate: false,
showMaxdate: false
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# 平铺展示
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-date-time-picker
v-model="date"
pattern="date"
:show-suffix="true"
title="选择日期"
@confirm="onConfirm"
@cancel="onCancel"
/>
</div>
</div>
</div>
<script>
export default {
data() {
return {
date: new date(),
}
},
methods: {
onConfirm() {
alert(this.date)
},
onCancel() {
alert('取消')
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# Api
# Props
| 参数 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
| pattern | 日期时间选择器的类型，可选值为：date datetime time | string | date | - |
| item-height | 单个选择项高度 | number | 50 | - |
| visible-item-count | 每列选项展示的个数 | number | 5 | - |
| swipe-duration | 滑动选项时的动画时长，单位： ms | number | 800 | - |
| title | 日期时间选择器头部标题 | string | - | - |
| readonly | 选项只读 | boolean | false | - |
| min-date | 最小选择日期 | date | 当前日期的往前10年 | - |
| max-date | 最大选择日期 | date | 当前日期的往后10年 | - |
| show-suffix | 是否显示日期后缀单位 | boolean | false | - |
| value | 选中的日期时间 | date string | - | 是 |
| window-pattern | 被选中的选择项的背景样式 | string | fill | - |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 切换选项时触发 | 切换选项时，选择的值：values |
| cancel | 点击取消按钮时触发 | - |
| confirm | 点击确定按钮式时触发 | - |