# 日期时间选择

picker-view扩展,日期时间选择器,可设置默认显示,可根据需要调整选择的类型。

# 组件结构

<template>
	<view class="tui-datetime-picker">
		<view class="tui-mask" :class="{ 'tui-mask-show': isShow }" @touchmove.stop.prevent="stop" catchtouchmove="stop" @tap="hide"></view>
		<view class="tui-header" :class="{ 'tui-show': isShow }">
			<view class="tui-picker-header" :class="{ 'tui-date-radius': radius }" @touchmove.stop.prevent="stop" catchtouchmove="stop">
				<view class="tui-btn-picker" :style="{ color: cancelColor }" hover-class="tui-opacity" :hover-stay-time="150"
				 @click="hide">取消</view>
				<view class="tui-btn-picker" :style="{ color: color }" hover-class="tui-opacity" :hover-stay-time="150" @click="btnFix">确定</view>
			</view>
			<view class="tui-date-header" v-if="unitTop">
				<view class="tui-date-unit" v-if="type < 4 || type == 7"></view>
				<view class="tui-date-unit" v-if="type < 4 || type == 7"></view>
				<view class="tui-date-unit" v-if="type == 1 || type == 2 || type == 7"></view>
				<view class="tui-date-unit" v-if="type == 1 || type == 4 || type == 5 || type == 7"></view>
				<view class="tui-date-unit" v-if="type == 1 || type > 3"></view>
				<view class="tui-date-unit" v-if="type > 4"></view>
			</view>
			<view class="tui-picker-body">
				<picker-view :value="value" @change="change" class="tui-picker-view">
					<picker-view-column v-if="!reset && (type < 4 || type == 7)">
						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in years"
						 :key="index">
							{{ item }}
							<text class="tui-unit-text" v-if="!unitTop"></text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && (type < 4 || type == 7)">
						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in months"
						 :key="index">
							{{ formatNum(item) }}
							<text class="tui-unit-text" v-if="!unitTop"></text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && (type == 1 || type == 2 || type == 7)">
						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in days"
						 :key="index">
							{{ formatNum(item) }}
							<text class="tui-unit-text" v-if="!unitTop"></text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && (type == 1 || type == 4 || type == 5 || type == 7)">
						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in hours"
						 :key="index">
							{{ formatNum(item) }}
							<text class="tui-unit-text" v-if="!unitTop"></text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && (type == 1 || type > 3)">
						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in minutes"
						 :key="index">
							{{ formatNum(item) }}
							<text class="tui-unit-text" v-if="!unitTop"></text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && type > 4">
						<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in seconds"
						 :key="index">
							{{ formatNum(item) }}
							<text class="tui-unit-text" v-if="!unitTop"></text>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiDatetime",
		
		...省略n行
		
	};
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
type Number 显示类型:
1-日期+时间(年月日+时分)
2-日期(年月日)
3-日期(年月)
4-时间(时分)
5-时分秒
6-分秒
7-年月日 时分秒
1
startYear Number 年份区间 开始年份 1980
endYear Number 年份区间 结束年份 2050
cancelColor String "取消"字体颜色, 200
color String "确定"字体颜色 200
setDateTime String 设置默认显示日期,格式如下:
2019-08-01
2019-08-01 17:01
2019/08/01
""
unitTop Boolean 单位置顶 false
radius Boolean 圆角设置 false

# methods

名称 描述
show 显示日期时间选择器,调用使用 this.$refs.dateTime.show() 方式
@confirm 确定事件,返回选中日期时间数据
@cancel 取消事件,取消选择

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/picker-dateTime/picker-dateTime

# H5二维码

# 小程序二维码