<template>
	<div class="calender">
		<div class="item">
			<div class="label">选择日期</div>
			<div class="input-content">
				<h-date-picker value="2018-10-08" @change="onChange" />
			</div>
		</div>

		<div class="item">
			<div class="label">选择日期</div>
			<div class="input-content">
				<h-date-picker value="2015-07-15" @change="onChange" />
			</div>
		</div>

		<div class="item">
			<div class="label">选择时间</div>
			<div class="input-content">
				<h-time-picker @change="onChange" />
			</div>
		</div>

		<div class="item">
			<div class="label">选择时间</div>
			<div class="input-content">
				<h-time-picker @change="onChange" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'calender',
		data() {
			return {}
		},
		methods: {
			onChange(res) {
				console.log(res)
			}
		}
	}
</script>

<style lang="scss">
	.item {
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		overflow: hidden;
		background: #fff;
		margin-bottom: 20px;
		display: flex;

		.label {
			width: 100px;
		}

		.input-content {
			flex: 1;
		}
	}
</style>