diff --git a/components/head-view/head-view.vue b/components/head-view/head-view.vue
index 72b652a..cf23a84 100644
--- a/components/head-view/head-view.vue
+++ b/components/head-view/head-view.vue
@@ -27,6 +27,7 @@
 	.headInfo {
 		position: relative;
 		background-color: #fff;
+		border-bottom: 1px solid #999999;
 		height: 40px;
 		line-height: 40px;
 		font-size: 18px;
@@ -39,4 +40,4 @@
 		}
 
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/main.js b/main.js
index d4424dd..7628154 100644
--- a/main.js
+++ b/main.js
@@ -33,7 +33,8 @@ import {
 	Uploader,
 	Field,
 	Checkbox,
-	CheckboxGroup
+	CheckboxGroup,
+	Progress
 } from 'vant';
 
 Vue.use(Radio);
diff --git a/pages.json b/pages.json
index 8db8ee7..4277e90 100644
--- a/pages.json
+++ b/pages.json
@@ -12,6 +12,12 @@
 				"navigationBarTitleText": "指令"
 			}
 		},
+		{
+			"path": "pages/index/instructDetails",
+			"style": {
+				"navigationBarTitleText": "货物详情"
+			}
+		},
 		{
 			"path": "pages/discharge/index",
 			"style": {
diff --git a/pages/index/instruct.vue b/pages/index/instruct.vue
index 49c1710..e07b478 100644
--- a/pages/index/instruct.vue
+++ b/pages/index/instruct.vue
@@ -1,6 +1,7 @@
 <template>
 	<view class="app">
-		<head-view title="船名/航次"></head-view>
+		<head-view v-show="current!=2" title="船名/航次"></head-view>
+		<head-info v-show="current==2"></head-info>
 		<view class="content">
 			<view class="form">
 				<view class="input">
@@ -8,11 +9,11 @@
 						@iconClick="iconClick">
 					</uni-easyinput>
 				</view>
-				<view class="select">
+				<view class="select" v-show="current!=0">
 					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港区">
 					</uni-data-select>
 				</view>
-				<view class="select">
+				<view class="select" v-show="current!=0">
 					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="贸易类型">
 					</uni-data-select>
 				</view>
@@ -20,7 +21,7 @@
 					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="品牌">
 					</uni-data-select>
 				</view>
-				<view class="select">
+				<view class="select" v-show="current!=0">
 					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="车型">
 					</uni-data-select>
 				</view>
@@ -28,7 +29,7 @@
 					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港口">
 					</uni-data-select>
 				</view>
-				<view class="select">
+				<view class="select" v-show="current!=0">
 					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="计划状态">
 					</uni-data-select>
 				</view>
@@ -43,50 +44,218 @@
 				</radio-group>
 			</view>
 			<view class="buttonlist">
-				<button class="button" type="default">指令发送</button>
-				<button class="button" type="default">装船要求</button>
+				<button v-show="current==0" class="button" type="default">指令发送</button>
+				<button v-show="current!=2" class="button" type="default">装船要求</button>
 				<button class="button" type="default">刷新</button>
+				<button v-show="current==2" class="button" type="default">显示</button>
 			</view>
-			<view class="tablist">
-				<view class="tab" :class="active==1?'active':''" type="default" @click="active=1">未发送</view>
-				<view class="tab" :class="active==2?'active':''" type="default" @click="active=2">已发送</view>
-			</view>
-			<view class="itemList">
-				<view class="item" v-for="item in itemList" :key="item.index">
-					<view class="row">
-						<view class="col weight">
-							船舱层数：5层3舱
+			<view class="itemList" v-show="current==0">
+				<view class="exp" v-for="(item,index) in itemList" :key="item.index">
+					<view class="item">
+						<view class="rowHead" v-show="active==1">
+							<radio :value="item.value" />
 						</view>
-						<view class="col">
-							数量：1,000
-						</view>
-						<view class="col">
-							港口：厦门港
-						</view>
-					</view>
-					<view class="row">
-						<view class="col weight">
-							计划状态：已发送
-						</view>
-						<view class="col">
-							负责人：我是一个负责人
-						</view>
-						<view class="col">
-							发送时间：2023/09/09 16:00
-						</view>
-					</view>
-					<view class="rowFoot">
-						<view class="col">
-							装船进度
-						</view>
-						<view class="col">
-							<view class="progress-box">
-								<progress :percent="item" show-info stroke-width="3" />
+						<view class="row">
+							<view class="col weight">
+								船舱层数：5层3舱
 							</view>
+							<view class="col">
+								数量：1,000
+							</view>
+							<view class="col">
+								港口：厦门港
+							</view>
+						</view>
+						<view class="row">
+							<view class="col weight">
+								计划状态：已发送
+							</view>
+							<view class="col">
+								负责人：我是一个负责人
+							</view>
+							<view class="col">
+								发送时间：2023/09/09 16:00
+							</view>
+						</view>
+						<view class="rowFoot">
+							<view class="col">
+								装船进度
+							</view>
+							<view class="col">
+								<view class="progress-box">
+									<van-progress :percentage="itemSum(item.sum)" :pivot-text="'60/' + item.sum" />
+								</view>
+							</view>
+						</view>
+						<view class="fs blue">
+							<text v-show="active==1">发送</text>
+							<text v-show="active==2">{{item.status}}</text>
+						</view>
+					</view>
+					<view class="details">
+						<uni-icons v-show="itemActive != index" class="jt" type="top" size="24" color="#108ee9"
+							@click="isActive(index)"></uni-icons>
+						<view class="itemDetails" v-show="itemActive == index">
+							<view class="row" v-for="cell in item.xq">
+								<view class="cell">
+									TD90959749495
+								</view>
+								<view class="cell">
+									中转港：厦门港
+								</view>
+								<view class="cell">
+									数量：100
+								</view>
+								<view class="cell">
+									品牌：特斯拉
+								</view>
+								<view class="cell">
+									车型：电动车
+								</view>
+								<view class="cell">
+									型号：特斯拉plus
+								</view>
+								<view class="cell blue" @click="toDetails">
+									详情
+								</view>
+							</view>
+							<uni-icons class="jt" type="bottom" size="24" color="#108ee9"
+								@click="itemActive = '-1'"></uni-icons>
 						</view>
 					</view>
 				</view>
 			</view>
+			<view class="tablist" v-show="current==1">
+				<view class="tab" :class="active==1?'active':''" type="default" @click="tabChange(1)">未发送</view>
+				<view class="tab" :class="active==2?'active':''" type="default" @click="tabChange(2)">已发送</view>
+			</view>
+			<view class="itemList" v-show="current==1">
+				<view class="exp" v-for="(item,index) in itemList" :key="item.index">
+					<view class="item">
+						<view class="rowHead" v-if="active==1">
+							<radio :value="item.value" />
+						</view>
+						<view class="row">
+							<view class="col weight">
+								船舱层数：5层3舱
+							</view>
+							<view class="col">
+								数量：1,000
+							</view>
+							<view class="col">
+								港口：厦门港
+							</view>
+						</view>
+						<view class="row">
+							<view class="col weight">
+								计划状态：已发送
+							</view>
+							<view class="col">
+								负责人：我是一个负责人
+							</view>
+							<view class="col">
+								发送时间：2023/09/09 16:00
+							</view>
+						</view>
+						<view class="rowFoot">
+							<view class="col">
+								装船进度
+							</view>
+							<view class="col">
+								<view class="progress-box">
+									<van-progress :percentage="itemSum(item.sum)" :pivot-text="'60/' + item.sum" />
+								</view>
+							</view>
+						</view>
+						<view class="fs blue">
+							<text v-show="active==1">发送</text>
+							<text v-show="active==2">{{item.status}}</text>
+						</view>
+					</view>
+					<view class="details">
+						<uni-icons v-show="itemActive != index" class="jt" type="top" size="24" color="#108ee9"
+							@click="isActive(index)"></uni-icons>
+						<view class="itemDetails" v-show="itemActive == index">
+							<view class="row" v-for="cell in item.xq">
+								<view class="cell">
+									TD90959749495
+								</view>
+								<view class="cell">
+									中转港：厦门港
+								</view>
+								<view class="cell">
+									数量：100
+								</view>
+								<view class="cell">
+									品牌：特斯拉
+								</view>
+								<view class="cell">
+									车型：电动车
+								</view>
+								<view class="cell">
+									型号：特斯拉plus
+								</view>
+								<view class="cell blue" @click="toDetails">
+									详情
+								</view>
+							</view>
+							<uni-icons class="jt" type="bottom" size="24" color="#108ee9"
+								@click="itemActive = '-1'"></uni-icons>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="currentList" v-show="current==2">
+				<view class="imgLi">
+					<image src="@/static/images/u176.png" mode="widthFix">
+				</view>
+				<view class="title">
+					第一层
+				</view>
+				<view class="nr">
+					<text class="text">是否可调夹板: 是</text>
+					<text class="text">是否有跳板: 双尾跳</text>
+				</view>
+				<view class="imgLi">
+					<image src="@/static/images/u86.png" mode="widthFix">
+				</view>
+				<view class="tableHead">
+					<text>明细(100)</text>
+					<uni-icons class="jt" type="bottom" size="24"></uni-icons>
+				</view>
+				<uni-table border stripe emptyText="暂无更多数据">
+					<!-- 表头行 -->
+					<uni-tr class="gray">
+						<uni-th align="center" width="20">提单号</uni-th>
+						<uni-th align="center" width="20">港口</uni-th>
+						<uni-th align="center" width="20">品牌</uni-th>
+						<uni-th align="center" width="20">车型</uni-th>
+						<uni-th align="center" width="20">型号</uni-th>
+						<uni-th align="center" width="20">车型明细</uni-th>
+						<uni-th align="center" width="20">数量</uni-th>
+						<uni-th align="center" width="20">长</uni-th>
+						<uni-th align="center" width="20">宽</uni-th>
+						<uni-th align="center" width="20">高</uni-th>
+						<uni-th align="center" width="20">位置</uni-th>
+					</uni-tr>
+					<!-- 表格数据行 -->
+					<uni-tr>
+						<uni-td>1123</uni-td>
+						<uni-td>2</uni-td>
+						<uni-td>3</uni-td>
+						<uni-td>4</uni-td>
+						<uni-td>1</uni-td>
+						<uni-td>2</uni-td>
+						<uni-td>3</uni-td>
+						<uni-td>4</uni-td>
+						<uni-td>1</uni-td>
+						<uni-td>2</uni-td>
+						<uni-td>3</uni-td>
+					</uni-tr>
+
+				</uni-table>
+			</view>
 		</view>
 	</view>
 
@@ -94,12 +263,60 @@
 
 <script>
 	import HeadView from '@/components/head-view/head-view.vue';
+	import HeadInfo from '@/components/head-info/head-info';
 	export default {
 		data() {
 			return {
 				value1: "",
 				value: '',
-				itemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
+				itemList: [],
+				goList: [{ //已发送
+						sum: 300,
+						xq: 2
+					},
+					{
+						sum: 600,
+						xq: 3
+					},
+					{
+						sum: 900,
+						xq: 1
+					},
+					{
+						sum: 100,
+						xq: 2
+					},
+					{
+						sum: 200,
+						xq: 2
+					}
+				],
+				noList: [{ //已发送
+						sum: 100,
+						xq: 2,
+						status: '暂停'
+					},
+					{
+						sum: 300,
+						xq: 3,
+						status: '重新发送'
+					},
+					{
+						sum: 200,
+						xq: 1,
+						status: '重新发送'
+					},
+					{
+						sum: 500,
+						xq: 2,
+						status: '暂停'
+					},
+					{
+						sum: 800,
+						xq: 2,
+						status: '暂停'
+					}
+				],
 				range: [1],
 				items: [{
 						value: '1',
@@ -120,16 +337,35 @@
 					},
 				],
 				current: 0,
-				active: 1
+				active: 1,
+				itemActive: -1,
+			}
+		},
+		computed: {
+			itemSum() {
+				return function(item) {
+					let sum = (60 / item) * 100
+					console.log(sum);
+					return sum
+				};
 			}
 		},
 		onLoad() {
-
+			this.tabChange(1)
 		},
 		components: {
-			HeadView
+			HeadView,
+			HeadInfo
 		},
 		methods: {
+			tabChange(tag) {
+				this.active = tag
+				if (this.active == 1) {
+					this.itemList = this.goList
+				} else {
+					this.itemList = this.noList
+				}
+			},
 			change() {},
 			radioChange: function(evt) {
 				for (let i = 0; i < this.items.length; i++) {
@@ -138,21 +374,33 @@
 						break;
 					}
 				}
+			},
+			isActive(e) {
+				this.itemActive = e
+			},
+			toDetails() {
+				uni.navigateTo({
+					url: '/pages/index/instructDetails'
+				})
 			}
 		}
 	};
 </script>
 
 <style>
+	.blue {
+		color: #108ee9;
+	}
+
 	.content {
 		padding: 20px;
+		background-color: #fff;
 
 		.form {
 			display: flex;
 
 			.select {
 				width: 100px;
-
 				margin-left: 15px;
 			}
 
@@ -176,13 +424,13 @@
 
 		.buttonlist {
 			width: 340px;
-			display: flex;
-			justify-content: space-between;
 
 			.button {
+				display: inline-block;
 				width: 100px;
 				height: 40px;
 				line-height: 40px;
+				margin-right: 20rpx;
 			}
 		}
 
@@ -210,32 +458,104 @@
 		.itemList {
 			margin-top: 30px;
 
-			.item {
-				height: 110px;
-				padding: 20px;
+			.exp {
 				border-bottom: 2px solid #e9e9e9;
-				display: flex;
-				justify-content: space-between;
+				text-align: center;
+				padding-bottom: 10px;
 
-				.weight {
-					font-weight: 900;
-				}
-
-				.row {
-					width: 30%;
-					flex-direction: column;
+				.item {
+					height: 110px;
+					padding: 20px 20px 0;
 					display: flex;
 					justify-content: space-between;
+					text-align: left;
+
+					.weight {
+						font-weight: 900;
+					}
+
+					.rowHead {
+						width: 4%;
+					}
+
+					.row {
+						width: 28%;
+						flex-direction: column;
+						display: flex;
+						justify-content: space-between;
+					}
+
+					.rowFoot {
+						width: 34%;
+						flex-direction: column;
+						display: flex;
+						justify-content: space-around;
+					}
+
+					.fs {
+						width: 6%;
+						text-align: right;
+						line-height: 110px;
+					}
 				}
 
-				.rowFoot {
-					width: 40%;
-					flex-direction: column;
-					display: flex;
-					justify-content: space-around;
-					color: #1890ff;
+				.details {
+					padding: 20px;
+
+					.itemDetails {
+						border-top: 2px dotted #7d7d7d;
+
+						.row {
+							display: flex;
+							justify-content: space-between;
+							height: 50px;
+							line-height: 50px;
+
+						}
+					}
+				}
+
+			}
+		}
+
+		.currentList {
+			width: 85%;
+			margin: 10px auto;
+
+			.tableHead {
+				margin-top: 10px;
+				height: 50px;
+				line-height: 50px;
+				background-color: #fff;
+				display: flex;
+				justify-content: space-between;
+				padding: 0 12px;
+				font-size: 20px;
+				border: 1px solid #f2f2f2;
+			}
+
+			.gray {
+				background-color: #f9f9f9;
+			}
+
+			.imgLi {
+				margin-bottom: 5px;
+			}
+
+			.title {
+				line-height: 50px;
+				font-size: 21px;
+				font-weight: 900;
+			}
+
+			.nr {
+				font-size: 16px;
+
+				.text {
+					display: inline-block;
+					margin-right: 50px;
 				}
 			}
 		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/index/instructDetails.vue b/pages/index/instructDetails.vue
new file mode 100644
index 0000000..65c99c5
--- /dev/null
+++ b/pages/index/instructDetails.vue
@@ -0,0 +1,277 @@
+<template>
+	<view class="details">
+		<head-view title="货物详情"></head-view>
+		<view class="container">
+			<view class="formTitle">
+				基本信息
+			</view>
+			<view class="formNr">
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							船名:
+						</view>
+						<text>1123</text>
+				
+					</view>
+					<view class="col">
+						<view class="title">
+							航次:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							港口:
+						</view>
+						<text>1123</text>
+				
+					</view>
+					<view class="col">
+						<view class="title">
+							泊位:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							备注:
+						</view>
+						<text>1123</text>
+				
+					</view>
+					<view class="col">
+					
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							货代:
+						</view>
+						<text>1123</text>
+				
+					</view>
+					<view class="col">
+						<view class="title">
+							联系人:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							联系方式:
+						</view>
+						<text>1123</text>
+				
+					</view>
+					<view class="col">
+						
+					</view>
+				</view>
+			</view>
+			<view class="formTitle">
+				详细信息
+			</view>
+			<view class="formNr">
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							提单号:
+						</view>
+						<text>1123</text>
+
+					</view>
+					<view class="col">
+						<view class="title">
+							品牌:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+
+					<view class="col">
+						<view class="title">
+							型号:
+						</view>
+						<text>1123</text>
+					</view>
+					<view class="col">
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							车型明细:
+						</view>
+						<text>1123</text>
+
+					</view>
+					<view class="col">
+						<view class="title">
+							车长:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							车宽:
+						</view>
+						<text>1123</text>
+
+					</view>
+					<view class="col">
+						<view class="title">
+							车高:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							体积:
+						</view>
+						<text>1123</text>
+
+					</view>
+					<view class="col">
+						<view class="title">
+							重量:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							数量:
+						</view>
+						<text>1123</text>
+
+					</view>
+					<view class="col">
+						<view class="title">
+							单票数量:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+				<view class="row">
+					<view class="col">
+						<view class="title">
+							单票重量:
+						</view>
+						<text>1123</text>
+
+					</view>
+					<view class="col">
+						<view class="title">
+							单票体积:
+						</view>
+						<text>1123</text>
+					</view>
+				</view>
+			</view>
+			<view class="formTitle">
+				货物明细
+			</view>
+			<view class="formNr">
+				<uni-table border stripe emptyText="暂无更多数据">
+					<!-- 表头行 -->
+					<uni-tr class="gray">
+						<uni-th align="center" width="20">序号</uni-th>
+						<uni-th align="center" width="20">车架号/条形码</uni-th>
+						<uni-th align="center" width="20">作业状态</uni-th>
+						<uni-th align="center" width="20">场位</uni-th>
+						<uni-th align="center" width="20">操作</uni-th>
+					</uni-tr>
+					<!-- 表格数据行 -->
+					<uni-tr>
+						<uni-td>1123</uni-td>
+						<uni-td>2</uni-td>
+						<uni-td>3</uni-td>
+						<uni-td>4</uni-td>
+						<uni-td align="center" class="blue" @click="cs">残损</uni-td>
+					</uni-tr>
+				</uni-table>
+			</view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	import HeadInfo from '@/components/head-info/head-info';
+	export default {
+		data() {
+			return {}
+		},
+		components: {
+			HeadInfo
+		},
+		methods: {
+			cs() {
+				console.log(1);
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.blue {
+		color: #108ee9;
+	}
+
+	.details {
+		.container {
+			padding: 20px 30px;
+
+			.formTitle {
+				padding-left: 10px;
+				border-left: 5px solid #2979ff;
+				font-size: 20px;
+				font-weight: bold;
+			}
+
+			.formNr {
+				margin: 40px 0 30px;
+
+				.row {
+					width: 70%;
+					display: flex;
+					justify-content: space-between;
+					font-size: 18px;
+					line-height: 60px;
+
+					.col {
+						display: flex;
+						justify-content: center;
+
+						.title {
+							width: 150px;
+							text-align: right;
+							font-weight: 900;
+							color: #999ba6;
+						}
+
+					}
+				}
+
+				.gray {
+					background-color: #f9f9f9;
+				}
+
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/static/images/u176.png b/static/images/u176.png
new file mode 100644
index 0000000..e7f2de6
Binary files /dev/null and b/static/images/u176.png differ
diff --git a/static/images/u86.png b/static/images/u86.png
new file mode 100644
index 0000000..02db7a4
Binary files /dev/null and b/static/images/u86.png differ
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
index dba9887..8f3c461 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
@@ -1,177 +1,177 @@
-<template>
-	<view class="uni-calendar-item__weeks-box" :class="{
-		'uni-calendar-item--disable':weeks.disable,
-		'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
-		'uni-calendar-item--multiple': weeks.multiple,
-		'uni-calendar-item--after-checked-x':weeks.afterMultiple,
-		}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
-		<view class="uni-calendar-item__weeks-box-item" :class="{
-				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
-				'uni-calendar-item--checked-range-text': checkHover,
-				'uni-calendar-item--before-checked':weeks.beforeMultiple,
-				'uni-calendar-item--multiple': weeks.multiple,
-				'uni-calendar-item--after-checked':weeks.afterMultiple,
-				'uni-calendar-item--disable':weeks.disable,
-				}">
-			<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
-			<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
-		</view>
-		<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			weeks: {
-				type: Object,
-				default () {
-					return {}
-				}
-			},
-			calendar: {
-				type: Object,
-				default: () => {
-					return {}
-				}
-			},
-			selected: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
-			checkHover: {
-				type: Boolean,
-				default: false
-			}
-		},
-		methods: {
-			choiceDate(weeks) {
-				this.$emit('change', weeks)
-			},
-			handleMousemove(weeks) {
-				this.$emit('handleMouse', weeks)
-			}
-		}
-	}
-</script>
-
-<style lang="scss" >
-	$uni-primary: #007aff !default;
-
-	.uni-calendar-item__weeks-box {
-		flex: 1;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		margin: 1px 0;
-		position: relative;
-	}
-
-	.uni-calendar-item__weeks-box-text {
-		font-size: 14px;
-		// font-family: Lato-Bold, Lato;
-		font-weight: bold;
-		color: darken($color: $uni-primary, $amount: 40%);
-	}
-
-	.uni-calendar-item__weeks-box-item {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		width: 40px;
-		height: 40px;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-
-	.uni-calendar-item__weeks-box-circle {
-		position: absolute;
-		top: 5px;
-		right: 5px;
-		width: 8px;
-		height: 8px;
-		border-radius: 8px;
-		background-color: #dd524d;
-
-	}
-
-	.uni-calendar-item__weeks-box .uni-calendar-item--disable {
-		cursor: default;
-	}
-
-	.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
-		color: #D1D1D1;
-	}
-
-	.uni-calendar-item--today {
-		position: absolute;
-		top: 10px;
-		right: 17%;
-		background-color: #dd524d;
-		width:6px;
-		height: 6px;
-		border-radius: 50%;
-	}
-
-	.uni-calendar-item--extra {
-		color: #dd524d;
-		opacity: 0.8;
-	}
-
-	.uni-calendar-item__weeks-box .uni-calendar-item--checked {
-		background-color: $uni-primary;
-		border-radius: 50%;
-		box-sizing: border-box;
-		border: 3px solid #fff;
-	}
-
-	.uni-calendar-item--checked .uni-calendar-item--checked-text {
-		color: #fff;
-	}
-
-	.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
-		color: #333;
-	}
-
-	.uni-calendar-item--multiple {
-		background-color:  #F6F7FC;
-		// color: #fff;
-	}
-
-	.uni-calendar-item--multiple .uni-calendar-item--before-checked,
-	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
-		background-color: $uni-primary;
-		border-radius: 50%;
-		box-sizing: border-box;
-		border: 3px solid #F6F7FC;
-	}
-
-	.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
-	.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
-		color: #fff;
-	}
-
-	.uni-calendar-item--before-checked-x {
-		border-top-left-radius: 50px;
-		border-bottom-left-radius: 50px;
-		box-sizing: border-box;
-		background-color: #F6F7FC;
-	}
-
-	.uni-calendar-item--after-checked-x {
-		border-top-right-radius: 50px;
-		border-bottom-right-radius: 50px;
-		background-color: #F6F7FC;
-	}
-</style>
+<template>
+	<view class="uni-calendar-item__weeks-box" :class="{
+		'uni-calendar-item--disable':weeks.disable,
+		'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
+		'uni-calendar-item--multiple': weeks.multiple,
+		'uni-calendar-item--after-checked-x':weeks.afterMultiple,
+		}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
+		<view class="uni-calendar-item__weeks-box-item" :class="{
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
+				'uni-calendar-item--checked-range-text': checkHover,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">
+			<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+			<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
+		</view>
+		<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			checkHover: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			choiceDate(weeks) {
+				this.$emit('change', weeks)
+			},
+			handleMousemove(weeks) {
+				this.$emit('handleMouse', weeks)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	$uni-primary: #007aff !default;
+
+	.uni-calendar-item__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin: 1px 0;
+		position: relative;
+	}
+
+	.uni-calendar-item__weeks-box-text {
+		font-size: 14px;
+		// font-family: Lato-Bold, Lato;
+		font-weight: bold;
+		color: darken($color: $uni-primary, $amount: 40%);
+	}
+
+	.uni-calendar-item__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 40px;
+		height: 40px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-calendar-item__weeks-box-circle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 8px;
+		height: 8px;
+		border-radius: 8px;
+		background-color: #dd524d;
+
+	}
+
+	.uni-calendar-item__weeks-box .uni-calendar-item--disable {
+		cursor: default;
+	}
+
+	.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
+		color: #D1D1D1;
+	}
+
+	.uni-calendar-item--today {
+		position: absolute;
+		top: 10px;
+		right: 17%;
+		background-color: #dd524d;
+		width:6px;
+		height: 6px;
+		border-radius: 50%;
+	}
+
+	.uni-calendar-item--extra {
+		color: #dd524d;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item__weeks-box .uni-calendar-item--checked {
+		background-color: $uni-primary;
+		border-radius: 50%;
+		box-sizing: border-box;
+		border: 3px solid #fff;
+	}
+
+	.uni-calendar-item--checked .uni-calendar-item--checked-text {
+		color: #fff;
+	}
+
+	.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
+		color: #333;
+	}
+
+	.uni-calendar-item--multiple {
+		background-color:  #F6F7FC;
+		// color: #fff;
+	}
+
+	.uni-calendar-item--multiple .uni-calendar-item--before-checked,
+	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
+		background-color: $uni-primary;
+		border-radius: 50%;
+		box-sizing: border-box;
+		border: 3px solid #F6F7FC;
+	}
+
+	.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
+	.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
+		color: #fff;
+	}
+
+	.uni-calendar-item--before-checked-x {
+		border-top-left-radius: 50px;
+		border-bottom-left-radius: 50px;
+		box-sizing: border-box;
+		background-color: #F6F7FC;
+	}
+
+	.uni-calendar-item--after-checked-x {
+		border-top-right-radius: 50px;
+		border-bottom-right-radius: 50px;
+		background-color: #F6F7FC;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
index 29b1b03..ec8e472 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
@@ -1,929 +1,929 @@
-<template>
-	<view class="uni-calendar" @mouseleave="leaveCale">
-
-		<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
-			@click="maskClick"></view>
-
-		<view v-if="insert || show" class="uni-calendar__content"
-			:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
-			<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
-
-				<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
-					<view class="uni-calendar__header-btn uni-calendar--left"></view>
-				</view>
-
-				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
-					<text
-						class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
-				</picker>
-
-				<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
-					<view class="uni-calendar__header-btn uni-calendar--right"></view>
-				</view>
-
-				<view v-if="!insert" class="dialog-close" @click="close">
-					<view class="dialog-close-plus" data-id="close"></view>
-					<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
-				</view>
-			</view>
-			<view class="uni-calendar__box">
-
-				<view v-if="showMonth" class="uni-calendar__box-bg">
-					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
-				</view>
-
-				<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
-					</view>
-				</view>
-
-				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
-					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
-						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
-							:selected="selected" :checkHover="range" @change="choiceDate"
-							@handleMouse="handleMouse">
-						</calendar-item>
-					</view>
-				</view>
-			</view>
-
-			<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
-				style="padding: 0 80px;">
-				<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
-				<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
-					:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
-				</time-picker>
-			</view>
-
-			<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
-				<view class="uni-date-changed--time-start">
-					<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
-					</view>
-					<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
-						:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
-					</time-picker>
-				</view>
-				<view style="line-height: 50px;">
-					<uni-icons type="arrowthinright" color="#999"></uni-icons>
-				</view>
-				<view class="uni-date-changed--time-end">
-					<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
-					<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
-						:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
-					</time-picker>
-				</view>
-			</view>
-
-			<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
-				<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import { Calendar, getDate, getTime } from './util.js';
-	import calendarItem from './calendar-item.vue'
-	import timePicker from './time-picker.vue'
-
-	import { initVueI18n } from '@dcloudio/uni-i18n'
-	import i18nMessages from './i18n/index.js'
-	const { t } = initVueI18n(i18nMessages)
-
-	/**
-	 * Calendar 日历
-	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
-	 * @property {String} date 自定义当前时间，默认为今天
-	 * @property {String} startDate 日期选择范围-开始日期
-	 * @property {String} endDate 日期选择范围-结束日期
-	 * @property {Boolean} range 范围选择
-	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
-	 * 	@value true 弹窗模式
-	 * 	@value false 插入模式
-	 * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
-	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
-	 * @property {Boolean} showMonth 是否选择月份为背景
-	 * @property {[String} defaultValue 选择器打开时默认显示的时间
-	 * @event {Function} change 日期改变，`insert :ture` 时生效
-	 * @event {Function} confirm 确认选择`insert :false` 时生效
-	 * @event {Function} monthSwitch 切换月份时触发
-	 * @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
-	 */
-	export default {
-		components: {
-			calendarItem,
-			timePicker
-		},
-		props: {
-			date: {
-				type: String,
-				default: ''
-			},
-			defTime: {
-				type: [String, Object],
-				default: ''
-			},
-			selectableTimes: {
-				type: [Object],
-				default () {
-					return {}
-				}
-			},
-			selected: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			startDate: {
-				type: String,
-				default: ''
-			},
-			endDate: {
-				type: String,
-				default: ''
-			},
-      startPlaceholder: {
-        type: String,
-				default: ''
-			},
-			endPlaceholder: {
-				type: String,
-				default: ''
-			},
-			range: {
-				type: Boolean,
-				default: false
-			},
-			hasTime: {
-				type: Boolean,
-				default: false
-			},
-			insert: {
-				type: Boolean,
-				default: true
-			},
-			showMonth: {
-				type: Boolean,
-				default: true
-			},
-			clearDate: {
-				type: Boolean,
-				default: true
-			},
-			checkHover: {
-				type: Boolean,
-				default: true
-			},
-			hideSecond: {
-				type: [Boolean],
-				default: false
-			},
-			pleStatus: {
-				type: Object,
-				default () {
-					return {
-						before: '',
-						after: '',
-						data: [],
-						fulldate: ''
-					}
-				}
-			},
-      defaultValue: {
-        type: [String, Object, Array],
-        default: ''
-      }
-		},
-		data() {
-			return {
-				show: false,
-				weeks: [],
-				calendar: {},
-				nowDate: {},
-				aniMaskShow: false,
-				firstEnter: true,
-				time: '',
-				timeRange: {
-					startTime: '',
-					endTime: ''
-				},
-				tempSingleDate: '',
-				tempRange: {
-					before: '',
-					after: ''
-				}
-			}
-		},
-		watch: {
-			date: {
-				immediate: true,
-				handler(newVal) {
-					if (!this.range) {
-						this.tempSingleDate = newVal
-						setTimeout(() => {
-							this.init(newVal)
-						}, 100)
-					}
-				}
-			},
-			defTime: {
-				immediate: true,
-				handler(newVal) {
-					if (!this.range) {
-						this.time = newVal
-					} else {
-						this.timeRange.startTime = newVal.start
-						this.timeRange.endTime = newVal.end
-					}
-				}
-			},
-			startDate(val) {
-				// 字节小程序 watch 早于 created
-				if(!this.cale){
-					return
-				}
-				this.cale.setStartDate(val)
-				this.cale.setDate(this.nowDate.fullDate)
-				this.weeks = this.cale.weeks
-			},
-			endDate(val) {
-				// 字节小程序 watch 早于 created
-				if(!this.cale){
-					return
-				}
-				this.cale.setEndDate(val)
-				this.cale.setDate(this.nowDate.fullDate)
-				this.weeks = this.cale.weeks
-			},
-			selected(newVal) {
-				// 字节小程序 watch 早于 created
-				if(!this.cale){
-					return
-				}
-				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
-				this.weeks = this.cale.weeks
-			},
-			pleStatus: {
-				immediate: true,
-				handler(newVal) {
-					const {
-						before,
-						after,
-						fulldate,
-						which
-					} = newVal
-					this.tempRange.before = before
-					this.tempRange.after = after
-					setTimeout(() => {
-						if (fulldate) {
-							this.cale.setHoverMultiple(fulldate)
-							if (before && after) {
-								this.cale.lastHover = true
-								if (this.rangeWithinMonth(after, before)) return
-								this.setDate(before)
-							} else {
-								this.cale.setMultiple(fulldate)
-								this.setDate(this.nowDate.fullDate)
-								this.calendar.fullDate = ''
-								this.cale.lastHover = false
-							}
-						} else {
-              // 字节小程序 watch 早于 created
-              if(!this.cale){
-                return
-              }
-
-							this.cale.setDefaultMultiple(before, after)
-							if (which === 'left' && before) {
-								this.setDate(before)
-								this.weeks = this.cale.weeks
-							} else if(after) {
-								this.setDate(after)
-								this.weeks = this.cale.weeks
-							}
-							this.cale.lastHover = true
-						}
-					}, 16)
-				}
-			}
-		},
-		computed: {
-			timepickerStartTime() {
-				const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
-				return activeDate === this.startDate ? this.selectableTimes.start : ''
-			},
-			timepickerEndTime() {
-				const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
-				return activeDate === this.endDate ? this.selectableTimes.end : ''
-			},
-			/**
-			 * for i18n
-			 */
-			selectDateText() {
-				return t("uni-datetime-picker.selectDate")
-			},
-			startDateText() {
-				return this.startPlaceholder || t("uni-datetime-picker.startDate")
-			},
-			endDateText() {
-				return this.endPlaceholder || t("uni-datetime-picker.endDate")
-			},
-			okText() {
-				return t("uni-datetime-picker.ok")
-			},
-			yearText() {
-				return t("uni-datetime-picker.year")
-			},
-			monthText() {
-				return t("uni-datetime-picker.month")
-			},
-			MONText() {
-				return t("uni-calender.MON")
-			},
-			TUEText() {
-				return t("uni-calender.TUE")
-			},
-			WEDText() {
-				return t("uni-calender.WED")
-			},
-			THUText() {
-				return t("uni-calender.THU")
-			},
-			FRIText() {
-				return t("uni-calender.FRI")
-			},
-			SATText() {
-				return t("uni-calender.SAT")
-			},
-			SUNText() {
-				return t("uni-calender.SUN")
-			},
-			confirmText() {
-				return t("uni-calender.confirm")
-			},
-		},
-		created() {
-			// 获取日历方法实例
-			this.cale = new Calendar({
-				selected: this.selected,
-				startDate: this.startDate,
-				endDate: this.endDate,
-				range: this.range,
-			})
-			// 选中某一天
-			this.init(this.date)
-		},
-		methods: {
-			leaveCale() {
-				this.firstEnter = true
-			},
-			handleMouse(weeks) {
-				if (weeks.disable) return
-				if (this.cale.lastHover) return
-				let {
-					before,
-					after
-				} = this.cale.multipleStatus
-				if (!before) return
-				this.calendar = weeks
-				// 设置范围选
-				this.cale.setHoverMultiple(this.calendar.fullDate)
-				this.weeks = this.cale.weeks
-				// hover时，进入一个日历，更新另一个
-				if (this.firstEnter) {
-					this.$emit('firstEnterCale', this.cale.multipleStatus)
-					this.firstEnter = false
-				}
-			},
-			rangeWithinMonth(A, B) {
-				const [yearA, monthA] = A.split('-')
-				const [yearB, monthB] = B.split('-')
-				return yearA === yearB && monthA === monthB
-			},
-			// 蒙版点击事件
-			maskClick() {
-        this.close()
-				this.$emit('maskClose')
-			},
-
-			clearCalender() {
-				if (this.range) {
-					this.timeRange.startTime = ''
-					this.timeRange.endTime = ''
-					this.tempRange.before = ''
-					this.tempRange.after = ''
-					this.cale.multipleStatus.before = ''
-					this.cale.multipleStatus.after = ''
-					this.cale.multipleStatus.data = []
-					this.cale.lastHover = false
-				} else {
-					this.time = ''
-					this.tempSingleDate = ''
-				}
-				this.calendar.fullDate = ''
-				this.setDate(new Date())
-			},
-
-			bindDateChange(e) {
-				const value = e.detail.value + '-1'
-				this.setDate(value)
-			},
-			/**
-			 * 初始化日期显示
-			 * @param {Object} date
-			 */
-			init(date) {
-        // 字节小程序 watch 早于 created
-				if(!this.cale){
-					return
-				}
-				this.cale.setDate(date || new Date())
-				this.weeks = this.cale.weeks
-				this.nowDate = this.cale.getInfo(date)
-        this.calendar = {...this.nowDate}
-        if(!date){
-          // 优化date为空默认不选中今天
-          this.calendar.fullDate = ''
-          if(this.defaultValue && !this.range){
-            // 暂时只支持移动端非范围选择
-            const defaultDate = new Date(this.defaultValue)
-            const fullDate = getDate(defaultDate)
-            const year = defaultDate.getFullYear()
-            const month = defaultDate.getMonth()+1
-            const date = defaultDate.getDate()
-            const day = defaultDate.getDay()
-            this.calendar = {
-              fullDate,
-              year,
-              month,
-              date,
-              day
-            },
-            this.tempSingleDate = fullDate
-            this.time = getTime(defaultDate, this.hideSecond)
-          }
-        }
-			},
-			/**
-			 * 打开日历弹窗
-			 */
-			open() {
-				// 弹窗模式并且清理数据
-				if (this.clearDate && !this.insert) {
-					this.cale.cleanMultipleStatus()
-					this.init(this.date)
-				}
-				this.show = true
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.aniMaskShow = true
-					}, 50)
-				})
-			},
-			/**
-			 * 关闭日历弹窗
-			 */
-			close() {
-				this.aniMaskShow = false
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.show = false
-						this.$emit('close')
-					}, 300)
-				})
-			},
-			/**
-			 * 确认按钮
-			 */
-			confirm() {
-				this.setEmit('confirm')
-				this.close()
-			},
-			/**
-			 * 变化触发
-			 */
-			change() {
-				if (!this.insert) return
-				this.setEmit('change')
-			},
-			/**
-			 * 选择月份触发
-			 */
-			monthSwitch() {
-				let {
-					year,
-					month
-				} = this.nowDate
-				this.$emit('monthSwitch', {
-					year,
-					month: Number(month)
-				})
-			},
-			/**
-			 * 派发事件
-			 * @param {Object} name
-			 */
-			setEmit(name) {
-        if(!this.range){
-					if(!this.calendar.fullDate){
-					  this.calendar = this.cale.getInfo(new Date())
-					  this.tempSingleDate = this.calendar.fullDate
-					}
-					if(this.hasTime && !this.time) {
-					  this.time = getTime(new Date(), this.hideSecond)
-					}
-				}
-				let {
-					year,
-					month,
-					date,
-					fullDate,
-					extraInfo
-				} = this.calendar
-				this.$emit(name, {
-					range: this.cale.multipleStatus,
-					year,
-					month,
-					date,
-					time: this.time,
-					timeRange: this.timeRange,
-					fulldate: fullDate,
-					extraInfo: extraInfo || {}
-				})
-			},
-			/**
-			 * 选择天触发
-			 * @param {Object} weeks
-			 */
-			choiceDate(weeks) {
-				if (weeks.disable) return
-				this.calendar = weeks
-				this.calendar.userChecked = true
-				// 设置多选
-				this.cale.setMultiple(this.calendar.fullDate, true)
-				this.weeks = this.cale.weeks
-				this.tempSingleDate = this.calendar.fullDate
-				const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
-				const afterDate = new Date(this.cale.multipleStatus.after).getTime()
-        // 如果先选择结束日期，后选择开始日期，需要交换
-				if (beforeDate > afterDate && afterDate) {
-					this.tempRange.before = this.cale.multipleStatus.after
-					this.tempRange.after = this.cale.multipleStatus.before
-				} else {
-					this.tempRange.before = this.cale.multipleStatus.before
-					this.tempRange.after = this.cale.multipleStatus.after
-				}
-				this.change()
-			},
-      changeMonth(type) {
-        let newDate
-        if(type === 'pre') {
-          newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
-        } else if(type === 'next') {
-          newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
-        }
-
-        this.setDate(newDate)
-				this.monthSwitch()
-      },
-			/**
-			 * 设置日期
-			 * @param {Object} date
-			 */
-			setDate(date) {
-				this.cale.setDate(date)
-				this.weeks = this.cale.weeks
-				this.nowDate = this.cale.getInfo(date)
-			}
-		}
-	}
-</script>
-
-<style lang="scss" >
-	$uni-primary: #007aff !default;
-
-	.uni-calendar {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-	}
-
-	.uni-calendar__mask {
-		position: fixed;
-		bottom: 0;
-		top: 0;
-		left: 0;
-		right: 0;
-		background-color: rgba(0, 0, 0, 0.4);
-		transition-property: opacity;
-		transition-duration: 0.3s;
-		opacity: 0;
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-	}
-
-	.uni-calendar--mask-show {
-		opacity: 1
-	}
-
-	.uni-calendar--fixed {
-		position: fixed;
-		bottom: calc(var(--window-bottom));
-		left: 0;
-		right: 0;
-		transition-property: transform;
-		transition-duration: 0.3s;
-		transform: translateY(460px);
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-	}
-
-	.uni-calendar--ani-show {
-		transform: translateY(0);
-	}
-
-	.uni-calendar__content {
-		background-color: #fff;
-	}
-
-	.uni-calendar__content-mobile {
-		border-top-left-radius: 10px;
-		border-top-right-radius: 10px;
-		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
-	}
-
-	.uni-calendar__header {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 50px;
-	}
-
-	.uni-calendar__header-mobile {
-		padding: 10px;
-		padding-bottom: 0;
-	}
-
-	.uni-calendar--fixed-top {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-		border-top-color: rgba(0, 0, 0, 0.4);
-		border-top-style: solid;
-		border-top-width: 1px;
-	}
-
-	.uni-calendar--fixed-width {
-		width: 50px;
-	}
-
-	.uni-calendar__backtoday {
-		position: absolute;
-		right: 0;
-		top: 25rpx;
-		padding: 0 5px;
-		padding-left: 10px;
-		height: 25px;
-		line-height: 25px;
-		font-size: 12px;
-		border-top-left-radius: 25px;
-		border-bottom-left-radius: 25px;
-		color: #fff;
-		background-color: #f1f1f1;
-	}
-
-	.uni-calendar__header-text {
-		text-align: center;
-		width: 100px;
-		font-size: 15px;
-		color: #666;
-	}
-
-	.uni-calendar__button-text {
-		text-align: center;
-		width: 100px;
-		font-size: 14px;
-		color: $uni-primary;
-		/* #ifndef APP-NVUE */
-		letter-spacing: 3px;
-		/* #endif */
-	}
-
-	.uni-calendar__header-btn-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		width: 50px;
-		height: 50px;
-	}
-
-	.uni-calendar__header-btn {
-		width: 9px;
-		height: 9px;
-		border-left-color: #808080;
-		border-left-style: solid;
-		border-left-width: 1px;
-		border-top-color: #555555;
-		border-top-style: solid;
-		border-top-width: 1px;
-	}
-
-	.uni-calendar--left {
-		transform: rotate(-45deg);
-	}
-
-	.uni-calendar--right {
-		transform: rotate(135deg);
-	}
-
-
-	.uni-calendar__weeks {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-calendar__weeks-item {
-		flex: 1;
-	}
-
-	.uni-calendar__weeks-day {
-		flex: 1;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 40px;
-		border-bottom-color: #F5F5F5;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-	}
-
-	.uni-calendar__weeks-day-text {
-		font-size: 12px;
-		color: #B2B2B2;
-	}
-
-	.uni-calendar__box {
-		position: relative;
-		// padding: 0 10px;
-		padding-bottom: 7px;
-	}
-
-	.uni-calendar__box-bg {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-	}
-
-	.uni-calendar__box-bg-text {
-		font-size: 200px;
-		font-weight: bold;
-		color: #999;
-		opacity: 0.1;
-		text-align: center;
-		/* #ifndef APP-NVUE */
-		line-height: 1;
-		/* #endif */
-	}
-
-	.uni-date-changed {
-		padding: 0 10px;
-		// line-height: 50px;
-		text-align: center;
-		color: #333;
-		border-top-color: #DCDCDC;
-		;
-		border-top-style: solid;
-		border-top-width: 1px;
-		flex: 1;
-	}
-
-	.uni-date-btn--ok {
-		padding: 20px 15px;
-	}
-
-	.uni-date-changed--time-start {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-	}
-
-	.uni-date-changed--time-end {
-		/* #ifndef APP-NVUE */
-    display: flex;
-		/* #endif */
-		align-items: center;
-	}
-
-	.uni-date-changed--time-date {
-    color: #999;
-		line-height: 50px;
-    /* #ifdef MP-TOUTIAO */
-    font-size: 16px;
-    /* #endif */
-		margin-right: 5px;
-		// opacity: 0.6;
-	}
-
-	.time-picker-style {
-		// width: 62px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center
-	}
-
-	.mr-10 {
-		margin-right: 10px;
-	}
-
-	.dialog-close {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		padding: 0 25px;
-		margin-top: 10px;
-	}
-
-	.dialog-close-plus {
-		width: 16px;
-		height: 2px;
-		background-color: #737987;
-		border-radius: 2px;
-		transform: rotate(45deg);
-	}
-
-	.dialog-close-rotate {
-		position: absolute;
-		transform: rotate(-45deg);
-	}
-
-	.uni-datetime-picker--btn {
-		border-radius: 100px;
-		height: 40px;
-		line-height: 40px;
-		background-color: $uni-primary;
-		color: #fff;
-		font-size: 16px;
-		letter-spacing: 2px;
-	}
-
-	/* #ifndef APP-NVUE */
-	.uni-datetime-picker--btn:active {
-		opacity: 0.7;
-	}
-	/* #endif */
-</style>
+<template>
+	<view class="uni-calendar" @mouseleave="leaveCale">
+
+		<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
+			@click="maskClick"></view>
+
+		<view v-if="insert || show" class="uni-calendar__content"
+			:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
+			<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
+
+				<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
+					<view class="uni-calendar__header-btn uni-calendar--left"></view>
+				</view>
+
+				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
+					<text
+						class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
+				</picker>
+
+				<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
+					<view class="uni-calendar__header-btn uni-calendar--right"></view>
+				</view>
+
+				<view v-if="!insert" class="dialog-close" @click="close">
+					<view class="dialog-close-plus" data-id="close"></view>
+					<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+				</view>
+			</view>
+			<view class="uni-calendar__box">
+
+				<view v-if="showMonth" class="uni-calendar__box-bg">
+					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+				</view>
+
+				<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
+					</view>
+				</view>
+
+				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
+							:selected="selected" :checkHover="range" @change="choiceDate"
+							@handleMouse="handleMouse">
+						</calendar-item>
+					</view>
+				</view>
+			</view>
+
+			<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
+				style="padding: 0 80px;">
+				<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
+				<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
+					:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
+				</time-picker>
+			</view>
+
+			<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
+				<view class="uni-date-changed--time-start">
+					<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
+					</view>
+					<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
+						:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
+					</time-picker>
+				</view>
+				<view style="line-height: 50px;">
+					<uni-icons type="arrowthinright" color="#999"></uni-icons>
+				</view>
+				<view class="uni-date-changed--time-end">
+					<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
+					<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
+						:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
+					</time-picker>
+				</view>
+			</view>
+
+			<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
+				<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { Calendar, getDate, getTime } from './util.js';
+	import calendarItem from './calendar-item.vue'
+	import timePicker from './time-picker.vue'
+
+	import { initVueI18n } from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	const { t } = initVueI18n(i18nMessages)
+
+	/**
+	 * Calendar 日历
+	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+	 * @property {String} date 自定义当前时间，默认为今天
+	 * @property {String} startDate 日期选择范围-开始日期
+	 * @property {String} endDate 日期选择范围-结束日期
+	 * @property {Boolean} range 范围选择
+	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
+	 * 	@value true 弹窗模式
+	 * 	@value false 插入模式
+	 * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
+	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
+	 * @property {Boolean} showMonth 是否选择月份为背景
+	 * @property {[String} defaultValue 选择器打开时默认显示的时间
+	 * @event {Function} change 日期改变，`insert :ture` 时生效
+	 * @event {Function} confirm 确认选择`insert :false` 时生效
+	 * @event {Function} monthSwitch 切换月份时触发
+	 * @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+	 */
+	export default {
+		components: {
+			calendarItem,
+			timePicker
+		},
+		props: {
+			date: {
+				type: String,
+				default: ''
+			},
+			defTime: {
+				type: [String, Object],
+				default: ''
+			},
+			selectableTimes: {
+				type: [Object],
+				default () {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			startDate: {
+				type: String,
+				default: ''
+			},
+			endDate: {
+				type: String,
+				default: ''
+			},
+      startPlaceholder: {
+        type: String,
+				default: ''
+			},
+			endPlaceholder: {
+				type: String,
+				default: ''
+			},
+			range: {
+				type: Boolean,
+				default: false
+			},
+			hasTime: {
+				type: Boolean,
+				default: false
+			},
+			insert: {
+				type: Boolean,
+				default: true
+			},
+			showMonth: {
+				type: Boolean,
+				default: true
+			},
+			clearDate: {
+				type: Boolean,
+				default: true
+			},
+			checkHover: {
+				type: Boolean,
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			},
+			pleStatus: {
+				type: Object,
+				default () {
+					return {
+						before: '',
+						after: '',
+						data: [],
+						fulldate: ''
+					}
+				}
+			},
+      defaultValue: {
+        type: [String, Object, Array],
+        default: ''
+      }
+		},
+		data() {
+			return {
+				show: false,
+				weeks: [],
+				calendar: {},
+				nowDate: {},
+				aniMaskShow: false,
+				firstEnter: true,
+				time: '',
+				timeRange: {
+					startTime: '',
+					endTime: ''
+				},
+				tempSingleDate: '',
+				tempRange: {
+					before: '',
+					after: ''
+				}
+			}
+		},
+		watch: {
+			date: {
+				immediate: true,
+				handler(newVal) {
+					if (!this.range) {
+						this.tempSingleDate = newVal
+						setTimeout(() => {
+							this.init(newVal)
+						}, 100)
+					}
+				}
+			},
+			defTime: {
+				immediate: true,
+				handler(newVal) {
+					if (!this.range) {
+						this.time = newVal
+					} else {
+						this.timeRange.startTime = newVal.start
+						this.timeRange.endTime = newVal.end
+					}
+				}
+			},
+			startDate(val) {
+				// 字节小程序 watch 早于 created
+				if(!this.cale){
+					return
+				}
+				this.cale.setStartDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			endDate(val) {
+				// 字节小程序 watch 早于 created
+				if(!this.cale){
+					return
+				}
+				this.cale.setEndDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			selected(newVal) {
+				// 字节小程序 watch 早于 created
+				if(!this.cale){
+					return
+				}
+				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+				this.weeks = this.cale.weeks
+			},
+			pleStatus: {
+				immediate: true,
+				handler(newVal) {
+					const {
+						before,
+						after,
+						fulldate,
+						which
+					} = newVal
+					this.tempRange.before = before
+					this.tempRange.after = after
+					setTimeout(() => {
+						if (fulldate) {
+							this.cale.setHoverMultiple(fulldate)
+							if (before && after) {
+								this.cale.lastHover = true
+								if (this.rangeWithinMonth(after, before)) return
+								this.setDate(before)
+							} else {
+								this.cale.setMultiple(fulldate)
+								this.setDate(this.nowDate.fullDate)
+								this.calendar.fullDate = ''
+								this.cale.lastHover = false
+							}
+						} else {
+              // 字节小程序 watch 早于 created
+              if(!this.cale){
+                return
+              }
+
+							this.cale.setDefaultMultiple(before, after)
+							if (which === 'left' && before) {
+								this.setDate(before)
+								this.weeks = this.cale.weeks
+							} else if(after) {
+								this.setDate(after)
+								this.weeks = this.cale.weeks
+							}
+							this.cale.lastHover = true
+						}
+					}, 16)
+				}
+			}
+		},
+		computed: {
+			timepickerStartTime() {
+				const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
+				return activeDate === this.startDate ? this.selectableTimes.start : ''
+			},
+			timepickerEndTime() {
+				const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
+				return activeDate === this.endDate ? this.selectableTimes.end : ''
+			},
+			/**
+			 * for i18n
+			 */
+			selectDateText() {
+				return t("uni-datetime-picker.selectDate")
+			},
+			startDateText() {
+				return this.startPlaceholder || t("uni-datetime-picker.startDate")
+			},
+			endDateText() {
+				return this.endPlaceholder || t("uni-datetime-picker.endDate")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			yearText() {
+				return t("uni-datetime-picker.year")
+			},
+			monthText() {
+				return t("uni-datetime-picker.month")
+			},
+			MONText() {
+				return t("uni-calender.MON")
+			},
+			TUEText() {
+				return t("uni-calender.TUE")
+			},
+			WEDText() {
+				return t("uni-calender.WED")
+			},
+			THUText() {
+				return t("uni-calender.THU")
+			},
+			FRIText() {
+				return t("uni-calender.FRI")
+			},
+			SATText() {
+				return t("uni-calender.SAT")
+			},
+			SUNText() {
+				return t("uni-calender.SUN")
+			},
+			confirmText() {
+				return t("uni-calender.confirm")
+			},
+		},
+		created() {
+			// 获取日历方法实例
+			this.cale = new Calendar({
+				selected: this.selected,
+				startDate: this.startDate,
+				endDate: this.endDate,
+				range: this.range,
+			})
+			// 选中某一天
+			this.init(this.date)
+		},
+		methods: {
+			leaveCale() {
+				this.firstEnter = true
+			},
+			handleMouse(weeks) {
+				if (weeks.disable) return
+				if (this.cale.lastHover) return
+				let {
+					before,
+					after
+				} = this.cale.multipleStatus
+				if (!before) return
+				this.calendar = weeks
+				// 设置范围选
+				this.cale.setHoverMultiple(this.calendar.fullDate)
+				this.weeks = this.cale.weeks
+				// hover时，进入一个日历，更新另一个
+				if (this.firstEnter) {
+					this.$emit('firstEnterCale', this.cale.multipleStatus)
+					this.firstEnter = false
+				}
+			},
+			rangeWithinMonth(A, B) {
+				const [yearA, monthA] = A.split('-')
+				const [yearB, monthB] = B.split('-')
+				return yearA === yearB && monthA === monthB
+			},
+			// 蒙版点击事件
+			maskClick() {
+        this.close()
+				this.$emit('maskClose')
+			},
+
+			clearCalender() {
+				if (this.range) {
+					this.timeRange.startTime = ''
+					this.timeRange.endTime = ''
+					this.tempRange.before = ''
+					this.tempRange.after = ''
+					this.cale.multipleStatus.before = ''
+					this.cale.multipleStatus.after = ''
+					this.cale.multipleStatus.data = []
+					this.cale.lastHover = false
+				} else {
+					this.time = ''
+					this.tempSingleDate = ''
+				}
+				this.calendar.fullDate = ''
+				this.setDate(new Date())
+			},
+
+			bindDateChange(e) {
+				const value = e.detail.value + '-1'
+				this.setDate(value)
+			},
+			/**
+			 * 初始化日期显示
+			 * @param {Object} date
+			 */
+			init(date) {
+        // 字节小程序 watch 早于 created
+				if(!this.cale){
+					return
+				}
+				this.cale.setDate(date || new Date())
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+        this.calendar = {...this.nowDate}
+        if(!date){
+          // 优化date为空默认不选中今天
+          this.calendar.fullDate = ''
+          if(this.defaultValue && !this.range){
+            // 暂时只支持移动端非范围选择
+            const defaultDate = new Date(this.defaultValue)
+            const fullDate = getDate(defaultDate)
+            const year = defaultDate.getFullYear()
+            const month = defaultDate.getMonth()+1
+            const date = defaultDate.getDate()
+            const day = defaultDate.getDay()
+            this.calendar = {
+              fullDate,
+              year,
+              month,
+              date,
+              day
+            },
+            this.tempSingleDate = fullDate
+            this.time = getTime(defaultDate, this.hideSecond)
+          }
+        }
+			},
+			/**
+			 * 打开日历弹窗
+			 */
+			open() {
+				// 弹窗模式并且清理数据
+				if (this.clearDate && !this.insert) {
+					this.cale.cleanMultipleStatus()
+					this.init(this.date)
+				}
+				this.show = true
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.aniMaskShow = true
+					}, 50)
+				})
+			},
+			/**
+			 * 关闭日历弹窗
+			 */
+			close() {
+				this.aniMaskShow = false
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.show = false
+						this.$emit('close')
+					}, 300)
+				})
+			},
+			/**
+			 * 确认按钮
+			 */
+			confirm() {
+				this.setEmit('confirm')
+				this.close()
+			},
+			/**
+			 * 变化触发
+			 */
+			change() {
+				if (!this.insert) return
+				this.setEmit('change')
+			},
+			/**
+			 * 选择月份触发
+			 */
+			monthSwitch() {
+				let {
+					year,
+					month
+				} = this.nowDate
+				this.$emit('monthSwitch', {
+					year,
+					month: Number(month)
+				})
+			},
+			/**
+			 * 派发事件
+			 * @param {Object} name
+			 */
+			setEmit(name) {
+        if(!this.range){
+					if(!this.calendar.fullDate){
+					  this.calendar = this.cale.getInfo(new Date())
+					  this.tempSingleDate = this.calendar.fullDate
+					}
+					if(this.hasTime && !this.time) {
+					  this.time = getTime(new Date(), this.hideSecond)
+					}
+				}
+				let {
+					year,
+					month,
+					date,
+					fullDate,
+					extraInfo
+				} = this.calendar
+				this.$emit(name, {
+					range: this.cale.multipleStatus,
+					year,
+					month,
+					date,
+					time: this.time,
+					timeRange: this.timeRange,
+					fulldate: fullDate,
+					extraInfo: extraInfo || {}
+				})
+			},
+			/**
+			 * 选择天触发
+			 * @param {Object} weeks
+			 */
+			choiceDate(weeks) {
+				if (weeks.disable) return
+				this.calendar = weeks
+				this.calendar.userChecked = true
+				// 设置多选
+				this.cale.setMultiple(this.calendar.fullDate, true)
+				this.weeks = this.cale.weeks
+				this.tempSingleDate = this.calendar.fullDate
+				const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
+				const afterDate = new Date(this.cale.multipleStatus.after).getTime()
+        // 如果先选择结束日期，后选择开始日期，需要交换
+				if (beforeDate > afterDate && afterDate) {
+					this.tempRange.before = this.cale.multipleStatus.after
+					this.tempRange.after = this.cale.multipleStatus.before
+				} else {
+					this.tempRange.before = this.cale.multipleStatus.before
+					this.tempRange.after = this.cale.multipleStatus.after
+				}
+				this.change()
+			},
+      changeMonth(type) {
+        let newDate
+        if(type === 'pre') {
+          newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
+        } else if(type === 'next') {
+          newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
+        }
+
+        this.setDate(newDate)
+				this.monthSwitch()
+      },
+			/**
+			 * 设置日期
+			 * @param {Object} date
+			 */
+			setDate(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	$uni-primary: #007aff !default;
+
+	.uni-calendar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-calendar__mask {
+		position: fixed;
+		bottom: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-property: opacity;
+		transition-duration: 0.3s;
+		opacity: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--mask-show {
+		opacity: 1
+	}
+
+	.uni-calendar--fixed {
+		position: fixed;
+		bottom: calc(var(--window-bottom));
+		left: 0;
+		right: 0;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(460px);
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--ani-show {
+		transform: translateY(0);
+	}
+
+	.uni-calendar__content {
+		background-color: #fff;
+	}
+
+	.uni-calendar__content-mobile {
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.uni-calendar__header {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 50px;
+	}
+
+	.uni-calendar__header-mobile {
+		padding: 10px;
+		padding-bottom: 0;
+	}
+
+	.uni-calendar--fixed-top {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		border-top-color: rgba(0, 0, 0, 0.4);
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--fixed-width {
+		width: 50px;
+	}
+
+	.uni-calendar__backtoday {
+		position: absolute;
+		right: 0;
+		top: 25rpx;
+		padding: 0 5px;
+		padding-left: 10px;
+		height: 25px;
+		line-height: 25px;
+		font-size: 12px;
+		border-top-left-radius: 25px;
+		border-bottom-left-radius: 25px;
+		color: #fff;
+		background-color: #f1f1f1;
+	}
+
+	.uni-calendar__header-text {
+		text-align: center;
+		width: 100px;
+		font-size: 15px;
+		color: #666;
+	}
+
+	.uni-calendar__button-text {
+		text-align: center;
+		width: 100px;
+		font-size: 14px;
+		color: $uni-primary;
+		/* #ifndef APP-NVUE */
+		letter-spacing: 3px;
+		/* #endif */
+	}
+
+	.uni-calendar__header-btn-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 50px;
+		height: 50px;
+	}
+
+	.uni-calendar__header-btn {
+		width: 9px;
+		height: 9px;
+		border-left-color: #808080;
+		border-left-style: solid;
+		border-left-width: 1px;
+		border-top-color: #555555;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--left {
+		transform: rotate(-45deg);
+	}
+
+	.uni-calendar--right {
+		transform: rotate(135deg);
+	}
+
+
+	.uni-calendar__weeks {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-calendar__weeks-item {
+		flex: 1;
+	}
+
+	.uni-calendar__weeks-day {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		border-bottom-color: #F5F5F5;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-calendar__weeks-day-text {
+		font-size: 12px;
+		color: #B2B2B2;
+	}
+
+	.uni-calendar__box {
+		position: relative;
+		// padding: 0 10px;
+		padding-bottom: 7px;
+	}
+
+	.uni-calendar__box-bg {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.uni-calendar__box-bg-text {
+		font-size: 200px;
+		font-weight: bold;
+		color: #999;
+		opacity: 0.1;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		line-height: 1;
+		/* #endif */
+	}
+
+	.uni-date-changed {
+		padding: 0 10px;
+		// line-height: 50px;
+		text-align: center;
+		color: #333;
+		border-top-color: #DCDCDC;
+		;
+		border-top-style: solid;
+		border-top-width: 1px;
+		flex: 1;
+	}
+
+	.uni-date-btn--ok {
+		padding: 20px 15px;
+	}
+
+	.uni-date-changed--time-start {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.uni-date-changed--time-end {
+		/* #ifndef APP-NVUE */
+    display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.uni-date-changed--time-date {
+    color: #999;
+		line-height: 50px;
+    /* #ifdef MP-TOUTIAO */
+    font-size: 16px;
+    /* #endif */
+		margin-right: 5px;
+		// opacity: 0.6;
+	}
+
+	.time-picker-style {
+		// width: 62px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center
+	}
+
+	.mr-10 {
+		margin-right: 10px;
+	}
+
+	.dialog-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 0 25px;
+		margin-top: 10px;
+	}
+
+	.dialog-close-plus {
+		width: 16px;
+		height: 2px;
+		background-color: #737987;
+		border-radius: 2px;
+		transform: rotate(45deg);
+	}
+
+	.dialog-close-rotate {
+		position: absolute;
+		transform: rotate(-45deg);
+	}
+
+	.uni-datetime-picker--btn {
+		border-radius: 100px;
+		height: 40px;
+		line-height: 40px;
+		background-color: $uni-primary;
+		color: #fff;
+		font-size: 16px;
+		letter-spacing: 2px;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-datetime-picker--btn:active {
+		opacity: 0.7;
+	}
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
index 024f22f..56cd0a6 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
@@ -1,22 +1,22 @@
-{
-	"uni-datetime-picker.selectDate": "select date",
-	"uni-datetime-picker.selectTime": "select time",
-	"uni-datetime-picker.selectDateTime": "select date and time",
-	"uni-datetime-picker.startDate": "start date",
-	"uni-datetime-picker.endDate": "end date",
-	"uni-datetime-picker.startTime": "start time",
-	"uni-datetime-picker.endTime": "end time",
-	"uni-datetime-picker.ok": "ok",
-	"uni-datetime-picker.clear": "clear",
-	"uni-datetime-picker.cancel": "cancel",
-	"uni-datetime-picker.year": "-",
-	"uni-datetime-picker.month": "",
-	"uni-calender.MON": "MON",
-	"uni-calender.TUE": "TUE",
-	"uni-calender.WED": "WED",
-	"uni-calender.THU": "THU",
-	"uni-calender.FRI": "FRI",
-	"uni-calender.SAT": "SAT",
-	"uni-calender.SUN": "SUN",
-	"uni-calender.confirm": "confirm"
-}
+{
+	"uni-datetime-picker.selectDate": "select date",
+	"uni-datetime-picker.selectTime": "select time",
+	"uni-datetime-picker.selectDateTime": "select date and time",
+	"uni-datetime-picker.startDate": "start date",
+	"uni-datetime-picker.endDate": "end date",
+	"uni-datetime-picker.startTime": "start time",
+	"uni-datetime-picker.endTime": "end time",
+	"uni-datetime-picker.ok": "ok",
+	"uni-datetime-picker.clear": "clear",
+	"uni-datetime-picker.cancel": "cancel",
+	"uni-datetime-picker.year": "-",
+	"uni-datetime-picker.month": "",
+	"uni-calender.MON": "MON",
+	"uni-calender.TUE": "TUE",
+	"uni-calender.WED": "WED",
+	"uni-calender.THU": "THU",
+	"uni-calender.FRI": "FRI",
+	"uni-calender.SAT": "SAT",
+	"uni-calender.SUN": "SUN",
+	"uni-calender.confirm": "confirm"
+}
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
index de7509c..fa8f0f3 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
@@ -1,8 +1,8 @@
-import en from './en.json'
-import zhHans from './zh-Hans.json'
-import zhHant from './zh-Hant.json'
-export default {
-	en,
-	'zh-Hans': zhHans,
-	'zh-Hant': zhHant
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
 }
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
index 81a042a..f03dff6 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
@@ -1,934 +1,934 @@
-<template>
-	<view class="uni-datetime-picker">
-		<view @click="initTimePicker">
-			<slot>
-				<view class="uni-datetime-picker-timebox-pointer"
-					:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
-					<text class="uni-datetime-picker-text">{{time}}</text>
-					<view v-if="!time" class="uni-datetime-picker-time">
-						<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
-					</view>
-				</view>
-			</slot>
-		</view>
-		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
-		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
-			:style="fixNvueBug">
-			<view class="uni-title">
-				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
-			</view>
-			<view v-if="dateShow" class="uni-datetime-picker__container-box">
-				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
-					@change="bindDateChange">
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-				</picker-view>
-				<!-- 兼容 nvue 不支持伪类 -->
-				<text class="uni-datetime-picker-sign sign-left">-</text>
-				<text class="uni-datetime-picker-sign sign-right">-</text>
-			</view>
-			<view v-if="timeShow" class="uni-datetime-picker__container-box">
-				<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
-					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column v-if="!hideSecond">
-						<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-				</picker-view>
-				<!-- 兼容 nvue 不支持伪类 -->
-				<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
-				<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
-			</view>
-			<view class="uni-datetime-picker-btn">
-				<view @click="clearTime">
-					<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
-				</view>
-				<view class="uni-datetime-picker-btn-group">
-					<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
-						<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
-					</view>
-					<view @click="setTime">
-						<text class="uni-datetime-picker-btn-text">{{okText}}</text>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import { initVueI18n } from '@dcloudio/uni-i18n'
-	import i18nMessages from './i18n/index.js'
-	const {	t	} = initVueI18n(i18nMessages)
-  import { fixIosDateFormat } from './util'
-
-	/**
-	 * DatetimePicker 时间选择器
-	 * @description 可以同时选择日期和时间的选择器
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
-	 * @property {String} type = [datetime | date | time] 显示模式
-	 * @property {Boolean} multiple = [true|false] 是否多选
-	 * @property {String|Number} value 默认值
-	 * @property {String|Number} start 起始日期或时间
-	 * @property {String|Number} end 起始日期或时间
-	 * @property {String} return-type = [timestamp | string]
-	 * @event {Function} change  选中发生变化触发
-	 */
-
-	export default {
-		name: 'UniDatetimePicker',
-		data() {
-			return {
-				indicatorStyle: `height: 50px;`,
-				visible: false,
-				fixNvueBug: {},
-				dateShow: true,
-				timeShow: true,
-				title: '日期和时间',
-				// 输入框当前时间
-				time: '',
-				// 当前的年月日时分秒
-				year: 1920,
-				month: 0,
-				day: 0,
-				hour: 0,
-				minute: 0,
-				second: 0,
-				// 起始时间
-				startYear: 1920,
-				startMonth: 1,
-				startDay: 1,
-				startHour: 0,
-				startMinute: 0,
-				startSecond: 0,
-				// 结束时间
-				endYear: 2120,
-				endMonth: 12,
-				endDay: 31,
-				endHour: 23,
-				endMinute: 59,
-				endSecond: 59,
-			}
-		},
-		props: {
-			type: {
-				type: String,
-				default: 'datetime'
-			},
-			value: {
-				type: [String, Number],
-				default: ''
-			},
-			modelValue: {
-				type: [String, Number],
-				default: ''
-			},
-			start: {
-				type: [Number, String],
-				default: ''
-			},
-			end: {
-				type: [Number, String],
-				default: ''
-			},
-			returnType: {
-				type: String,
-				default: 'string'
-			},
-			disabled: {
-				type: [Boolean, String],
-				default: false
-			},
-			border: {
-				type: [Boolean, String],
-				default: true
-			},
-			hideSecond: {
-				type: [Boolean, String],
-				default: false
-			}
-		},
-		watch: {
-			// #ifndef VUE3
-			value: {
-				handler(newVal) {
-          if (newVal) {
-            this.parseValue(fixIosDateFormat(newVal))
-						this.initTime(false)
-					} else {
-            this.time = ''
-						this.parseValue(Date.now())
-					}
-				},
-				immediate: true
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-        handler(newVal) {
-          if (newVal) {
-						this.parseValue(fixIosDateFormat(newVal))
-						this.initTime(false)
-					} else {
-						this.time = ''
-						this.parseValue(Date.now())
-					}
-				},
-				immediate: true
-			},
-			// #endif
-			type: {
-				handler(newValue) {
-					if (newValue === 'date') {
-						this.dateShow = true
-						this.timeShow = false
-						this.title = '日期'
-					} else if (newValue === 'time') {
-						this.dateShow = false
-						this.timeShow = true
-						this.title = '时间'
-					} else {
-						this.dateShow = true
-						this.timeShow = true
-						this.title = '日期和时间'
-					}
-				},
-				immediate: true
-			},
-			start: {
-				handler(newVal) {
-					this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
-				},
-				immediate: true
-			},
-			end: {
-				handler(newVal) {
-					this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
-				},
-				immediate: true
-			},
-
-			// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
-			months(newVal) {
-				this.checkValue('month', this.month, newVal)
-			},
-			days(newVal) {
-				this.checkValue('day', this.day, newVal)
-			},
-			hours(newVal) {
-				this.checkValue('hour', this.hour, newVal)
-			},
-			minutes(newVal) {
-				this.checkValue('minute', this.minute, newVal)
-			},
-			seconds(newVal) {
-				this.checkValue('second', this.second, newVal)
-			}
-		},
-		computed: {
-			// 当前年、月、日、时、分、秒选择范围
-			years() {
-				return this.getCurrentRange('year')
-			},
-
-			months() {
-				return this.getCurrentRange('month')
-			},
-
-			days() {
-				return this.getCurrentRange('day')
-			},
-
-			hours() {
-				return this.getCurrentRange('hour')
-			},
-
-			minutes() {
-				return this.getCurrentRange('minute')
-			},
-
-			seconds() {
-				return this.getCurrentRange('second')
-			},
-
-			// picker 当前值数组
-			ymd() {
-				return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
-			},
-			hms() {
-				return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
-			},
-
-			// 当前 date 是 start
-			currentDateIsStart() {
-				return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
-			},
-
-			// 当前 date 是 end
-			currentDateIsEnd() {
-				return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
-			},
-
-			// 当前年、月、日、时、分、秒的最小值和最大值
-			minYear() {
-				return this.startYear
-			},
-			maxYear() {
-				return this.endYear
-			},
-			minMonth() {
-				if (this.year === this.startYear) {
-					return this.startMonth
-				} else {
-					return 1
-				}
-			},
-			maxMonth() {
-				if (this.year === this.endYear) {
-					return this.endMonth
-				} else {
-					return 12
-				}
-			},
-			minDay() {
-				if (this.year === this.startYear && this.month === this.startMonth) {
-					return this.startDay
-				} else {
-					return 1
-				}
-			},
-			maxDay() {
-				if (this.year === this.endYear && this.month === this.endMonth) {
-					return this.endDay
-				} else {
-					return this.daysInMonth(this.year, this.month)
-				}
-			},
-			minHour() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsStart) {
-						return this.startHour
-					} else {
-						return 0
-					}
-				}
-				if (this.type === 'time') {
-					return this.startHour
-				}
-			},
-			maxHour() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsEnd) {
-						return this.endHour
-					} else {
-						return 23
-					}
-				}
-				if (this.type === 'time') {
-					return this.endHour
-				}
-			},
-			minMinute() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsStart && this.hour === this.startHour) {
-						return this.startMinute
-					} else {
-						return 0
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.startHour) {
-						return this.startMinute
-					} else {
-						return 0
-					}
-				}
-			},
-			maxMinute() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsEnd && this.hour === this.endHour) {
-						return this.endMinute
-					} else {
-						return 59
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.endHour) {
-						return this.endMinute
-					} else {
-						return 59
-					}
-				}
-			},
-			minSecond() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
-						return this.startSecond
-					} else {
-						return 0
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.startHour && this.minute === this.startMinute) {
-						return this.startSecond
-					} else {
-						return 0
-					}
-				}
-			},
-			maxSecond() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
-						return this.endSecond
-					} else {
-						return 59
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.endHour && this.minute === this.endMinute) {
-						return this.endSecond
-					} else {
-						return 59
-					}
-				}
-			},
-
-			/**
-			 * for i18n
-			 */
-			selectTimeText() {
-				return t("uni-datetime-picker.selectTime")
-			},
-			okText() {
-				return t("uni-datetime-picker.ok")
-			},
-			clearText() {
-				return t("uni-datetime-picker.clear")
-			},
-			cancelText() {
-				return t("uni-datetime-picker.cancel")
-			}
-		},
-
-		mounted() {
-			// #ifdef APP-NVUE
-			const res = uni.getSystemInfoSync();
-			this.fixNvueBug = {
-				top: res.windowHeight / 2,
-				left: res.windowWidth / 2
-			}
-			// #endif
-		},
-
-		methods: {
-			/**
-			 * @param {Object} item
-			 * 小于 10 在前面加个 0
-			 */
-
-			lessThanTen(item) {
-				return item < 10 ? '0' + item : item
-			},
-
-			/**
-			 * 解析时分秒字符串，例如：00:00:00
-			 * @param {String} timeString
-			 */
-			parseTimeType(timeString) {
-				if (timeString) {
-					let timeArr = timeString.split(':')
-					this.hour = Number(timeArr[0])
-					this.minute = Number(timeArr[1])
-					this.second = Number(timeArr[2])
-				}
-			},
-
-			/**
-			 * 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
-			 * @param {String | Number} datetime
-			 */
-			initPickerValue(datetime) {
-				let defaultValue = null
-				if (datetime) {
-					defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
-				} else {
-					defaultValue = Date.now()
-					defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
-				}
-				this.parseValue(defaultValue)
-			},
-
-			/**
-			 * 初始值规则：
-			 * - 用户设置初始值 value
-			 * 	- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
-			 * 	- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
-			 * 	- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
-			 * 	- 无起始终止时间，则初始值为 value
-			 * - 无初始值 value，则初始值为当前本地时间 Date.now()
-			 * @param {Object} value
-			 * @param {Object} dateBase
-			 */
-			compareValueWithStartAndEnd(value, start, end) {
-				let winner = null
-				value = this.superTimeStamp(value)
-				start = this.superTimeStamp(start)
-				end = this.superTimeStamp(end)
-
-				if (start && end) {
-					if (value < start) {
-						winner = new Date(start)
-					} else if (value > end) {
-						winner = new Date(end)
-					} else {
-						winner = new Date(value)
-					}
-				} else if (start && !end) {
-					winner = start <= value ? new Date(value) : new Date(start)
-				} else if (!start && end) {
-					winner = value <= end ? new Date(value) : new Date(end)
-				} else {
-					winner = new Date(value)
-				}
-
-				return winner
-			},
-
-			/**
-			 * 转换为可比较的时间戳，接受日期、时分秒、时间戳
-			 * @param {Object} value
-			 */
-			superTimeStamp(value) {
-				let dateBase = ''
-				if (this.type === 'time' && value && typeof value === 'string') {
-					const now = new Date()
-					const year = now.getFullYear()
-					const month = now.getMonth() + 1
-					const day = now.getDate()
-					dateBase = year + '/' + month + '/' + day + ' '
-				}
-				if (Number(value)) {
-					value = parseInt(value)
-					dateBase = 0
-				}
-				return this.createTimeStamp(dateBase + value)
-			},
-
-			/**
-			 * 解析默认值 value，字符串、时间戳
-			 * @param {Object} defaultTime
-			 */
-			parseValue(value) {
-				if (!value) {
-					return
-				}
-				if (this.type === 'time' && typeof value === "string") {
-					this.parseTimeType(value)
-				} else {
-					let defaultDate = null
-					defaultDate = new Date(value)
-					if (this.type !== 'time') {
-						this.year = defaultDate.getFullYear()
-						this.month = defaultDate.getMonth() + 1
-						this.day = defaultDate.getDate()
-					}
-					if (this.type !== 'date') {
-						this.hour = defaultDate.getHours()
-						this.minute = defaultDate.getMinutes()
-						this.second = defaultDate.getSeconds()
-					}
-				}
-				if (this.hideSecond) {
-					this.second = 0
-				}
-			},
-
-			/**
-			 * 解析可选择时间范围 start、end，年月日字符串、时间戳
-			 * @param {Object} defaultTime
-			 */
-			parseDatetimeRange(point, pointType) {
-				// 时间为空，则重置为初始值
-				if (!point) {
-					if (pointType === 'start') {
-						this.startYear = 1920
-						this.startMonth = 1
-						this.startDay = 1
-						this.startHour = 0
-						this.startMinute = 0
-						this.startSecond = 0
-					}
-					if (pointType === 'end') {
-						this.endYear = 2120
-						this.endMonth = 12
-						this.endDay = 31
-						this.endHour = 23
-						this.endMinute = 59
-						this.endSecond = 59
-					}
-					return
-				}
-				if (this.type === 'time') {
-					const pointArr = point.split(':')
-					this[pointType + 'Hour'] = Number(pointArr[0])
-					this[pointType + 'Minute'] = Number(pointArr[1])
-					this[pointType + 'Second'] = Number(pointArr[2])
-				} else {
-					if (!point) {
-						pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
-						return
-					}
-					if (Number(point)) {
-						point = parseInt(point)
-					}
-					// datetime 的 end 没有时分秒, 则不限制
-					const hasTime = /[0-9]:[0-9]/
-					if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
-							point)) {
-						point = point + ' 23:59:59'
-					}
-					const pointDate = new Date(point)
-					this[pointType + 'Year'] = pointDate.getFullYear()
-					this[pointType + 'Month'] = pointDate.getMonth() + 1
-					this[pointType + 'Day'] = pointDate.getDate()
-					if (this.type === 'datetime') {
-						this[pointType + 'Hour'] = pointDate.getHours()
-						this[pointType + 'Minute'] = pointDate.getMinutes()
-						this[pointType + 'Second'] = pointDate.getSeconds()
-					}
-				}
-			},
-
-			// 获取 年、月、日、时、分、秒 当前可选范围
-			getCurrentRange(value) {
-				const range = []
-				for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
-					range.push(i)
-				}
-				return range
-			},
-
-			// 字符串首字母大写
-			capitalize(str) {
-				return str.charAt(0).toUpperCase() + str.slice(1)
-			},
-
-			// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
-			checkValue(name, value, values) {
-				if (values.indexOf(value) === -1) {
-					this[name] = values[0]
-				}
-			},
-
-			// 每个月的实际天数
-			daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
-				return new Date(year, month, 0).getDate();
-			},
-
-			//兼容 iOS、safari 日期格式
-			fixIosDateFormat(value) {
-				if (typeof value === 'string') {
-					value = value.replace(/-/g, '/')
-				}
-				return value
-			},
-
-			/**
-			 * 生成时间戳
-			 * @param {Object} time
-			 */
-			createTimeStamp(time) {
-				if (!time) return
-				if (typeof time === "number") {
-					return time
-				} else {
-					time = time.replace(/-/g, '/')
-					if (this.type === 'date') {
-						time = time + ' ' + '00:00:00'
-					}
-					return Date.parse(time)
-				}
-			},
-
-			/**
-			 * 生成日期或时间的字符串
-			 */
-			createDomSting() {
-				const yymmdd = this.year +
-					'-' +
-					this.lessThanTen(this.month) +
-					'-' +
-					this.lessThanTen(this.day)
-
-				let hhmmss = this.lessThanTen(this.hour) +
-					':' +
-					this.lessThanTen(this.minute)
-
-				if (!this.hideSecond) {
-					hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
-				}
-
-				if (this.type === 'date') {
-					return yymmdd
-				} else if (this.type === 'time') {
-					return hhmmss
-				} else {
-					return yymmdd + ' ' + hhmmss
-				}
-			},
-
-			/**
-			 * 初始化返回值，并抛出 change 事件
-			 */
-			initTime(emit = true) {
-				this.time = this.createDomSting()
-				if (!emit) return
-				if (this.returnType === 'timestamp' && this.type !== 'time') {
-					this.$emit('change', this.createTimeStamp(this.time))
-					this.$emit('input', this.createTimeStamp(this.time))
-					this.$emit('update:modelValue', this.createTimeStamp(this.time))
-				} else {
-					this.$emit('change', this.time)
-					this.$emit('input', this.time)
-					this.$emit('update:modelValue', this.time)
-				}
-			},
-
-			/**
-			 * 用户选择日期或时间更新 data
-			 * @param {Object} e
-			 */
-			bindDateChange(e) {
-				const val = e.detail.value
-				this.year = this.years[val[0]]
-				this.month = this.months[val[1]]
-				this.day = this.days[val[2]]
-			},
-			bindTimeChange(e) {
-				const val = e.detail.value
-				this.hour = this.hours[val[0]]
-				this.minute = this.minutes[val[1]]
-				this.second = this.seconds[val[2]]
-			},
-
-			/**
-			 * 初始化弹出层
-			 */
-			initTimePicker() {
-				if (this.disabled) return
-				const value = fixIosDateFormat(this.time)
-				this.initPickerValue(value)
-				this.visible = !this.visible
-			},
-
-			/**
-			 * 触发或关闭弹框
-			 */
-			tiggerTimePicker(e) {
-				this.visible = !this.visible
-			},
-
-			/**
-			 * 用户点击“清空”按钮，清空当前值
-			 */
-			clearTime() {
-				this.time = ''
-				this.$emit('change', this.time)
-				this.$emit('input', this.time)
-				this.$emit('update:modelValue', this.time)
-				this.tiggerTimePicker()
-			},
-
-			/**
-			 * 用户点击“确定”按钮
-			 */
-			setTime() {
-				this.initTime()
-				this.tiggerTimePicker()
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	$uni-primary: #007aff !default;
-
-	.uni-datetime-picker {
-		/* #ifndef APP-NVUE */
-		/* width: 100%; */
-		/* #endif */
-	}
-
-	.uni-datetime-picker-view {
-		height: 130px;
-		width: 270px;
-		/* #ifndef APP-NVUE */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-item {
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		font-size: 14px;
-	}
-
-	.uni-datetime-picker-btn {
-		margin-top: 60px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		cursor: pointer;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-	}
-
-	.uni-datetime-picker-btn-text {
-		font-size: 14px;
-		color: $uni-primary;
-	}
-
-	.uni-datetime-picker-btn-group {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-datetime-picker-cancel {
-		margin-right: 30px;
-	}
-
-	.uni-datetime-picker-mask {
-		position: fixed;
-		bottom: 0px;
-		top: 0px;
-		left: 0px;
-		right: 0px;
-		background-color: rgba(0, 0, 0, 0.4);
-		transition-duration: 0.3s;
-		z-index: 998;
-	}
-
-	.uni-datetime-picker-popup {
-		border-radius: 8px;
-		padding: 30px;
-		width: 270px;
-		/* #ifdef APP-NVUE */
-		height: 500px;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		width: 330px;
-		/* #endif */
-		background-color: #fff;
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		transition-duration: 0.3s;
-		z-index: 999;
-	}
-
-	.fix-nvue-height {
-		/* #ifdef APP-NVUE */
-		height: 330px;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-time {
-		color: grey;
-	}
-
-	.uni-datetime-picker-column {
-		height: 50px;
-	}
-
-	.uni-datetime-picker-timebox {
-
-		border: 1px solid #E5E5E5;
-		border-radius: 5px;
-		padding: 7px 10px;
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-timebox-pointer {
-		/* #ifndef APP-NVUE */
-		cursor: pointer;
-		/* #endif */
-	}
-
-
-	.uni-datetime-picker-disabled {
-		opacity: 0.4;
-		/* #ifdef H5 */
-		cursor: not-allowed !important;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-text {
-		font-size: 14px;
-		line-height: 50px
-	}
-
-	.uni-datetime-picker-sign {
-		position: absolute;
-		top: 53px;
-		/* 减掉 10px 的元素高度，兼容nvue */
-		color: #999;
-		/* #ifdef APP-NVUE */
-		font-size: 16px;
-		/* #endif */
-	}
-
-	.sign-left {
-		left: 86px;
-	}
-
-	.sign-right {
-		right: 86px;
-	}
-
-	.sign-center {
-		left: 135px;
-	}
-
-	.uni-datetime-picker__container-box {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-top: 40px;
-	}
-
-	.time-hide-second {
-		width: 180px;
-	}
-</style>
+<template>
+	<view class="uni-datetime-picker">
+		<view @click="initTimePicker">
+			<slot>
+				<view class="uni-datetime-picker-timebox-pointer"
+					:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
+					<text class="uni-datetime-picker-text">{{time}}</text>
+					<view v-if="!time" class="uni-datetime-picker-time">
+						<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
+		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
+			:style="fixNvueBug">
+			<view class="uni-title">
+				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+			</view>
+			<view v-if="dateShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
+					@change="bindDateChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign sign-left">-</text>
+				<text class="uni-datetime-picker-sign sign-right">-</text>
+			</view>
+			<view v-if="timeShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
+					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!hideSecond">
+						<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
+				<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
+			</view>
+			<view class="uni-datetime-picker-btn">
+				<view @click="clearTime">
+					<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
+				</view>
+				<view class="uni-datetime-picker-btn-group">
+					<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
+						<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
+					</view>
+					<view @click="setTime">
+						<text class="uni-datetime-picker-btn-text">{{okText}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { initVueI18n } from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	const {	t	} = initVueI18n(i18nMessages)
+  import { fixIosDateFormat } from './util'
+
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 可以同时选择日期和时间的选择器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} type = [datetime | date | time] 显示模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {String|Number} value 默认值
+	 * @property {String|Number} start 起始日期或时间
+	 * @property {String|Number} end 起始日期或时间
+	 * @property {String} return-type = [timestamp | string]
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'UniDatetimePicker',
+		data() {
+			return {
+				indicatorStyle: `height: 50px;`,
+				visible: false,
+				fixNvueBug: {},
+				dateShow: true,
+				timeShow: true,
+				title: '日期和时间',
+				// 输入框当前时间
+				time: '',
+				// 当前的年月日时分秒
+				year: 1920,
+				month: 0,
+				day: 0,
+				hour: 0,
+				minute: 0,
+				second: 0,
+				// 起始时间
+				startYear: 1920,
+				startMonth: 1,
+				startDay: 1,
+				startHour: 0,
+				startMinute: 0,
+				startSecond: 0,
+				// 结束时间
+				endYear: 2120,
+				endMonth: 12,
+				endDay: 31,
+				endHour: 23,
+				endMinute: 59,
+				endSecond: 59,
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				handler(newVal) {
+          if (newVal) {
+            this.parseValue(fixIosDateFormat(newVal))
+						this.initTime(false)
+					} else {
+            this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+        handler(newVal) {
+          if (newVal) {
+						this.parseValue(fixIosDateFormat(newVal))
+						this.initTime(false)
+					} else {
+						this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			// #endif
+			type: {
+				handler(newValue) {
+					if (newValue === 'date') {
+						this.dateShow = true
+						this.timeShow = false
+						this.title = '日期'
+					} else if (newValue === 'time') {
+						this.dateShow = false
+						this.timeShow = true
+						this.title = '时间'
+					} else {
+						this.dateShow = true
+						this.timeShow = true
+						this.title = '日期和时间'
+					}
+				},
+				immediate: true
+			},
+			start: {
+				handler(newVal) {
+					this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
+				},
+				immediate: true
+			},
+			end: {
+				handler(newVal) {
+					this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
+				},
+				immediate: true
+			},
+
+			// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			months(newVal) {
+				this.checkValue('month', this.month, newVal)
+			},
+			days(newVal) {
+				this.checkValue('day', this.day, newVal)
+			},
+			hours(newVal) {
+				this.checkValue('hour', this.hour, newVal)
+			},
+			minutes(newVal) {
+				this.checkValue('minute', this.minute, newVal)
+			},
+			seconds(newVal) {
+				this.checkValue('second', this.second, newVal)
+			}
+		},
+		computed: {
+			// 当前年、月、日、时、分、秒选择范围
+			years() {
+				return this.getCurrentRange('year')
+			},
+
+			months() {
+				return this.getCurrentRange('month')
+			},
+
+			days() {
+				return this.getCurrentRange('day')
+			},
+
+			hours() {
+				return this.getCurrentRange('hour')
+			},
+
+			minutes() {
+				return this.getCurrentRange('minute')
+			},
+
+			seconds() {
+				return this.getCurrentRange('second')
+			},
+
+			// picker 当前值数组
+			ymd() {
+				return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
+			},
+			hms() {
+				return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
+			},
+
+			// 当前 date 是 start
+			currentDateIsStart() {
+				return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
+			},
+
+			// 当前 date 是 end
+			currentDateIsEnd() {
+				return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
+			},
+
+			// 当前年、月、日、时、分、秒的最小值和最大值
+			minYear() {
+				return this.startYear
+			},
+			maxYear() {
+				return this.endYear
+			},
+			minMonth() {
+				if (this.year === this.startYear) {
+					return this.startMonth
+				} else {
+					return 1
+				}
+			},
+			maxMonth() {
+				if (this.year === this.endYear) {
+					return this.endMonth
+				} else {
+					return 12
+				}
+			},
+			minDay() {
+				if (this.year === this.startYear && this.month === this.startMonth) {
+					return this.startDay
+				} else {
+					return 1
+				}
+			},
+			maxDay() {
+				if (this.year === this.endYear && this.month === this.endMonth) {
+					return this.endDay
+				} else {
+					return this.daysInMonth(this.year, this.month)
+				}
+			},
+			minHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart) {
+						return this.startHour
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					return this.startHour
+				}
+			},
+			maxHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd) {
+						return this.endHour
+					} else {
+						return 23
+					}
+				}
+				if (this.type === 'time') {
+					return this.endHour
+				}
+			},
+			minMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+			},
+			maxMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+			},
+			minSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+			},
+			maxSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+			},
+
+			/**
+			 * for i18n
+			 */
+			selectTimeText() {
+				return t("uni-datetime-picker.selectTime")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return t("uni-datetime-picker.clear")
+			},
+			cancelText() {
+				return t("uni-datetime-picker.cancel")
+			}
+		},
+
+		mounted() {
+			// #ifdef APP-NVUE
+			const res = uni.getSystemInfoSync();
+			this.fixNvueBug = {
+				top: res.windowHeight / 2,
+				left: res.windowWidth / 2
+			}
+			// #endif
+		},
+
+		methods: {
+			/**
+			 * @param {Object} item
+			 * 小于 10 在前面加个 0
+			 */
+
+			lessThanTen(item) {
+				return item < 10 ? '0' + item : item
+			},
+
+			/**
+			 * 解析时分秒字符串，例如：00:00:00
+			 * @param {String} timeString
+			 */
+			parseTimeType(timeString) {
+				if (timeString) {
+					let timeArr = timeString.split(':')
+					this.hour = Number(timeArr[0])
+					this.minute = Number(timeArr[1])
+					this.second = Number(timeArr[2])
+				}
+			},
+
+			/**
+			 * 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
+			 * @param {String | Number} datetime
+			 */
+			initPickerValue(datetime) {
+				let defaultValue = null
+				if (datetime) {
+					defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
+				} else {
+					defaultValue = Date.now()
+					defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
+				}
+				this.parseValue(defaultValue)
+			},
+
+			/**
+			 * 初始值规则：
+			 * - 用户设置初始值 value
+			 * 	- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
+			 * 	- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
+			 * 	- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
+			 * 	- 无起始终止时间，则初始值为 value
+			 * - 无初始值 value，则初始值为当前本地时间 Date.now()
+			 * @param {Object} value
+			 * @param {Object} dateBase
+			 */
+			compareValueWithStartAndEnd(value, start, end) {
+				let winner = null
+				value = this.superTimeStamp(value)
+				start = this.superTimeStamp(start)
+				end = this.superTimeStamp(end)
+
+				if (start && end) {
+					if (value < start) {
+						winner = new Date(start)
+					} else if (value > end) {
+						winner = new Date(end)
+					} else {
+						winner = new Date(value)
+					}
+				} else if (start && !end) {
+					winner = start <= value ? new Date(value) : new Date(start)
+				} else if (!start && end) {
+					winner = value <= end ? new Date(value) : new Date(end)
+				} else {
+					winner = new Date(value)
+				}
+
+				return winner
+			},
+
+			/**
+			 * 转换为可比较的时间戳，接受日期、时分秒、时间戳
+			 * @param {Object} value
+			 */
+			superTimeStamp(value) {
+				let dateBase = ''
+				if (this.type === 'time' && value && typeof value === 'string') {
+					const now = new Date()
+					const year = now.getFullYear()
+					const month = now.getMonth() + 1
+					const day = now.getDate()
+					dateBase = year + '/' + month + '/' + day + ' '
+				}
+				if (Number(value)) {
+					value = parseInt(value)
+					dateBase = 0
+				}
+				return this.createTimeStamp(dateBase + value)
+			},
+
+			/**
+			 * 解析默认值 value，字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseValue(value) {
+				if (!value) {
+					return
+				}
+				if (this.type === 'time' && typeof value === "string") {
+					this.parseTimeType(value)
+				} else {
+					let defaultDate = null
+					defaultDate = new Date(value)
+					if (this.type !== 'time') {
+						this.year = defaultDate.getFullYear()
+						this.month = defaultDate.getMonth() + 1
+						this.day = defaultDate.getDate()
+					}
+					if (this.type !== 'date') {
+						this.hour = defaultDate.getHours()
+						this.minute = defaultDate.getMinutes()
+						this.second = defaultDate.getSeconds()
+					}
+				}
+				if (this.hideSecond) {
+					this.second = 0
+				}
+			},
+
+			/**
+			 * 解析可选择时间范围 start、end，年月日字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseDatetimeRange(point, pointType) {
+				// 时间为空，则重置为初始值
+				if (!point) {
+					if (pointType === 'start') {
+						this.startYear = 1920
+						this.startMonth = 1
+						this.startDay = 1
+						this.startHour = 0
+						this.startMinute = 0
+						this.startSecond = 0
+					}
+					if (pointType === 'end') {
+						this.endYear = 2120
+						this.endMonth = 12
+						this.endDay = 31
+						this.endHour = 23
+						this.endMinute = 59
+						this.endSecond = 59
+					}
+					return
+				}
+				if (this.type === 'time') {
+					const pointArr = point.split(':')
+					this[pointType + 'Hour'] = Number(pointArr[0])
+					this[pointType + 'Minute'] = Number(pointArr[1])
+					this[pointType + 'Second'] = Number(pointArr[2])
+				} else {
+					if (!point) {
+						pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
+						return
+					}
+					if (Number(point)) {
+						point = parseInt(point)
+					}
+					// datetime 的 end 没有时分秒, 则不限制
+					const hasTime = /[0-9]:[0-9]/
+					if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
+							point)) {
+						point = point + ' 23:59:59'
+					}
+					const pointDate = new Date(point)
+					this[pointType + 'Year'] = pointDate.getFullYear()
+					this[pointType + 'Month'] = pointDate.getMonth() + 1
+					this[pointType + 'Day'] = pointDate.getDate()
+					if (this.type === 'datetime') {
+						this[pointType + 'Hour'] = pointDate.getHours()
+						this[pointType + 'Minute'] = pointDate.getMinutes()
+						this[pointType + 'Second'] = pointDate.getSeconds()
+					}
+				}
+			},
+
+			// 获取 年、月、日、时、分、秒 当前可选范围
+			getCurrentRange(value) {
+				const range = []
+				for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
+					range.push(i)
+				}
+				return range
+			},
+
+			// 字符串首字母大写
+			capitalize(str) {
+				return str.charAt(0).toUpperCase() + str.slice(1)
+			},
+
+			// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			checkValue(name, value, values) {
+				if (values.indexOf(value) === -1) {
+					this[name] = values[0]
+				}
+			},
+
+			// 每个月的实际天数
+			daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
+				return new Date(year, month, 0).getDate();
+			},
+
+			//兼容 iOS、safari 日期格式
+			fixIosDateFormat(value) {
+				if (typeof value === 'string') {
+					value = value.replace(/-/g, '/')
+				}
+				return value
+			},
+
+			/**
+			 * 生成时间戳
+			 * @param {Object} time
+			 */
+			createTimeStamp(time) {
+				if (!time) return
+				if (typeof time === "number") {
+					return time
+				} else {
+					time = time.replace(/-/g, '/')
+					if (this.type === 'date') {
+						time = time + ' ' + '00:00:00'
+					}
+					return Date.parse(time)
+				}
+			},
+
+			/**
+			 * 生成日期或时间的字符串
+			 */
+			createDomSting() {
+				const yymmdd = this.year +
+					'-' +
+					this.lessThanTen(this.month) +
+					'-' +
+					this.lessThanTen(this.day)
+
+				let hhmmss = this.lessThanTen(this.hour) +
+					':' +
+					this.lessThanTen(this.minute)
+
+				if (!this.hideSecond) {
+					hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
+				}
+
+				if (this.type === 'date') {
+					return yymmdd
+				} else if (this.type === 'time') {
+					return hhmmss
+				} else {
+					return yymmdd + ' ' + hhmmss
+				}
+			},
+
+			/**
+			 * 初始化返回值，并抛出 change 事件
+			 */
+			initTime(emit = true) {
+				this.time = this.createDomSting()
+				if (!emit) return
+				if (this.returnType === 'timestamp' && this.type !== 'time') {
+					this.$emit('change', this.createTimeStamp(this.time))
+					this.$emit('input', this.createTimeStamp(this.time))
+					this.$emit('update:modelValue', this.createTimeStamp(this.time))
+				} else {
+					this.$emit('change', this.time)
+					this.$emit('input', this.time)
+					this.$emit('update:modelValue', this.time)
+				}
+			},
+
+			/**
+			 * 用户选择日期或时间更新 data
+			 * @param {Object} e
+			 */
+			bindDateChange(e) {
+				const val = e.detail.value
+				this.year = this.years[val[0]]
+				this.month = this.months[val[1]]
+				this.day = this.days[val[2]]
+			},
+			bindTimeChange(e) {
+				const val = e.detail.value
+				this.hour = this.hours[val[0]]
+				this.minute = this.minutes[val[1]]
+				this.second = this.seconds[val[2]]
+			},
+
+			/**
+			 * 初始化弹出层
+			 */
+			initTimePicker() {
+				if (this.disabled) return
+				const value = fixIosDateFormat(this.time)
+				this.initPickerValue(value)
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 触发或关闭弹框
+			 */
+			tiggerTimePicker(e) {
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 用户点击“清空”按钮，清空当前值
+			 */
+			clearTime() {
+				this.time = ''
+				this.$emit('change', this.time)
+				this.$emit('input', this.time)
+				this.$emit('update:modelValue', this.time)
+				this.tiggerTimePicker()
+			},
+
+			/**
+			 * 用户点击“确定”按钮
+			 */
+			setTime() {
+				this.initTime()
+				this.tiggerTimePicker()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
+	.uni-datetime-picker {
+		/* #ifndef APP-NVUE */
+		/* width: 100%; */
+		/* #endif */
+	}
+
+	.uni-datetime-picker-view {
+		height: 130px;
+		width: 270px;
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-item {
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	.uni-datetime-picker-btn {
+		margin-top: 60px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.uni-datetime-picker-btn-text {
+		font-size: 14px;
+		color: $uni-primary;
+	}
+
+	.uni-datetime-picker-btn-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-datetime-picker-cancel {
+		margin-right: 30px;
+	}
+
+	.uni-datetime-picker-mask {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-duration: 0.3s;
+		z-index: 998;
+	}
+
+	.uni-datetime-picker-popup {
+		border-radius: 8px;
+		padding: 30px;
+		width: 270px;
+		/* #ifdef APP-NVUE */
+		height: 500px;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 330px;
+		/* #endif */
+		background-color: #fff;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		transition-duration: 0.3s;
+		z-index: 999;
+	}
+
+	.fix-nvue-height {
+		/* #ifdef APP-NVUE */
+		height: 330px;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-time {
+		color: grey;
+	}
+
+	.uni-datetime-picker-column {
+		height: 50px;
+	}
+
+	.uni-datetime-picker-timebox {
+
+		border: 1px solid #E5E5E5;
+		border-radius: 5px;
+		padding: 7px 10px;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-timebox-pointer {
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-datetime-picker-disabled {
+		opacity: 0.4;
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-text {
+		font-size: 14px;
+		line-height: 50px
+	}
+
+	.uni-datetime-picker-sign {
+		position: absolute;
+		top: 53px;
+		/* 减掉 10px 的元素高度，兼容nvue */
+		color: #999;
+		/* #ifdef APP-NVUE */
+		font-size: 16px;
+		/* #endif */
+	}
+
+	.sign-left {
+		left: 86px;
+	}
+
+	.sign-right {
+		right: 86px;
+	}
+
+	.sign-center {
+		left: 135px;
+	}
+
+	.uni-datetime-picker__container-box {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 40px;
+	}
+
+	.time-hide-second {
+		width: 180px;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
index 8769e83..7650d0f 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -1,1032 +1,1032 @@
-<template>
-	<view class="uni-date">
-		<view class="uni-date-editor" @click="show">
-			<slot>
-				<view
-          class="uni-date-editor--x"
-          :class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}"
-        >
-					<view v-if="!isRange" class="uni-date-x uni-date-single">
-						<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
-						<view class="uni-date__x-input">{{ displayValue || singlePlaceholderText }}</view>
-					</view>
-
-					<view v-else class="uni-date-x uni-date-range">
-            <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
-            <view class="uni-date__x-input text-center">{{ displayRangeValue.startDate || startPlaceholderText }}</view>
-
-            <view class="range-separator">{{rangeSeparator}}</view>
-
-            <view class="uni-date__x-input text-center">{{ displayRangeValue.endDate || endPlaceholderText }}</view>
-					</view>
-
-					<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
-						<uni-icons type="clear" color="#c0c4cc" size="22"></uni-icons>
-					</view>
-				</view>
-			</slot>
-		</view>
-
-		<view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view>
-
-		<view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container">
-			<view v-if="!isRange" class="uni-date-single--x" :style="pickerPositionStyle">
-				<view class="uni-popper__arrow"></view>
-
-				<view v-if="hasTime" class="uni-date-changed popup-x-header">
-					<input class="uni-date__input text-center" type="text" v-model="inputDate"
-						:placeholder="selectDateText" />
-
-					<time-picker type="time" v-model="pickerTime" :border="false" :disabled="!inputDate"
-						:start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond" style="width: 100%;">
-						<input class="uni-date__input text-center" type="text" v-model="pickerTime" :placeholder="selectTimeText"
-							:disabled="!inputDate" />
-					</time-picker>
-				</view>
-
-				<Calendar ref="pcSingle" :showMonth="false" :start-date="calendarRange.startDate"
-					:end-date="calendarRange.endDate" :date="calendarDate" @change="singleChange"
-          :default-value="defaultValue"
-					style="padding: 0 8px;" />
-
-				<view v-if="hasTime" class="popup-x-footer">
-					<text class="confirm-text" @click="confirmSingleChange">{{okText}}</text>
-				</view>
-			</view>
-
-			<view v-else class="uni-date-range--x" :style="pickerPositionStyle">
-				<view class="uni-popper__arrow"></view>
-				<view v-if="hasTime" class="popup-x-header uni-date-changed">
-					<view class="popup-x-header--datetime">
-            <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
-            :placeholder="startDateText" />
-
-						<time-picker type="time" v-model="tempRange.startTime" :start="timepickerStartTime" :border="false"
-            :disabled="!tempRange.startDate" :hideSecond="hideSecond">
-            <input class="uni-date__input uni-date-range__input" type="text"
-            v-model="tempRange.startTime" :placeholder="startTimeText"
-            :disabled="!tempRange.startDate" />
-          </time-picker>
-        </view>
-
-        <uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
-
-					<view class="popup-x-header--datetime">
-						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
-							:placeholder="endDateText" />
-
-						<time-picker type="time" v-model="tempRange.endTime" :end="timepickerEndTime" :border="false"
-							:disabled="!tempRange.endDate" :hideSecond="hideSecond">
-							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
-								:placeholder="endTimeText" :disabled="!tempRange.endDate" />
-						</time-picker>
-					</view>
-				</view>
-
-				<view class="popup-x-body">
-					<Calendar ref="left" :showMonth="false" :start-date="calendarRange.startDate"
-            :end-date="calendarRange.endDate" :range="true" :pleStatus="endMultipleStatus"
-            @change="leftChange" @firstEnterCale="updateRightCale" style="padding: 0 8px;" />
-					<Calendar ref="right" :showMonth="false" :start-date="calendarRange.startDate"
-						:end-date="calendarRange.endDate" :range="true" @change="rightChange"
-						:pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
-						style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
-				</view>
-
-				<view v-if="hasTime" class="popup-x-footer">
-					<text @click="clear">{{clearText}}</text>
-					<text class="confirm-text" @click="confirmRangeChange">{{okText}}</text>
-				</view>
-			</view>
-		</view>
-
-		<Calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="mobileCalendarTime"
-			:start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime"
-      :startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
-      :default-value="defaultValue"
-			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
-			:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
-	</view>
-</template>
-<script>
-	/**
-	 * DatetimePicker 时间选择器
-	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
-	 * @property {String} type 选择器类型
-	 * @property {String|Number|Array|Date} value 绑定值
-	 * @property {String} placeholder 单选择时的占位内容
-	 * @property {String} start 起始时间
-	 * @property {String} end 终止时间
-	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
-	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
-	 * @property {String} range-separator 选择范围时的分隔符
-	 * @property {Boolean} border = [true|false] 是否有边框
-	 * @property {Boolean} disabled = [true|false] 是否禁用
-	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
-	 * @property {[String} defaultValue 选择器打开时默认显示的时间
-	 * @event {Function} change 确定日期时触发的事件
-	 * @event {Function} maskClick 点击遮罩层触发的事件
-	 * @event {Function} show 打开弹出层
-	 * @event {Function} close 关闭弹出层
-	 * @event {Function} clear 清除上次选中的状态和值
-	 **/
-	import Calendar from './calendar.vue'
-	import TimePicker from './time-picker.vue'
-	import { initVueI18n } from '@dcloudio/uni-i18n'
-	import i18nMessages from './i18n/index.js'
-  import { getDateTime, getDate, getTime, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat } from './util'
-
-	export default {
-		name: 'UniDatetimePicker',
-		options: {
-			virtualHost: true
-		},
-		components: {
-			Calendar,
-			TimePicker
-		},
-		data() {
-			return {
-				isRange: false,
-				hasTime: false,
-				displayValue: '',
-				inputDate: '',
-				calendarDate: '',
-				pickerTime: '',
-				calendarRange: {
-					startDate: '',
-					startTime: '',
-					endDate: '',
-					endTime: ''
-				},
-				displayRangeValue: {
-					startDate: '',
-					endDate: '',
-				},
-				tempRange: {
-					startDate: '',
-					startTime: '',
-					endDate: '',
-					endTime: ''
-				},
-				// 左右日历同步数据
-				startMultipleStatus: {
-					before: '',
-					after: '',
-					data: [],
-					fulldate: ''
-				},
-				endMultipleStatus: {
-					before: '',
-					after: '',
-					data: [],
-					fulldate: ''
-				},
-				pickerVisible: false,
-				pickerPositionStyle: null,
-				isEmitValue: false,
-				isPhone: false,
-				isFirstShow: true,
-        i18nT: () => {}
-			}
-		},
-		props: {
-			type: {
-				type: String,
-				default: 'datetime'
-			},
-			value: {
-				type: [String, Number, Array, Date],
-				default: ''
-			},
-			modelValue: {
-				type: [String, Number, Array, Date],
-				default: ''
-			},
-			start: {
-				type: [Number, String],
-				default: ''
-			},
-			end: {
-				type: [Number, String],
-				default: ''
-			},
-			returnType: {
-				type: String,
-				default: 'string'
-			},
-			placeholder: {
-				type: String,
-				default: ''
-			},
-			startPlaceholder: {
-        type: String,
-				default: ''
-			},
-			endPlaceholder: {
-				type: String,
-				default: ''
-			},
-			rangeSeparator: {
-				type: String,
-				default: '-'
-			},
-			border: {
-				type: [Boolean],
-				default: true
-			},
-			disabled: {
-				type: [Boolean],
-				default: false
-			},
-			clearIcon: {
-				type: [Boolean],
-				default: true
-			},
-			hideSecond: {
-				type: [Boolean],
-				default: false
-			},
-      defaultValue: {
-        type: [String, Object, Array],
-        default: ''
-      }
-		},
-		watch: {
-			type: {
-				immediate: true,
-				handler(newVal) {
-          this.hasTime = newVal.indexOf('time') !== -1
-					this.isRange = newVal.indexOf('range') !== -1
-				}
-			},
-			// #ifndef VUE3
-			value: {
-				immediate: true,
-				handler(newVal) {
-					if (this.isEmitValue) {
-						this.isEmitValue = false
-						return
-					}
-					this.initPicker(newVal)
-				}
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(newVal) {
-					if (this.isEmitValue) {
-						this.isEmitValue = false
-						return
-					}
-					this.initPicker(newVal)
-				}
-			},
-			// #endif
-			start: {
-				immediate: true,
-				handler(newVal) {
-					if (!newVal) return
-					this.calendarRange.startDate = getDate(newVal)
-					if (this.hasTime) {
-						this.calendarRange.startTime = getTime(newVal)
-					}
-				}
-			},
-			end: {
-				immediate: true,
-				handler(newVal) {
-					if (!newVal) return
-					this.calendarRange.endDate = getDate(newVal)
-					if (this.hasTime) {
-						this.calendarRange.endTime = getTime(newVal, this.hideSecond)
-					}
-				}
-			},
-		},
-		computed: {
-			timepickerStartTime() {
-				const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate
-				return activeDate === this.calendarRange.startDate ? this.calendarRange.startTime : ''
-			},
-			timepickerEndTime() {
-				const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate
-				return activeDate === this.calendarRange.endDate ? this.calendarRange.endTime : ''
-			},
-			mobileCalendarTime() {
-				const timeRange = {
-					start: this.tempRange.startTime,
-					end: this.tempRange.endTime
-				}
-				return this.isRange ? timeRange : this.pickerTime
-			},
-			mobSelectableTime() {
-				return {
-					start: this.calendarRange.startTime,
-					end: this.calendarRange.endTime
-				}
-			},
-			datePopupWidth() {
-				// todo
-				return this.isRange ? 653 : 301
-			},
-
-			/**
-			 * for i18n
-			 */
-			singlePlaceholderText() {
-				return this.placeholder || (this.type === 'date' ? this.selectDateText : this.selectDateTimeText)
-			},
-			startPlaceholderText() {
-				return this.startPlaceholder || this.startDateText
-			},
-			endPlaceholderText() {
-				return this.endPlaceholder || this.endDateText
-			},
-			selectDateText() {
-				return this.i18nT("uni-datetime-picker.selectDate")
-			},
-      selectDateTimeText() {
-        return this.i18nT("uni-datetime-picker.selectDateTime")
-      },
-			selectTimeText() {
-				return this.i18nT("uni-datetime-picker.selectTime")
-			},
-			startDateText() {
-				return this.startPlaceholder || this.i18nT("uni-datetime-picker.startDate")
-			},
-			startTimeText() {
-				return this.i18nT("uni-datetime-picker.startTime")
-			},
-			endDateText() {
-				return this.endPlaceholder || this.i18nT("uni-datetime-picker.endDate")
-			},
-			endTimeText() {
-				return this.i18nT("uni-datetime-picker.endTime")
-			},
-			okText() {
-				return this.i18nT("uni-datetime-picker.ok")
-			},
-			clearText() {
-				return this.i18nT("uni-datetime-picker.clear")
-			},
-			showClearIcon() {
-				return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this.displayRangeValue.endDate))
-			}
-		},
-		created() {
-			this.initI18nT()
-      this.platform()
-		},
-		methods: {
-      initI18nT() {
-        const vueI18n = initVueI18n(i18nMessages)
-        this.i18nT = vueI18n.t
-      },
-			initPicker(newVal) {
-				if ((!newVal && !this.defaultValue) || Array.isArray(newVal) && !newVal.length) {
-					this.$nextTick(() => {
-						this.clear(false)
-					})
-					return
-				}
-
-				if (!Array.isArray(newVal) && !this.isRange) {
-          if(newVal){
-            this.displayValue = this.inputDate = this.calendarDate = getDate(newVal)
-            if (this.hasTime) {
-              this.pickerTime = getTime(newVal, this.hideSecond)
-              this.displayValue = `${this.displayValue} ${this.pickerTime}`
-            }
-          }else if(this.defaultValue){
-            this.inputDate = this.calendarDate = getDate(this.defaultValue)
-            if(this.hasTime){
-              this.pickerTime = getTime(this.defaultValue, this.hideSecond)
-            }
-          }
-				} else {
-					const [before, after] = newVal
-					if (!before && !after) return
-          const beforeDate = getDate(before)
-          const beforeTime = getTime(before, this.hideSecond)
-
-          const afterDate = getDate(after)
-          const afterTime = getTime(after, this.hideSecond)
-					const startDate = beforeDate
-					const endDate = afterDate
-					this.displayRangeValue.startDate = this.tempRange.startDate = startDate
-					this.displayRangeValue.endDate = this.tempRange.endDate = endDate
-
-					if (this.hasTime) {
-						this.displayRangeValue.startDate = `${beforeDate} ${beforeTime}`
-						this.displayRangeValue.endDate = `${afterDate} ${afterTime}`
-						this.tempRange.startTime = beforeTime
-						this.tempRange.endTime = afterTime
-					}
-					const defaultRange = {
-						before: beforeDate,
-						after: afterDate
-					}
-					this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
-						which: 'right'
-					})
-					this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
-						which: 'left'
-					})
-				}
-			},
-			updateLeftCale(e) {
-				const left = this.$refs.left
-				// 设置范围选
-				left.cale.setHoverMultiple(e.after)
-				left.setDate(this.$refs.left.nowDate.fullDate)
-			},
-			updateRightCale(e) {
-				const right = this.$refs.right
-				// 设置范围选
-				right.cale.setHoverMultiple(e.after)
-				right.setDate(this.$refs.right.nowDate.fullDate)
-			},
-			platform() {
-        if(typeof navigator !== "undefined"){
-          this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1
-          return
-        }
-				const { windowWidth } = uni.getSystemInfoSync()
-				this.isPhone = windowWidth <= 500
-				this.windowWidth = windowWidth
-			},
-			show() {
-				if (this.disabled) {
-					return
-				}
-				this.platform()
-				if (this.isPhone) {
-					setTimeout(() => {
-            this.$refs.mobile.open()
-          }, 0);
-					return
-				}
-				this.pickerPositionStyle = {
-					top: '10px'
-				}
-				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
-				dateEditor.boundingClientRect(rect => {
-					if (this.windowWidth - rect.left < this.datePopupWidth) {
-						this.pickerPositionStyle.right = 0
-					}
-				}).exec()
-				setTimeout(() => {
-					this.pickerVisible = !this.pickerVisible
-					if (!this.isPhone && this.isRange && this.isFirstShow) {
-						this.isFirstShow = false
-						const {
-							startDate,
-							endDate
-						} = this.calendarRange
-						if (startDate && endDate) {
-							if (this.diffDate(startDate, endDate) < 30) {
-								this.$refs.right.changeMonth('pre')
-							}
-						} else {
-							this.$refs.right.changeMonth('next')
-							this.$refs.right.cale.lastHover = false
-						}
-					}
-
-				}, 50)
-			},
-			close() {
-				setTimeout(() => {
-					this.pickerVisible = false
-					this.$emit('maskClick', this.value)
-					this.$refs.mobile && this.$refs.mobile.close()
-				}, 20)
-			},
-			setEmit(value) {
-				if (this.returnType === "timestamp" || this.returnType === "date") {
-					if (!Array.isArray(value)) {
-						if (!this.hasTime) {
-							value = value + ' ' + '00:00:00'
-						}
-						value = this.createTimestamp(value)
-						if (this.returnType === "date") {
-							value = new Date(value)
-						}
-					} else {
-						if (!this.hasTime) {
-							value[0] = value[0] + ' ' + '00:00:00'
-							value[1] = value[1] + ' ' + '00:00:00'
-						}
-						value[0] = this.createTimestamp(value[0])
-						value[1] = this.createTimestamp(value[1])
-						if (this.returnType === "date") {
-							value[0] = new Date(value[0])
-							value[1] = new Date(value[1])
-						}
-					}
-				}
-
-				this.$emit('update:modelValue', value)
-				this.$emit('input', value)
-				this.$emit('change', value)
-				this.isEmitValue = true
-			},
-			createTimestamp(date) {
-				date = fixIosDateFormat(date)
-				return Date.parse(new Date(date))
-			},
-			singleChange(e) {
-				this.calendarDate = this.inputDate = e.fulldate
-				if (this.hasTime) return
-				this.confirmSingleChange()
-			},
-			confirmSingleChange() {
-        if(!checkDate(this.inputDate)){
-					const now = new Date()
-          this.calendarDate = this.inputDate = getDate(now)
-					this.pickerTime = getTime(now, this.hideSecond)
-        }
-
-        let startLaterInputDate = false
-        let startDate, startTime
-        if(this.start) {
-          let startString = this.start
-          if(typeof this.start === 'number'){
-            startString = getDateTime(this.start, this.hideSecond)
-          }
-          [startDate, startTime] = startString.split(' ')
-          if(this.start && !dateCompare(startDate, this.inputDate)) {
-            startLaterInputDate = true
-            this.inputDate = startDate
-          }
-        }
-
-        let endEarlierInputDate = false
-        let endDate, endTime
-        if(this.end) {
-          let endString = this.end
-          if(typeof this.end === 'number'){
-            endString = getDateTime(this.end, this.hideSecond)
-          }
-          [endDate, endTime] = endString.split(' ')
-          if(this.end && !dateCompare(this.inputDate, endDate)) {
-            endEarlierInputDate = true
-            this.inputDate = endDate
-          }
-        }
-				if (this.hasTime) {
-          if(startLaterInputDate){
-            this.pickerTime = startTime || getDefaultSecond(this.hideSecond)
-          }
-          if(endEarlierInputDate){
-            this.pickerTime = endTime || getDefaultSecond(this.hideSecond)
-          }
-          if(!this.pickerTime){
-            this.pickerTime = getTime(Date.now(), this.hideSecond)
-          }
-					this.displayValue = `${this.inputDate} ${this.pickerTime}`
-				} else {
-          this.displayValue = this.inputDate
-				}
-				this.setEmit(this.displayValue)
-				this.pickerVisible = false
-			},
-			leftChange(e) {
-				const {
-					before,
-					after
-				} = e.range
-				this.rangeChange(before, after)
-				const obj = {
-					before: e.range.before,
-					after: e.range.after,
-					data: e.range.data,
-					fulldate: e.fulldate
-				}
-				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
-			},
-			rightChange(e) {
-				const {
-					before,
-					after
-				} = e.range
-				this.rangeChange(before, after)
-				const obj = {
-					before: e.range.before,
-					after: e.range.after,
-					data: e.range.data,
-					fulldate: e.fulldate
-				}
-				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
-			},
-			mobileChange(e) {
-				if (this.isRange) {
-					const {before, after} = e.range
-
-          if(!before || !after){
-            return
-          }
-
-					this.handleStartAndEnd(before, after, true)
-					if (this.hasTime) {
-						const {
-							startTime,
-							endTime
-						} = e.timeRange
-						this.tempRange.startTime = startTime
-						this.tempRange.endTime = endTime
-					}
-					this.confirmRangeChange()
-				} else {
-					if (this.hasTime) {
-						this.displayValue = e.fulldate + ' ' + e.time
-					} else {
-						this.displayValue = e.fulldate
-					}
-					this.setEmit(this.displayValue)
-				}
-				this.$refs.mobile.close()
-			},
-			rangeChange(before, after) {
-				if (!(before && after)) return
-				this.handleStartAndEnd(before, after, true)
-				if (this.hasTime) return
-				this.confirmRangeChange()
-			},
-			confirmRangeChange() {
-				if (!this.tempRange.startDate || !this.tempRange.endDate) {
-					this.pickerVisible = false
-					return
-				}
-        if(!checkDate(this.tempRange.startDate)){
-          this.tempRange.startDate = getDate(Date.now())
-        }
-        if(!checkDate(this.tempRange.endDate)){
-          this.tempRange.endDate = getDate(Date.now())
-        }
-
-				let start, end
-
-        let startDateLaterRangeStartDate = false
-        let startDateLaterRangeEndDate = false
-        let startDate, startTime
-        if(this.start) {
-          let startString = this.start
-          if(typeof this.start === 'number'){
-            startString = getDateTime(this.start, this.hideSecond)
-          }
-          [startDate,startTime] = startString.split(' ')
-          if(this.start && !dateCompare(this.start, this.tempRange.startDate)) {
-            startDateLaterRangeStartDate = true
-            this.tempRange.startDate = startDate
-          }
-          if(this.start && !dateCompare(this.start, this.tempRange.endDate)) {
-            startDateLaterRangeEndDate = true
-            this.tempRange.endDate = startDate
-          }
-        }
-        let endDateEarlierRangeStartDate = false
-        let endDateEarlierRangeEndDate = false
-        let endDate, endTime
-        if(this.end) {
-          let endString = this.end
-          if(typeof this.end === 'number'){
-            endString = getDateTime(this.end, this.hideSecond)
-          }
-          [endDate,endTime] = endString.split(' ')
-
-          if(this.end && !dateCompare(this.tempRange.startDate, this.end)) {
-            endDateEarlierRangeStartDate = true
-            this.tempRange.startDate = endDate
-          }
-          if(this.end && !dateCompare(this.tempRange.endDate, this.end)) {
-            endDateEarlierRangeEndDate = true
-            this.tempRange.endDate = endDate
-          }
-        }
-				if (!this.hasTime) {
-          start = this.displayRangeValue.startDate = this.tempRange.startDate
-					end = this.displayRangeValue.endDate = this.tempRange.endDate
-				} else {
-          if(startDateLaterRangeStartDate){
-            this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond)
-          }else if(endDateEarlierRangeStartDate){
-            this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond)
-          }
-          if(!this.tempRange.startTime){
-            this.tempRange.startTime = getTime(Date.now(), this.hideSecond)
-          }
-
-          if(startDateLaterRangeEndDate){
-            this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond)
-          }else if(endDateEarlierRangeEndDate){
-            this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond)
-          }
-          if(!this.tempRange.endTime){
-            this.tempRange.endTime = getTime(Date.now(), this.hideSecond)
-          }
-					start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}`
-					end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}`
-				}
-        if(!dateCompare(start,end)){
-          [start, end] = [end, start]
-        }
-				this.displayRangeValue.startDate = start
-				this.displayRangeValue.endDate = end
-				const displayRange = [start, end]
-				this.setEmit(displayRange)
-				this.pickerVisible = false
-			},
-			handleStartAndEnd(before, after, temp = false) {
-				if (!(before && after)) return
-
-				const type = temp ? 'tempRange' : 'range'
-        const isStartEarlierEnd = dateCompare(before, after)
-        this[type].startDate = isStartEarlierEnd ? before : after
-        this[type].endDate = isStartEarlierEnd ? after : before
-    },
-			/**
-			 * 比较时间大小
-			 */
-			dateCompare(startDate, endDate) {
-				// 计算截止时间
-				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
-				// 计算详细项的截止时间
-				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
-				return startDate <= endDate
-			},
-
-			/**
-			 * 比较时间差
-			 */
-			diffDate(startDate, endDate) {
-				// 计算截止时间
-				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
-				// 计算详细项的截止时间
-				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
-				const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
-				return Math.abs(diff)
-			},
-
-			clear(needEmit = true) {
-				if (!this.isRange) {
-					this.displayValue = ''
-					this.inputDate = ''
-					this.pickerTime = ''
-					if (this.isPhone) {
-						this.$refs.mobile && this.$refs.mobile.clearCalender()
-					} else {
-						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
-					}
-					if (needEmit) {
-						this.$emit('change', '')
-						this.$emit('input', '')
-						this.$emit('update:modelValue', '')
-					}
-				} else {
-					this.displayRangeValue.startDate = ''
-					this.displayRangeValue.endDate = ''
-					this.tempRange.startDate = ''
-					this.tempRange.startTime = ''
-					this.tempRange.endDate = ''
-					this.tempRange.endTime = ''
-					if (this.isPhone) {
-						this.$refs.mobile && this.$refs.mobile.clearCalender()
-					} else {
-						this.$refs.left && this.$refs.left.clearCalender()
-						this.$refs.right && this.$refs.right.clearCalender()
-						this.$refs.right && this.$refs.right.changeMonth('next')
-					}
-					if (needEmit) {
-						this.$emit('change', [])
-						this.$emit('input', [])
-						this.$emit('update:modelValue', [])
-					}
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	$uni-primary: #007aff !default;
-
-	.uni-date {
-		width: 100%;
-		flex: 1;
-	}
-	.uni-date-x {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		border-radius: 4px;
-		background-color: #fff;
-		color: #666;
-		font-size: 14px;
-		flex: 1;
-
-    .icon-calendar{
-      padding-left: 3px;
-    }
-    .range-separator{
-      height: 35px;
-      /* #ifndef MP */
-      padding: 0 2px;
-      /* #endif */
-			line-height: 35px;
-    }
-	}
-
-	.uni-date-x--border {
-		box-sizing: border-box;
-		border-radius: 4px;
-		border: 1px solid #e5e5e5;
-	}
-
-	.uni-date-editor--x {
-		display: flex;
-		align-items: center;
-		position: relative;
-	}
-
-	.uni-date-editor--x .uni-date__icon-clear {
-		padding-right: 3px;
-		display: flex;
-		align-items: center;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-date__x-input {
-		width: auto;
-		height: 35px;
-    /* #ifndef MP */
-    padding-left: 5px;
-    /* #endif */
-		position: relative;
-		flex: 1;
-		line-height: 35px;
-		font-size: 14px;
-		overflow: hidden;
-	}
-
-	.text-center {
-		text-align: center;
-	}
-
-	.uni-date__input {
-		height: 40px;
-		width: 100%;
-		line-height: 40px;
-		font-size: 14px;
-	}
-
-	.uni-date-range__input {
-		text-align: center;
-		max-width: 142px;
-	}
-
-	.uni-date-picker__container {
-		position: relative;
-	}
-
-	.uni-date-mask--pc {
-		position: fixed;
-		bottom: 0px;
-		top: 0px;
-		left: 0px;
-		right: 0px;
-		background-color: rgba(0, 0, 0, 0);
-		transition-duration: 0.3s;
-		z-index: 996;
-	}
-
-	.uni-date-single--x {
-		background-color: #fff;
-		position: absolute;
-		top: 0;
-		z-index: 999;
-		border: 1px solid #EBEEF5;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-	}
-
-	.uni-date-range--x {
-		background-color: #fff;
-		position: absolute;
-		top: 0;
-		z-index: 999;
-		border: 1px solid #EBEEF5;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-	}
-
-	.uni-date-editor--x__disabled {
-		opacity: 0.4;
-		cursor: default;
-	}
-
-	.uni-date-editor--logo {
-		width: 16px;
-		height: 16px;
-		vertical-align: middle;
-	}
-
-	/* 添加时间 */
-	.popup-x-header {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.popup-x-header--datetime {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex: 1;
-	}
-
-	.popup-x-body {
-		display: flex;
-	}
-
-	.popup-x-footer {
-		padding: 0 15px;
-		border-top-color: #F1F1F1;
-		border-top-style: solid;
-		border-top-width: 1px;
-		line-height: 40px;
-		text-align: right;
-		color: #666;
-	}
-
-	.popup-x-footer text:hover {
-		color: $uni-primary;
-		cursor: pointer;
-		opacity: 0.8;
-	}
-
-	.popup-x-footer .confirm-text {
-		margin-left: 20px;
-		color: $uni-primary;
-	}
-
-	.uni-date-changed {
-		text-align: center;
-		color: #333;
-		border-bottom-color: #F1F1F1;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-	}
-
-	.uni-date-changed--time text {
-		height: 50px;
-		line-height: 50px;
-	}
-
-	.uni-date-changed .uni-date-changed--time {
-		flex: 1;
-	}
-
-	.uni-date-changed--time-date {
-		color: #333;
-		opacity: 0.6;
-	}
-
-	.mr-50 {
-		margin-right: 50px;
-	}
-
-	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
-	.uni-popper__arrow,
-	.uni-popper__arrow::after {
-		position: absolute;
-		display: block;
-		width: 0;
-		height: 0;
-		border: 6px solid transparent;
-		border-top-width: 0;
-	}
-
-	.uni-popper__arrow {
-		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-		top: -6px;
-		left: 10%;
-		margin-right: 3px;
-		border-bottom-color: #EBEEF5;
-	}
-
-	.uni-popper__arrow::after {
-		content: " ";
-		top: 1px;
-		margin-left: -6px;
-		border-bottom-color: #fff;
-	}
-</style>
+<template>
+	<view class="uni-date">
+		<view class="uni-date-editor" @click="show">
+			<slot>
+				<view
+          class="uni-date-editor--x"
+          :class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}"
+        >
+					<view v-if="!isRange" class="uni-date-x uni-date-single">
+						<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
+						<view class="uni-date__x-input">{{ displayValue || singlePlaceholderText }}</view>
+					</view>
+
+					<view v-else class="uni-date-x uni-date-range">
+            <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
+            <view class="uni-date__x-input text-center">{{ displayRangeValue.startDate || startPlaceholderText }}</view>
+
+            <view class="range-separator">{{rangeSeparator}}</view>
+
+            <view class="uni-date__x-input text-center">{{ displayRangeValue.endDate || endPlaceholderText }}</view>
+					</view>
+
+					<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
+						<uni-icons type="clear" color="#c0c4cc" size="22"></uni-icons>
+					</view>
+				</view>
+			</slot>
+		</view>
+
+		<view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view>
+
+		<view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container">
+			<view v-if="!isRange" class="uni-date-single--x" :style="pickerPositionStyle">
+				<view class="uni-popper__arrow"></view>
+
+				<view v-if="hasTime" class="uni-date-changed popup-x-header">
+					<input class="uni-date__input text-center" type="text" v-model="inputDate"
+						:placeholder="selectDateText" />
+
+					<time-picker type="time" v-model="pickerTime" :border="false" :disabled="!inputDate"
+						:start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond" style="width: 100%;">
+						<input class="uni-date__input text-center" type="text" v-model="pickerTime" :placeholder="selectTimeText"
+							:disabled="!inputDate" />
+					</time-picker>
+				</view>
+
+				<Calendar ref="pcSingle" :showMonth="false" :start-date="calendarRange.startDate"
+					:end-date="calendarRange.endDate" :date="calendarDate" @change="singleChange"
+          :default-value="defaultValue"
+					style="padding: 0 8px;" />
+
+				<view v-if="hasTime" class="popup-x-footer">
+					<text class="confirm-text" @click="confirmSingleChange">{{okText}}</text>
+				</view>
+			</view>
+
+			<view v-else class="uni-date-range--x" :style="pickerPositionStyle">
+				<view class="uni-popper__arrow"></view>
+				<view v-if="hasTime" class="popup-x-header uni-date-changed">
+					<view class="popup-x-header--datetime">
+            <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
+            :placeholder="startDateText" />
+
+						<time-picker type="time" v-model="tempRange.startTime" :start="timepickerStartTime" :border="false"
+            :disabled="!tempRange.startDate" :hideSecond="hideSecond">
+            <input class="uni-date__input uni-date-range__input" type="text"
+            v-model="tempRange.startTime" :placeholder="startTimeText"
+            :disabled="!tempRange.startDate" />
+          </time-picker>
+        </view>
+
+        <uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
+
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
+							:placeholder="endDateText" />
+
+						<time-picker type="time" v-model="tempRange.endTime" :end="timepickerEndTime" :border="false"
+							:disabled="!tempRange.endDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
+								:placeholder="endTimeText" :disabled="!tempRange.endDate" />
+						</time-picker>
+					</view>
+				</view>
+
+				<view class="popup-x-body">
+					<Calendar ref="left" :showMonth="false" :start-date="calendarRange.startDate"
+            :end-date="calendarRange.endDate" :range="true" :pleStatus="endMultipleStatus"
+            @change="leftChange" @firstEnterCale="updateRightCale" style="padding: 0 8px;" />
+					<Calendar ref="right" :showMonth="false" :start-date="calendarRange.startDate"
+						:end-date="calendarRange.endDate" :range="true" @change="rightChange"
+						:pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
+						style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
+				</view>
+
+				<view v-if="hasTime" class="popup-x-footer">
+					<text @click="clear">{{clearText}}</text>
+					<text class="confirm-text" @click="confirmRangeChange">{{okText}}</text>
+				</view>
+			</view>
+		</view>
+
+		<Calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="mobileCalendarTime"
+			:start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime"
+      :startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
+      :default-value="defaultValue"
+			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
+			:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
+	</view>
+</template>
+<script>
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
+	 * @property {String} type 选择器类型
+	 * @property {String|Number|Array|Date} value 绑定值
+	 * @property {String} placeholder 单选择时的占位内容
+	 * @property {String} start 起始时间
+	 * @property {String} end 终止时间
+	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
+	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
+	 * @property {String} range-separator 选择范围时的分隔符
+	 * @property {Boolean} border = [true|false] 是否有边框
+	 * @property {Boolean} disabled = [true|false] 是否禁用
+	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
+	 * @property {[String} defaultValue 选择器打开时默认显示的时间
+	 * @event {Function} change 确定日期时触发的事件
+	 * @event {Function} maskClick 点击遮罩层触发的事件
+	 * @event {Function} show 打开弹出层
+	 * @event {Function} close 关闭弹出层
+	 * @event {Function} clear 清除上次选中的状态和值
+	 **/
+	import Calendar from './calendar.vue'
+	import TimePicker from './time-picker.vue'
+	import { initVueI18n } from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+  import { getDateTime, getDate, getTime, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat } from './util'
+
+	export default {
+		name: 'UniDatetimePicker',
+		options: {
+			virtualHost: true
+		},
+		components: {
+			Calendar,
+			TimePicker
+		},
+		data() {
+			return {
+				isRange: false,
+				hasTime: false,
+				displayValue: '',
+				inputDate: '',
+				calendarDate: '',
+				pickerTime: '',
+				calendarRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				displayRangeValue: {
+					startDate: '',
+					endDate: '',
+				},
+				tempRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				// 左右日历同步数据
+				startMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				endMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				pickerVisible: false,
+				pickerPositionStyle: null,
+				isEmitValue: false,
+				isPhone: false,
+				isFirstShow: true,
+        i18nT: () => {}
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			startPlaceholder: {
+        type: String,
+				default: ''
+			},
+			endPlaceholder: {
+				type: String,
+				default: ''
+			},
+			rangeSeparator: {
+				type: String,
+				default: '-'
+			},
+			border: {
+				type: [Boolean],
+				default: true
+			},
+			disabled: {
+				type: [Boolean],
+				default: false
+			},
+			clearIcon: {
+				type: [Boolean],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			},
+      defaultValue: {
+        type: [String, Object, Array],
+        default: ''
+      }
+		},
+		watch: {
+			type: {
+				immediate: true,
+				handler(newVal) {
+          this.hasTime = newVal.indexOf('time') !== -1
+					this.isRange = newVal.indexOf('range') !== -1
+				}
+			},
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			start: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) return
+					this.calendarRange.startDate = getDate(newVal)
+					if (this.hasTime) {
+						this.calendarRange.startTime = getTime(newVal)
+					}
+				}
+			},
+			end: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) return
+					this.calendarRange.endDate = getDate(newVal)
+					if (this.hasTime) {
+						this.calendarRange.endTime = getTime(newVal, this.hideSecond)
+					}
+				}
+			},
+		},
+		computed: {
+			timepickerStartTime() {
+				const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate
+				return activeDate === this.calendarRange.startDate ? this.calendarRange.startTime : ''
+			},
+			timepickerEndTime() {
+				const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate
+				return activeDate === this.calendarRange.endDate ? this.calendarRange.endTime : ''
+			},
+			mobileCalendarTime() {
+				const timeRange = {
+					start: this.tempRange.startTime,
+					end: this.tempRange.endTime
+				}
+				return this.isRange ? timeRange : this.pickerTime
+			},
+			mobSelectableTime() {
+				return {
+					start: this.calendarRange.startTime,
+					end: this.calendarRange.endTime
+				}
+			},
+			datePopupWidth() {
+				// todo
+				return this.isRange ? 653 : 301
+			},
+
+			/**
+			 * for i18n
+			 */
+			singlePlaceholderText() {
+				return this.placeholder || (this.type === 'date' ? this.selectDateText : this.selectDateTimeText)
+			},
+			startPlaceholderText() {
+				return this.startPlaceholder || this.startDateText
+			},
+			endPlaceholderText() {
+				return this.endPlaceholder || this.endDateText
+			},
+			selectDateText() {
+				return this.i18nT("uni-datetime-picker.selectDate")
+			},
+      selectDateTimeText() {
+        return this.i18nT("uni-datetime-picker.selectDateTime")
+      },
+			selectTimeText() {
+				return this.i18nT("uni-datetime-picker.selectTime")
+			},
+			startDateText() {
+				return this.startPlaceholder || this.i18nT("uni-datetime-picker.startDate")
+			},
+			startTimeText() {
+				return this.i18nT("uni-datetime-picker.startTime")
+			},
+			endDateText() {
+				return this.endPlaceholder || this.i18nT("uni-datetime-picker.endDate")
+			},
+			endTimeText() {
+				return this.i18nT("uni-datetime-picker.endTime")
+			},
+			okText() {
+				return this.i18nT("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return this.i18nT("uni-datetime-picker.clear")
+			},
+			showClearIcon() {
+				return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this.displayRangeValue.endDate))
+			}
+		},
+		created() {
+			this.initI18nT()
+      this.platform()
+		},
+		methods: {
+      initI18nT() {
+        const vueI18n = initVueI18n(i18nMessages)
+        this.i18nT = vueI18n.t
+      },
+			initPicker(newVal) {
+				if ((!newVal && !this.defaultValue) || Array.isArray(newVal) && !newVal.length) {
+					this.$nextTick(() => {
+						this.clear(false)
+					})
+					return
+				}
+
+				if (!Array.isArray(newVal) && !this.isRange) {
+          if(newVal){
+            this.displayValue = this.inputDate = this.calendarDate = getDate(newVal)
+            if (this.hasTime) {
+              this.pickerTime = getTime(newVal, this.hideSecond)
+              this.displayValue = `${this.displayValue} ${this.pickerTime}`
+            }
+          }else if(this.defaultValue){
+            this.inputDate = this.calendarDate = getDate(this.defaultValue)
+            if(this.hasTime){
+              this.pickerTime = getTime(this.defaultValue, this.hideSecond)
+            }
+          }
+				} else {
+					const [before, after] = newVal
+					if (!before && !after) return
+          const beforeDate = getDate(before)
+          const beforeTime = getTime(before, this.hideSecond)
+
+          const afterDate = getDate(after)
+          const afterTime = getTime(after, this.hideSecond)
+					const startDate = beforeDate
+					const endDate = afterDate
+					this.displayRangeValue.startDate = this.tempRange.startDate = startDate
+					this.displayRangeValue.endDate = this.tempRange.endDate = endDate
+
+					if (this.hasTime) {
+						this.displayRangeValue.startDate = `${beforeDate} ${beforeTime}`
+						this.displayRangeValue.endDate = `${afterDate} ${afterTime}`
+						this.tempRange.startTime = beforeTime
+						this.tempRange.endTime = afterTime
+					}
+					const defaultRange = {
+						before: beforeDate,
+						after: afterDate
+					}
+					this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
+						which: 'right'
+					})
+					this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
+						which: 'left'
+					})
+				}
+			},
+			updateLeftCale(e) {
+				const left = this.$refs.left
+				// 设置范围选
+				left.cale.setHoverMultiple(e.after)
+				left.setDate(this.$refs.left.nowDate.fullDate)
+			},
+			updateRightCale(e) {
+				const right = this.$refs.right
+				// 设置范围选
+				right.cale.setHoverMultiple(e.after)
+				right.setDate(this.$refs.right.nowDate.fullDate)
+			},
+			platform() {
+        if(typeof navigator !== "undefined"){
+          this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1
+          return
+        }
+				const { windowWidth } = uni.getSystemInfoSync()
+				this.isPhone = windowWidth <= 500
+				this.windowWidth = windowWidth
+			},
+			show() {
+				if (this.disabled) {
+					return
+				}
+				this.platform()
+				if (this.isPhone) {
+					setTimeout(() => {
+            this.$refs.mobile.open()
+          }, 0);
+					return
+				}
+				this.pickerPositionStyle = {
+					top: '10px'
+				}
+				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
+				dateEditor.boundingClientRect(rect => {
+					if (this.windowWidth - rect.left < this.datePopupWidth) {
+						this.pickerPositionStyle.right = 0
+					}
+				}).exec()
+				setTimeout(() => {
+					this.pickerVisible = !this.pickerVisible
+					if (!this.isPhone && this.isRange && this.isFirstShow) {
+						this.isFirstShow = false
+						const {
+							startDate,
+							endDate
+						} = this.calendarRange
+						if (startDate && endDate) {
+							if (this.diffDate(startDate, endDate) < 30) {
+								this.$refs.right.changeMonth('pre')
+							}
+						} else {
+							this.$refs.right.changeMonth('next')
+							this.$refs.right.cale.lastHover = false
+						}
+					}
+
+				}, 50)
+			},
+			close() {
+				setTimeout(() => {
+					this.pickerVisible = false
+					this.$emit('maskClick', this.value)
+					this.$refs.mobile && this.$refs.mobile.close()
+				}, 20)
+			},
+			setEmit(value) {
+				if (this.returnType === "timestamp" || this.returnType === "date") {
+					if (!Array.isArray(value)) {
+						if (!this.hasTime) {
+							value = value + ' ' + '00:00:00'
+						}
+						value = this.createTimestamp(value)
+						if (this.returnType === "date") {
+							value = new Date(value)
+						}
+					} else {
+						if (!this.hasTime) {
+							value[0] = value[0] + ' ' + '00:00:00'
+							value[1] = value[1] + ' ' + '00:00:00'
+						}
+						value[0] = this.createTimestamp(value[0])
+						value[1] = this.createTimestamp(value[1])
+						if (this.returnType === "date") {
+							value[0] = new Date(value[0])
+							value[1] = new Date(value[1])
+						}
+					}
+				}
+
+				this.$emit('update:modelValue', value)
+				this.$emit('input', value)
+				this.$emit('change', value)
+				this.isEmitValue = true
+			},
+			createTimestamp(date) {
+				date = fixIosDateFormat(date)
+				return Date.parse(new Date(date))
+			},
+			singleChange(e) {
+				this.calendarDate = this.inputDate = e.fulldate
+				if (this.hasTime) return
+				this.confirmSingleChange()
+			},
+			confirmSingleChange() {
+        if(!checkDate(this.inputDate)){
+					const now = new Date()
+          this.calendarDate = this.inputDate = getDate(now)
+					this.pickerTime = getTime(now, this.hideSecond)
+        }
+
+        let startLaterInputDate = false
+        let startDate, startTime
+        if(this.start) {
+          let startString = this.start
+          if(typeof this.start === 'number'){
+            startString = getDateTime(this.start, this.hideSecond)
+          }
+          [startDate, startTime] = startString.split(' ')
+          if(this.start && !dateCompare(startDate, this.inputDate)) {
+            startLaterInputDate = true
+            this.inputDate = startDate
+          }
+        }
+
+        let endEarlierInputDate = false
+        let endDate, endTime
+        if(this.end) {
+          let endString = this.end
+          if(typeof this.end === 'number'){
+            endString = getDateTime(this.end, this.hideSecond)
+          }
+          [endDate, endTime] = endString.split(' ')
+          if(this.end && !dateCompare(this.inputDate, endDate)) {
+            endEarlierInputDate = true
+            this.inputDate = endDate
+          }
+        }
+				if (this.hasTime) {
+          if(startLaterInputDate){
+            this.pickerTime = startTime || getDefaultSecond(this.hideSecond)
+          }
+          if(endEarlierInputDate){
+            this.pickerTime = endTime || getDefaultSecond(this.hideSecond)
+          }
+          if(!this.pickerTime){
+            this.pickerTime = getTime(Date.now(), this.hideSecond)
+          }
+					this.displayValue = `${this.inputDate} ${this.pickerTime}`
+				} else {
+          this.displayValue = this.inputDate
+				}
+				this.setEmit(this.displayValue)
+				this.pickerVisible = false
+			},
+			leftChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
+			},
+			rightChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
+			},
+			mobileChange(e) {
+				if (this.isRange) {
+					const {before, after} = e.range
+
+          if(!before || !after){
+            return
+          }
+
+					this.handleStartAndEnd(before, after, true)
+					if (this.hasTime) {
+						const {
+							startTime,
+							endTime
+						} = e.timeRange
+						this.tempRange.startTime = startTime
+						this.tempRange.endTime = endTime
+					}
+					this.confirmRangeChange()
+				} else {
+					if (this.hasTime) {
+						this.displayValue = e.fulldate + ' ' + e.time
+					} else {
+						this.displayValue = e.fulldate
+					}
+					this.setEmit(this.displayValue)
+				}
+				this.$refs.mobile.close()
+			},
+			rangeChange(before, after) {
+				if (!(before && after)) return
+				this.handleStartAndEnd(before, after, true)
+				if (this.hasTime) return
+				this.confirmRangeChange()
+			},
+			confirmRangeChange() {
+				if (!this.tempRange.startDate || !this.tempRange.endDate) {
+					this.pickerVisible = false
+					return
+				}
+        if(!checkDate(this.tempRange.startDate)){
+          this.tempRange.startDate = getDate(Date.now())
+        }
+        if(!checkDate(this.tempRange.endDate)){
+          this.tempRange.endDate = getDate(Date.now())
+        }
+
+				let start, end
+
+        let startDateLaterRangeStartDate = false
+        let startDateLaterRangeEndDate = false
+        let startDate, startTime
+        if(this.start) {
+          let startString = this.start
+          if(typeof this.start === 'number'){
+            startString = getDateTime(this.start, this.hideSecond)
+          }
+          [startDate,startTime] = startString.split(' ')
+          if(this.start && !dateCompare(this.start, this.tempRange.startDate)) {
+            startDateLaterRangeStartDate = true
+            this.tempRange.startDate = startDate
+          }
+          if(this.start && !dateCompare(this.start, this.tempRange.endDate)) {
+            startDateLaterRangeEndDate = true
+            this.tempRange.endDate = startDate
+          }
+        }
+        let endDateEarlierRangeStartDate = false
+        let endDateEarlierRangeEndDate = false
+        let endDate, endTime
+        if(this.end) {
+          let endString = this.end
+          if(typeof this.end === 'number'){
+            endString = getDateTime(this.end, this.hideSecond)
+          }
+          [endDate,endTime] = endString.split(' ')
+
+          if(this.end && !dateCompare(this.tempRange.startDate, this.end)) {
+            endDateEarlierRangeStartDate = true
+            this.tempRange.startDate = endDate
+          }
+          if(this.end && !dateCompare(this.tempRange.endDate, this.end)) {
+            endDateEarlierRangeEndDate = true
+            this.tempRange.endDate = endDate
+          }
+        }
+				if (!this.hasTime) {
+          start = this.displayRangeValue.startDate = this.tempRange.startDate
+					end = this.displayRangeValue.endDate = this.tempRange.endDate
+				} else {
+          if(startDateLaterRangeStartDate){
+            this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond)
+          }else if(endDateEarlierRangeStartDate){
+            this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond)
+          }
+          if(!this.tempRange.startTime){
+            this.tempRange.startTime = getTime(Date.now(), this.hideSecond)
+          }
+
+          if(startDateLaterRangeEndDate){
+            this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond)
+          }else if(endDateEarlierRangeEndDate){
+            this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond)
+          }
+          if(!this.tempRange.endTime){
+            this.tempRange.endTime = getTime(Date.now(), this.hideSecond)
+          }
+					start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}`
+					end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}`
+				}
+        if(!dateCompare(start,end)){
+          [start, end] = [end, start]
+        }
+				this.displayRangeValue.startDate = start
+				this.displayRangeValue.endDate = end
+				const displayRange = [start, end]
+				this.setEmit(displayRange)
+				this.pickerVisible = false
+			},
+			handleStartAndEnd(before, after, temp = false) {
+				if (!(before && after)) return
+
+				const type = temp ? 'tempRange' : 'range'
+        const isStartEarlierEnd = dateCompare(before, after)
+        this[type].startDate = isStartEarlierEnd ? before : after
+        this[type].endDate = isStartEarlierEnd ? after : before
+    },
+			/**
+			 * 比较时间大小
+			 */
+			dateCompare(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				return startDate <= endDate
+			},
+
+			/**
+			 * 比较时间差
+			 */
+			diffDate(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
+				return Math.abs(diff)
+			},
+
+			clear(needEmit = true) {
+				if (!this.isRange) {
+					this.displayValue = ''
+					this.inputDate = ''
+					this.pickerTime = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
+					}
+					if (needEmit) {
+						this.$emit('change', '')
+						this.$emit('input', '')
+						this.$emit('update:modelValue', '')
+					}
+				} else {
+					this.displayRangeValue.startDate = ''
+					this.displayRangeValue.endDate = ''
+					this.tempRange.startDate = ''
+					this.tempRange.startTime = ''
+					this.tempRange.endDate = ''
+					this.tempRange.endTime = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.left && this.$refs.left.clearCalender()
+						this.$refs.right && this.$refs.right.clearCalender()
+						this.$refs.right && this.$refs.right.changeMonth('next')
+					}
+					if (needEmit) {
+						this.$emit('change', [])
+						this.$emit('input', [])
+						this.$emit('update:modelValue', [])
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
+	.uni-date {
+		width: 100%;
+		flex: 1;
+	}
+	.uni-date-x {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		background-color: #fff;
+		color: #666;
+		font-size: 14px;
+		flex: 1;
+
+    .icon-calendar{
+      padding-left: 3px;
+    }
+    .range-separator{
+      height: 35px;
+      /* #ifndef MP */
+      padding: 0 2px;
+      /* #endif */
+			line-height: 35px;
+    }
+	}
+
+	.uni-date-x--border {
+		box-sizing: border-box;
+		border-radius: 4px;
+		border: 1px solid #e5e5e5;
+	}
+
+	.uni-date-editor--x {
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	.uni-date-editor--x .uni-date__icon-clear {
+		padding-right: 3px;
+		display: flex;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-date__x-input {
+		width: auto;
+		height: 35px;
+    /* #ifndef MP */
+    padding-left: 5px;
+    /* #endif */
+		position: relative;
+		flex: 1;
+		line-height: 35px;
+		font-size: 14px;
+		overflow: hidden;
+	}
+
+	.text-center {
+		text-align: center;
+	}
+
+	.uni-date__input {
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+	}
+
+	.uni-date-range__input {
+		text-align: center;
+		max-width: 142px;
+	}
+
+	.uni-date-picker__container {
+		position: relative;
+	}
+
+	.uni-date-mask--pc {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0);
+		transition-duration: 0.3s;
+		z-index: 996;
+	}
+
+	.uni-date-single--x {
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-range--x {
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-editor--x__disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	.uni-date-editor--logo {
+		width: 16px;
+		height: 16px;
+		vertical-align: middle;
+	}
+
+	/* 添加时间 */
+	.popup-x-header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.popup-x-header--datetime {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+	}
+
+	.popup-x-body {
+		display: flex;
+	}
+
+	.popup-x-footer {
+		padding: 0 15px;
+		border-top-color: #F1F1F1;
+		border-top-style: solid;
+		border-top-width: 1px;
+		line-height: 40px;
+		text-align: right;
+		color: #666;
+	}
+
+	.popup-x-footer text:hover {
+		color: $uni-primary;
+		cursor: pointer;
+		opacity: 0.8;
+	}
+
+	.popup-x-footer .confirm-text {
+		margin-left: 20px;
+		color: $uni-primary;
+	}
+
+	.uni-date-changed {
+		text-align: center;
+		color: #333;
+		border-bottom-color: #F1F1F1;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-date-changed--time text {
+		height: 50px;
+		line-height: 50px;
+	}
+
+	.uni-date-changed .uni-date-changed--time {
+		flex: 1;
+	}
+
+	.uni-date-changed--time-date {
+		color: #333;
+		opacity: 0.6;
+	}
+
+	.mr-50 {
+		margin-right: 50px;
+	}
+
+	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border: 6px solid transparent;
+		border-top-width: 0;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-bottom-color: #fff;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
index fc98623..3ea5bb1 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
@@ -1,453 +1,453 @@
-class Calendar {
-	constructor({
-		selected,
-		startDate,
-		endDate,
-		range,
-	} = {}) {
-		// 当前日期
-		this.date = this.getDateObj(new Date()) // 当前初入日期
-		// 打点信息
-		this.selected = selected || [];
-		// 起始时间
-		this.startDate = startDate
-		// 终止时间
-		this.endDate = endDate
-    // 是否范围选择
-		this.range = range
-		// 多选状态
-		this.cleanMultipleStatus()
-		// 每周日期
-		this.weeks = {}
-		this.lastHover = false
-	}
-	/**
-	 * 设置日期
-	 * @param {Object} date
-	 */
-	setDate(date) {
-		const selectDate = this.getDateObj(date)
-		this.getWeeks(selectDate.fullDate)
-	}
-
-	/**
-	 * 清理多选状态
-	 */
-	cleanMultipleStatus() {
-		this.multipleStatus = {
-			before: '',
-			after: '',
-			data: []
-		}
-	}
-
-	setStartDate(startDate) {
-		this.startDate = startDate
-	}
-
-	setEndDate(endDate) {
-		this.endDate = endDate
-	}
-
-  getPreMonthObj(date){
-    date = fixIosDateFormat(date)
-    date = new Date(date)
-
-    const oldMonth = date.getMonth()
-    date.setMonth(oldMonth - 1)
-    const newMonth = date.getMonth()
-    if(oldMonth !== 0 && newMonth - oldMonth === 0){
-      date.setMonth(newMonth - 1)
-    }
-    return this.getDateObj(date)
-  }
-  getNextMonthObj(date){
-    date = fixIosDateFormat(date)
-    date = new Date(date)
-
-    const oldMonth = date.getMonth()
-    date.setMonth(oldMonth + 1)
-    const newMonth = date.getMonth()
-    if(newMonth - oldMonth > 1){
-      date.setMonth(newMonth - 1)
-    }
-    return this.getDateObj(date)
-  }
-
-	/**
-	 * 获取指定格式Date对象
-	 */
-	getDateObj(date) {
-    date = fixIosDateFormat(date)
-    date = new Date(date)
-
-		return {
-			fullDate: getDate(date),
-      year: date.getFullYear(),
-      month: addZero(date.getMonth() + 1),
-      date: addZero(date.getDate()),
-      day: date.getDay()
-		}
-	}
-
-	/**
-	 * 获取上一个月日期集合
-	 */
-	getPreMonthDays(amount, dateObj) {
-		const result = []
-		for (let i = amount - 1; i >= 0; i--) {
-      const month = dateObj.month > 1 ? dateObj.month -1 : 12
-			const year = month === 12 ? dateObj.year - 1 : dateObj.year
-			const date = new Date(year,month,-i).getDate()
-			const fullDate = `${year}-${addZero(month)}-${addZero(date)}`
-			let multiples = this.multipleStatus.data
-			let multiplesStatus = -1
-			if (this.range && multiples) {
-			  multiplesStatus = multiples.findIndex((item) => {
-			    return this.dateEqual(item, fullDate)
-			  })
-			}
-			const checked = multiplesStatus !== -1
-			// 获取打点信息
-			const extraInfo = this.selected && this.selected.find((item) => {
-				if (this.dateEqual(fullDate, item.date)) {
-					return item
-				}
-			})
-			result.push({
-				fullDate,
-				year,
-				month,
-				date,
-				multiple: this.range ? checked : false,
-				beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
-				afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
-				disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
-				isToday: fullDate === this.date.fullDate,
-				userChecked: false,
-				extraInfo
-			})
-		}
-		return result
-	}
-	/**
-	 * 获取本月日期集合
-	 */
-	getCurrentMonthDays(amount, dateObj) {
-		const result = []
-		const fullDate = this.date.fullDate
-		for (let i = 1; i <= amount; i++) {
-			const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
-			const isToday = fullDate === currentDate
-			// 获取打点信息
-			const extraInfo = this.selected && this.selected.find((item) => {
-				if (this.dateEqual(currentDate, item.date)) {
-					return item
-				}
-			})
-
-			// 日期禁用
-			let disableBefore = true
-			let disableAfter = true
-			if (this.startDate) {
-				disableBefore = dateCompare(this.startDate, currentDate)
-			}
-
-			if (this.endDate) {
-				disableAfter = dateCompare(currentDate, this.endDate)
-			}
-
-			let multiples = this.multipleStatus.data
-			let multiplesStatus = -1
-			if (this.range && multiples) {
-        multiplesStatus = multiples.findIndex((item) => {
-          return this.dateEqual(item, currentDate)
-        })
-			}
-      const checked = multiplesStatus !== -1
-
-			result.push({
-				fullDate: currentDate,
-				year: dateObj.year,
-				month: dateObj.month,
-				date: i,
-				multiple: this.range ? checked : false,
-				beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
-				afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
-				disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)),
-				isToday,
-				userChecked: false,
-        extraInfo
-			})
-		}
-		return result
-	}
-	/**
-	 * 获取下一个月日期集合
-	 */
-	_getNextMonthDays(amount, dateObj) {
-		const result = []
-    const month = dateObj.month + 1
-		for (let i = 1; i <= amount; i++) {
-			const month = dateObj.month === 12 ? 1 : dateObj.month*1 + 1
-			const year = month === 1 ? dateObj.year + 1 : dateObj.year
-			const fullDate = `${year}-${addZero(month)}-${addZero(i)}`
-			let multiples = this.multipleStatus.data
-			let multiplesStatus = -1
-			if (this.range && multiples) {
-			  multiplesStatus = multiples.findIndex((item) => {
-			    return this.dateEqual(item, fullDate)
-			  })
-			}
-			const checked = multiplesStatus !== -1
-			// 获取打点信息
-			const extraInfo = this.selected && this.selected.find((item) => {
-				if (this.dateEqual(fullDate, item.date)) {
-					return item
-				}
-			})
-			result.push({
-				fullDate,
-				year,
-				date: i,
-				month,
-				multiple: this.range ? checked : false,
-				beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
-				afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
-				disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
-				isToday: fullDate === this.date.fullDate,
-				userChecked: false,
-				extraInfo
-			})
-		}
-		return result
-	}
-
-	/**
-	 * 获取当前日期详情
-	 * @param {Object} date
-	 */
-	getInfo(date) {
-		if (!date) {
-			date = new Date()
-		}
-
-		return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
-	}
-
-	/**
-	 * 比较时间是否相等
-	 */
-	dateEqual(before, after) {
-		before = new Date(fixIosDateFormat(before))
-		after = new Date(fixIosDateFormat(after))
-		return before.valueOf() === after.valueOf()
-	}
-
-	/**
-	 *  比较真实起始日期
-	 */
-
-	isLogicBefore(currentDate, before, after) {
-		let logicBefore = before
-		if (before && after) {
-			logicBefore = dateCompare(before, after) ? before : after
-		}
-		return this.dateEqual(logicBefore, currentDate)
-	}
-
-	isLogicAfter(currentDate, before, after) {
-		let logicAfter = after
-		if (before && after) {
-			logicAfter = dateCompare(before, after) ? after : before
-		}
-		return this.dateEqual(logicAfter, currentDate)
-	}
-
-	/**
-	 * 获取日期范围内所有日期
-	 * @param {Object} begin
-	 * @param {Object} end
-	 */
-	geDateAll(begin, end) {
-		var arr = []
-		var ab = begin.split('-')
-		var ae = end.split('-')
-		var db = new Date()
-		db.setFullYear(ab[0], ab[1] - 1, ab[2])
-		var de = new Date()
-		de.setFullYear(ae[0], ae[1] - 1, ae[2])
-		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
-		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
-		for (var k = unixDb; k <= unixDe;) {
-			k = k + 24 * 60 * 60 * 1000
-			arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
-		}
-		return arr
-	}
-
-	/**
-	 *  获取多选状态
-	 */
-	setMultiple(fullDate) {
-    if (!this.range) return
-
-		let {
-			before,
-			after
-		} = this.multipleStatus
-		if (before && after) {
-			if (!this.lastHover) {
-				this.lastHover = true
-				return
-			}
-			this.multipleStatus.before = fullDate
-			this.multipleStatus.after = ''
-			this.multipleStatus.data = []
-			this.multipleStatus.fulldate = ''
-			this.lastHover = false
-		} else {
-			if (!before) {
-				this.multipleStatus.before = fullDate
-				this.lastHover = false
-			} else {
-				this.multipleStatus.after = fullDate
-				if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
-					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
-						.after);
-				} else {
-					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
-						.before);
-				}
-				this.lastHover = true
-			}
-		}
-		this.getWeeks(fullDate)
-	}
-
-	/**
-	 *  鼠标 hover 更新多选状态
-	 */
-	setHoverMultiple(fullDate) {
-    if (!this.range || this.lastHover) return
-
-		const { before } = this.multipleStatus
-
-		if (!before) {
-			this.multipleStatus.before = fullDate
-		} else {
-			this.multipleStatus.after = fullDate
-			if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
-				this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
-			} else {
-				this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
-			}
-		}
-		this.getWeeks(fullDate)
-	}
-
-	/**
-	 * 更新默认值多选状态
-	 */
-	setDefaultMultiple(before, after) {
-		this.multipleStatus.before = before
-		this.multipleStatus.after = after
-		if (before && after) {
-			if (dateCompare(before, after)) {
-				this.multipleStatus.data = this.geDateAll(before, after);
-				this.getWeeks(after)
-			} else {
-				this.multipleStatus.data = this.geDateAll(after, before);
-				this.getWeeks(before)
-			}
-		}
-	}
-
-	/**
-	 * 获取每周数据
-	 * @param {Object} dateData
-	 */
-	getWeeks(dateData) {
-		const {
-			year,
-			month,
-		} = this.getDateObj(dateData)
-
-		const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
-    const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
-
-		const currentMonthDayAmount = new Date(year, month, 0).getDate()
-    const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
-
-    const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
-    const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
-
-		const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
-
-		const weeks = new Array(6)
-		for (let i = 0; i < calendarDays.length; i++) {
-      const index = Math.floor(i / 7)
-      if(!weeks[index]){
-        weeks[index] = new Array(7)
-      }
-			weeks[index][i % 7] = calendarDays[i]
-		}
-
-		this.calendar = calendarDays
-		this.weeks = weeks
-	}
-}
-
-function getDateTime(date, hideSecond){
-  return `${getDate(date)} ${getTime(date, hideSecond)}`
-}
-
-function getDate(date) {
-  date = fixIosDateFormat(date)
-  date = new Date(date)
-  const year = date.getFullYear()
-  const month = date.getMonth()+1
-  const day = date.getDate()
-  return `${year}-${addZero(month)}-${addZero(day)}`
-}
-
-function getTime(date, hideSecond){
-  date = fixIosDateFormat(date)
-  date = new Date(date)
-  const hour = date.getHours()
-  const minute = date.getMinutes()
-  const second = date.getSeconds()
-  return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
-}
-
-function addZero(num) {
-  if(num < 10){
-    num = `0${num}`
-  }
-  return num
-}
-
-function getDefaultSecond(hideSecond) {
-  return hideSecond ? '00:00' : '00:00:00'
-}
-
-function dateCompare(startDate, endDate) {
-  startDate = new Date(fixIosDateFormat(startDate))
-  endDate = new Date(fixIosDateFormat(endDate))
-  return startDate <= endDate
-}
-
-function checkDate(date){
-  const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
-  return date.match(dateReg)
-}
-
-const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/
-function fixIosDateFormat(value) {
-  if (typeof value === 'string' && dateTimeReg.test(value)) {
-    value = value.replace(/-/g, '/')
-  }
-  return value
-}
-
+class Calendar {
+	constructor({
+		selected,
+		startDate,
+		endDate,
+		range,
+	} = {}) {
+		// 当前日期
+		this.date = this.getDateObj(new Date()) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 起始时间
+		this.startDate = startDate
+		// 终止时间
+		this.endDate = endDate
+    // 是否范围选择
+		this.range = range
+		// 多选状态
+		this.cleanMultipleStatus()
+		// 每周日期
+		this.weeks = {}
+		this.lastHover = false
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		const selectDate = this.getDateObj(date)
+		this.getWeeks(selectDate.fullDate)
+	}
+
+	/**
+	 * 清理多选状态
+	 */
+	cleanMultipleStatus() {
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+	}
+
+	setStartDate(startDate) {
+		this.startDate = startDate
+	}
+
+	setEndDate(endDate) {
+		this.endDate = endDate
+	}
+
+  getPreMonthObj(date){
+    date = fixIosDateFormat(date)
+    date = new Date(date)
+
+    const oldMonth = date.getMonth()
+    date.setMonth(oldMonth - 1)
+    const newMonth = date.getMonth()
+    if(oldMonth !== 0 && newMonth - oldMonth === 0){
+      date.setMonth(newMonth - 1)
+    }
+    return this.getDateObj(date)
+  }
+  getNextMonthObj(date){
+    date = fixIosDateFormat(date)
+    date = new Date(date)
+
+    const oldMonth = date.getMonth()
+    date.setMonth(oldMonth + 1)
+    const newMonth = date.getMonth()
+    if(newMonth - oldMonth > 1){
+      date.setMonth(newMonth - 1)
+    }
+    return this.getDateObj(date)
+  }
+
+	/**
+	 * 获取指定格式Date对象
+	 */
+	getDateObj(date) {
+    date = fixIosDateFormat(date)
+    date = new Date(date)
+
+		return {
+			fullDate: getDate(date),
+      year: date.getFullYear(),
+      month: addZero(date.getMonth() + 1),
+      date: addZero(date.getDate()),
+      day: date.getDay()
+		}
+	}
+
+	/**
+	 * 获取上一个月日期集合
+	 */
+	getPreMonthDays(amount, dateObj) {
+		const result = []
+		for (let i = amount - 1; i >= 0; i--) {
+      const month = dateObj.month > 1 ? dateObj.month -1 : 12
+			const year = month === 12 ? dateObj.year - 1 : dateObj.year
+			const date = new Date(year,month,-i).getDate()
+			const fullDate = `${year}-${addZero(month)}-${addZero(date)}`
+			let multiples = this.multipleStatus.data
+			let multiplesStatus = -1
+			if (this.range && multiples) {
+			  multiplesStatus = multiples.findIndex((item) => {
+			    return this.dateEqual(item, fullDate)
+			  })
+			}
+			const checked = multiplesStatus !== -1
+			// 获取打点信息
+			const extraInfo = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(fullDate, item.date)) {
+					return item
+				}
+			})
+			result.push({
+				fullDate,
+				year,
+				month,
+				date,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
+				afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
+				disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
+				isToday: fullDate === this.date.fullDate,
+				userChecked: false,
+				extraInfo
+			})
+		}
+		return result
+	}
+	/**
+	 * 获取本月日期集合
+	 */
+	getCurrentMonthDays(amount, dateObj) {
+		const result = []
+		const fullDate = this.date.fullDate
+		for (let i = 1; i <= amount; i++) {
+			const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
+			const isToday = fullDate === currentDate
+			// 获取打点信息
+			const extraInfo = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(currentDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				disableBefore = dateCompare(this.startDate, currentDate)
+			}
+
+			if (this.endDate) {
+				disableAfter = dateCompare(currentDate, this.endDate)
+			}
+
+			let multiples = this.multipleStatus.data
+			let multiplesStatus = -1
+			if (this.range && multiples) {
+        multiplesStatus = multiples.findIndex((item) => {
+          return this.dateEqual(item, currentDate)
+        })
+			}
+      const checked = multiplesStatus !== -1
+
+			result.push({
+				fullDate: currentDate,
+				year: dateObj.year,
+				month: dateObj.month,
+				date: i,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
+				afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
+				disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)),
+				isToday,
+				userChecked: false,
+        extraInfo
+			})
+		}
+		return result
+	}
+	/**
+	 * 获取下一个月日期集合
+	 */
+	_getNextMonthDays(amount, dateObj) {
+		const result = []
+    const month = dateObj.month + 1
+		for (let i = 1; i <= amount; i++) {
+			const month = dateObj.month === 12 ? 1 : dateObj.month*1 + 1
+			const year = month === 1 ? dateObj.year + 1 : dateObj.year
+			const fullDate = `${year}-${addZero(month)}-${addZero(i)}`
+			let multiples = this.multipleStatus.data
+			let multiplesStatus = -1
+			if (this.range && multiples) {
+			  multiplesStatus = multiples.findIndex((item) => {
+			    return this.dateEqual(item, fullDate)
+			  })
+			}
+			const checked = multiplesStatus !== -1
+			// 获取打点信息
+			const extraInfo = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(fullDate, item.date)) {
+					return item
+				}
+			})
+			result.push({
+				fullDate,
+				year,
+				date: i,
+				month,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
+				afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
+				disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
+				isToday: fullDate === this.date.fullDate,
+				userChecked: false,
+				extraInfo
+			})
+		}
+		return result
+	}
+
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+
+		return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		before = new Date(fixIosDateFormat(before))
+		after = new Date(fixIosDateFormat(after))
+		return before.valueOf() === after.valueOf()
+	}
+
+	/**
+	 *  比较真实起始日期
+	 */
+
+	isLogicBefore(currentDate, before, after) {
+		let logicBefore = before
+		if (before && after) {
+			logicBefore = dateCompare(before, after) ? before : after
+		}
+		return this.dateEqual(logicBefore, currentDate)
+	}
+
+	isLogicAfter(currentDate, before, after) {
+		let logicAfter = after
+		if (before && after) {
+			logicAfter = dateCompare(before, after) ? after : before
+		}
+		return this.dateEqual(logicAfter, currentDate)
+	}
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+    if (!this.range) return
+
+		let {
+			before,
+			after
+		} = this.multipleStatus
+		if (before && after) {
+			if (!this.lastHover) {
+				this.lastHover = true
+				return
+			}
+			this.multipleStatus.before = fullDate
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+			this.multipleStatus.fulldate = ''
+			this.lastHover = false
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+				this.lastHover = false
+			} else {
+				this.multipleStatus.after = fullDate
+				if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
+						.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
+						.before);
+				}
+				this.lastHover = true
+			}
+		}
+		this.getWeeks(fullDate)
+	}
+
+	/**
+	 *  鼠标 hover 更新多选状态
+	 */
+	setHoverMultiple(fullDate) {
+    if (!this.range || this.lastHover) return
+
+		const { before } = this.multipleStatus
+
+		if (!before) {
+			this.multipleStatus.before = fullDate
+		} else {
+			this.multipleStatus.after = fullDate
+			if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+				this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+			} else {
+				this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+			}
+		}
+		this.getWeeks(fullDate)
+	}
+
+	/**
+	 * 更新默认值多选状态
+	 */
+	setDefaultMultiple(before, after) {
+		this.multipleStatus.before = before
+		this.multipleStatus.after = after
+		if (before && after) {
+			if (dateCompare(before, after)) {
+				this.multipleStatus.data = this.geDateAll(before, after);
+				this.getWeeks(after)
+			} else {
+				this.multipleStatus.data = this.geDateAll(after, before);
+				this.getWeeks(before)
+			}
+		}
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	getWeeks(dateData) {
+		const {
+			year,
+			month,
+		} = this.getDateObj(dateData)
+
+		const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
+    const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
+
+		const currentMonthDayAmount = new Date(year, month, 0).getDate()
+    const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
+
+    const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
+    const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
+
+		const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
+
+		const weeks = new Array(6)
+		for (let i = 0; i < calendarDays.length; i++) {
+      const index = Math.floor(i / 7)
+      if(!weeks[index]){
+        weeks[index] = new Array(7)
+      }
+			weeks[index][i % 7] = calendarDays[i]
+		}
+
+		this.calendar = calendarDays
+		this.weeks = weeks
+	}
+}
+
+function getDateTime(date, hideSecond){
+  return `${getDate(date)} ${getTime(date, hideSecond)}`
+}
+
+function getDate(date) {
+  date = fixIosDateFormat(date)
+  date = new Date(date)
+  const year = date.getFullYear()
+  const month = date.getMonth()+1
+  const day = date.getDate()
+  return `${year}-${addZero(month)}-${addZero(day)}`
+}
+
+function getTime(date, hideSecond){
+  date = fixIosDateFormat(date)
+  date = new Date(date)
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+  return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
+}
+
+function addZero(num) {
+  if(num < 10){
+    num = `0${num}`
+  }
+  return num
+}
+
+function getDefaultSecond(hideSecond) {
+  return hideSecond ? '00:00' : '00:00:00'
+}
+
+function dateCompare(startDate, endDate) {
+  startDate = new Date(fixIosDateFormat(startDate))
+  endDate = new Date(fixIosDateFormat(endDate))
+  return startDate <= endDate
+}
+
+function checkDate(date){
+  const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
+  return date.match(dateReg)
+}
+
+const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/
+function fixIosDateFormat(value) {
+  if (typeof value === 'string' && dateTimeReg.test(value)) {
+    value = value.replace(/-/g, '/')
+  }
+  return value
+}
+
 export {Calendar, getDateTime, getDate, getTime, addZero, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat}
\ No newline at end of file
diff --git a/uni_modules/uni-table/changelog.md b/uni_modules/uni-table/changelog.md
new file mode 100644
index 0000000..cacf2a6
--- /dev/null
+++ b/uni_modules/uni-table/changelog.md
@@ -0,0 +1,27 @@
+## 1.2.3（2023-03-28）
+- 修复 在vue3模式下可能会出现错误的问题
+## 1.2.2（2022-11-29）
+- 优化 主题样式
+## 1.2.1（2022-06-06）
+- 修复 微信小程序存在无使用组件的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-table](https://uniapp.dcloud.io/component/uniui/uni-table)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-07-08）
+- 新增 uni-th 支持 date 日期筛选范围
+## 1.0.6（2021-07-05）
+- 新增 uni-th 支持 range 筛选范围
+## 1.0.5（2021-06-28）
+- 新增 uni-th 筛选功能
+## 1.0.4（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.3（2021-04-16）
+- 新增 sortable 属性，是否开启单列排序
+- 优化 表格多选逻辑
+## 1.0.2（2021-03-22）
+- uni-tr 添加 disabled 属性，用于 type=selection 时，设置某行是否可由全选按钮控制
+## 1.0.1（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-table/components/uni-table/uni-table.vue b/uni_modules/uni-table/components/uni-table/uni-table.vue
new file mode 100644
index 0000000..9fe681d
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-table/uni-table.vue
@@ -0,0 +1,455 @@
+<template>
+	<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
+		<!-- #ifdef H5 -->
+		<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
+			<slot></slot>
+			<tr v-if="noData" class="uni-table-loading">
+				<td class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</td>
+			</tr>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
+		</table>
+		<!-- #endif -->
+		<!-- #ifndef H5 -->
+		<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
+			<slot></slot>
+			<view v-if="noData" class="uni-table-loading">
+				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
+			</view>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+/**
+ * Table 表格
+ * @description 用于展示多条结构类似的数据
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Boolean} 	border 				是否带有纵向边框
+ * @property {Boolean} 	stripe 				是否显示斑马线
+ * @property {Boolean} 	type 					是否开启多选
+ * @property {String} 	emptyText 			空数据时显示的文本内容
+ * @property {Boolean} 	loading 			显示加载中
+ * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
+ */
+export default {
+	name: 'uniTable',
+	options: {
+		virtualHost: true
+	},
+	emits:['selection-change'],
+	props: {
+		data: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// 是否有竖线
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示斑马线
+		stripe: {
+			type: Boolean,
+			default: false
+		},
+		// 多选
+		type: {
+			type: String,
+			default: ''
+		},
+		// 没有更多数据
+		emptyText: {
+			type: String,
+			default: '没有更多数据'
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		rowKey: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			noData: true,
+			minWidth: 0,
+			multiTableHeads: []
+		}
+	},
+	watch: {
+		loading(val) {},
+		data(newVal) {
+			let theadChildren = this.theadChildren
+			let rowspan = 1
+			if (this.theadChildren) {
+				rowspan = this.theadChildren.rowspan
+			}
+			
+			// this.trChildren.length - rowspan
+			this.noData = false
+			// this.noData = newVal.length === 0 
+		}
+	},
+	created() {
+		// 定义tr的实例数组
+		this.trChildren = []
+		this.thChildren = []
+		this.theadChildren = null
+		this.backData = []
+		this.backIndexData = []
+	},
+
+	methods: {
+		isNodata() {
+			let theadChildren = this.theadChildren
+			let rowspan = 1
+			if (this.theadChildren) {
+				rowspan = this.theadChildren.rowspan
+			}
+			this.noData = this.trChildren.length - rowspan <= 0
+		},
+		/**
+		 * 选中所有
+		 */
+		selectionAll() {
+			let startIndex = 1
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			} else {
+				startIndex = theadChildren.rowspan - 1
+			}
+			let isHaveData = this.data && this.data.length > 0
+			theadChildren.checked = true
+			theadChildren.indeterminate = false
+			this.trChildren.forEach((item, index) => {
+				if (!item.disabled) {
+					item.checked = true
+					if (isHaveData && item.keyValue) {
+						const row = this.data.find(v => v[this.rowKey] === item.keyValue)
+						if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
+							this.backData.push(row)
+						}
+					}
+					if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
+						this.backIndexData.push(index - startIndex)
+					}
+				}
+			})
+			// this.backData = JSON.parse(JSON.stringify(this.data))
+			this.$emit('selection-change', {
+				detail: {
+					value: this.backData,
+					index: this.backIndexData
+				}
+			})
+		},
+		/**
+		 * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+		 */
+		toggleRowSelection(row, selected) {
+			// if (!this.theadChildren) return
+			row = [].concat(row)
+
+			this.trChildren.forEach((item, index) => {
+				// if (item.keyValue) {
+
+				const select = row.findIndex(v => {
+					//
+					if (typeof v === 'number') {
+						return v === index - 1
+					} else {
+						return v[this.rowKey] === item.keyValue
+					}
+				})
+				let ischeck = item.checked
+				if (select !== -1) {
+					if (typeof selected === 'boolean') {
+						item.checked = selected
+					} else {
+						item.checked = !item.checked
+					}
+					if (ischeck !== item.checked) {
+						this.check(item.rowData||item, item.checked, item.rowData?item.keyValue:null, true)
+					}
+				}
+				// }
+			})
+			this.$emit('selection-change', {
+				detail: {
+					value: this.backData,
+					index:this.backIndexData
+				}
+			})
+		},
+
+		/**
+		 * 用于多选表格，清空用户的选择
+		 */
+		clearSelection() {
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			}
+			// if (!this.theadChildren) return
+			theadChildren.checked = false
+			theadChildren.indeterminate = false
+			this.trChildren.forEach(item => {
+				// if (item.keyValue) {
+					item.checked = false
+				// }
+			})
+			this.backData = []
+			this.backIndexData = []
+			this.$emit('selection-change', {
+				detail: {
+					value: [],
+					index: []
+				}
+			})
+		},
+		/**
+		 * 用于多选表格，切换所有行的选中状态
+		 */
+		toggleAllSelection() {
+			let list = []
+			let startIndex = 1
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			} else {
+				startIndex = theadChildren.rowspan - 1
+			}
+			this.trChildren.forEach((item, index) => {
+				if (!item.disabled) {
+					if (index > (startIndex - 1) ) {
+						list.push(index-startIndex)
+					}
+				}
+			})
+			this.toggleRowSelection(list)
+		},
+
+		/**
+		 * 选中\取消选中
+		 * @param {Object} child
+		 * @param {Object} check
+		 * @param {Object} rowValue
+		 */
+		check(child, check, keyValue, emit) {
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			}
+			
+			
+			
+			let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
+			if(childDomIndex < 0){
+				childDomIndex = this.data.findIndex(v=>v[this.rowKey] === keyValue) + 1
+			}
+			const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
+			if (childDomIndex === 0) {
+				check ? this.selectionAll() : this.clearSelection()
+				return
+			}
+
+			if (check) {
+				if (keyValue) {
+					this.backData.push(child)
+				}
+				this.backIndexData.push(childDomIndex - 1)
+			} else {
+				const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
+				const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
+				if (keyValue) {
+					this.backData.splice(index, 1)
+				}
+				this.backIndexData.splice(idx, 1)
+			}
+
+			const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
+			if (!domCheckAll) {
+				theadChildren.indeterminate = false
+				theadChildren.checked = true
+			} else {
+				theadChildren.indeterminate = true
+				theadChildren.checked = false
+			}
+
+			if (this.backIndexData.length === 0) {
+				theadChildren.indeterminate = false
+			}
+
+			if (!emit) {
+				this.$emit('selection-change', {
+					detail: {
+						value: this.backData,
+						index: this.backIndexData
+					}
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-scroll {
+	width: 100%;
+	/* #ifndef APP-NVUE */
+	overflow-x: auto;
+	/* #endif */
+}
+
+.uni-table {
+	position: relative;
+	width: 100%;
+	border-radius: 5px;
+	// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
+	background-color: #fff;
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	display: table;
+	overflow-x: auto;
+	::v-deep .uni-table-tr:nth-child(n + 2) {
+		&:hover {
+			background-color: #f5f7fa;
+		}
+	}
+	::v-deep .uni-table-thead {
+		.uni-table-tr {
+			// background-color: #f5f7fa;
+			&:hover {
+				background-color:#fafafa;
+			}
+		}
+	}
+	/* #endif */
+}
+
+.table--border {
+	border: 1px $border-color solid;
+	border-right: none;
+}
+
+.border-none {
+	/* #ifndef APP-NVUE */
+	border-bottom: none;
+	/* #endif */
+}
+
+.table--stripe {
+	/* #ifndef APP-NVUE */
+	::v-deep .uni-table-tr:nth-child(2n + 3) {
+		background-color: #fafafa;
+	}
+	/* #endif */
+}
+
+/* 表格加载、无数据样式 */
+.uni-table-loading {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: table-row;
+	/* #endif */
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+.empty-border {
+	border-right: 1px $border-color solid;
+}
+.uni-table-text {
+	position: absolute;
+	right: 0;
+	left: 0;
+	text-align: center;
+	font-size: 14px;
+	color: #999;
+}
+
+.uni-table-mask {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(255, 255, 255, 0.8);
+	z-index: 99;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	margin: auto;
+	transition: all 0.5s;
+	/* #endif */
+	justify-content: center;
+	align-items: center;
+}
+
+.uni-table--loader {
+	width: 30px;
+	height: 30px;
+	border: 2px solid #aaa;
+	// border-bottom-color: transparent;
+	border-radius: 50%;
+	/* #ifndef APP-NVUE */
+	animation: 2s uni-table--loader linear infinite;
+	/* #endif */
+	position: relative;
+}
+
+@keyframes uni-table--loader {
+	0% {
+		transform: rotate(360deg);
+	}
+
+	10% {
+		border-left-color: transparent;
+	}
+
+	20% {
+		border-bottom-color: transparent;
+	}
+
+	30% {
+		border-right-color: transparent;
+	}
+
+	40% {
+		border-top-color: transparent;
+	}
+
+	50% {
+		transform: rotate(0deg);
+	}
+
+	60% {
+		border-top-color: transparent;
+	}
+
+	70% {
+		border-left-color: transparent;
+	}
+
+	80% {
+		border-bottom-color: transparent;
+	}
+
+	90% {
+		border-right-color: transparent;
+	}
+
+	100% {
+		transform: rotate(-360deg);
+	}
+}
+</style>
diff --git a/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue b/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
new file mode 100644
index 0000000..1d808b3
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
@@ -0,0 +1,29 @@
+<template>
+	<!-- #ifdef H5 -->
+	<tbody>
+		<slot></slot>
+	</tbody>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view><slot></slot></view>
+	<!-- #endif -->
+</template>
+
+<script>
+export default {
+	name: 'uniBody',
+	options: {
+		virtualHost: true
+	},
+	data() {
+		return {
+			
+		}
+	},
+	created() {},
+	methods: {}
+}
+</script>
+
+<style>
+</style>
diff --git a/uni_modules/uni-table/components/uni-td/uni-td.vue b/uni_modules/uni-table/components/uni-td/uni-td.vue
new file mode 100644
index 0000000..e0d743b
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-td/uni-td.vue
@@ -0,0 +1,90 @@
+<template>
+	<!-- #ifdef H5 -->
+	<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</td>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<!-- :class="{'table--border':border}"  -->
+	<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+	
+</template>
+
+<script>
+	/**
+	 * Td 单元格
+	 * @description 表格中的标准单元格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+	 * @property {Number} 	align = [left|center|right]	单元格对齐方式
+	 */
+	export default {
+		name: 'uniTd',
+		options: {
+			virtualHost: true
+		},
+		props: {
+			width: {
+				type: [String, Number],
+				default: ''
+			},
+			align: {
+				type: String,
+				default: 'left'
+			},
+			rowspan: {
+				type: [Number,String],
+				default: 1
+			},
+			colspan: {
+					type: [Number,String],
+				default: 1
+			}
+		},
+		data() {
+			return {
+				border: false
+			};
+		},
+		created() {
+			this.root = this.getTable()
+			this.border = this.root.border
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getTable() {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== 'uniTable') {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	$border-color:#EBEEF5;
+
+	.uni-table-td {
+		display: table-cell;
+		padding: 8px 10px;
+		font-size: 14px;
+		border-bottom: 1px $border-color solid;
+		font-weight: 400;
+		color: #606266;
+		line-height: 23px;
+		box-sizing: border-box;
+	}
+
+	.table--border {
+		border-right: 1px $border-color solid;
+	}
+</style>
diff --git a/uni_modules/uni-table/components/uni-th/filter-dropdown.vue b/uni_modules/uni-table/components/uni-th/filter-dropdown.vue
new file mode 100644
index 0000000..add1098
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-th/filter-dropdown.vue
@@ -0,0 +1,511 @@
+<template>
+	<view class="uni-filter-dropdown">
+		<view class="dropdown-btn" @click="onDropdown">
+			<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
+			<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
+				<view class="icon-search-0"></view>
+				<view class="icon-search-1"></view>
+			</view>
+			<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
+				<view class="icon-calendar-0"></view>
+				<view class="icon-calendar-1"></view>
+			</view>
+		</view>
+		<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
+		<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
+			<!-- select-->
+			<view v-if="isSelect" class="list">
+				<label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
+					@click="onItemClick($event, index)">
+					<check-box class="check" :checked="item.checked" />
+					<view class="checklist-content">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+					</view>
+				</label>
+			</view>
+			<view v-if="isSelect" class="flex-r opera-area">
+				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
+					{{resource.reset}}</view>
+				<view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
+			</view>
+			<!-- search -->
+			<view v-if="isSearch" class="search-area">
+				<input class="search-input" v-model="filterValue" />
+			</view>
+			<view v-if="isSearch" class="flex-r opera-area">
+				<view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
+				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
+					{{resource.reset}}</view>
+			</view>
+			<!-- range -->
+			<view v-if="isRange">
+				<view class="input-label">{{resource.gt}}</view>
+				<input class="input" v-model="gtValue" />
+				<view class="input-label">{{resource.lt}}</view>
+				<input class="input" v-model="ltValue" />
+			</view>
+			<view v-if="isRange" class="flex-r opera-area">
+				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
+					{{resource.reset}}</view>
+				<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
+			</view>
+			<!-- date -->
+			<view v-if="isDate">
+				<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
+					<view></view>
+				</uni-datetime-picker>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import checkBox from '../uni-tr/table-checkbox.vue'
+
+	const resource = {
+		"reset": "重置",
+		"search": "搜索",
+		"submit": "确定",
+		"filter": "筛选",
+		"gt": "大于等于",
+		"lt": "小于等于",
+		"date": "日期范围"
+	}
+
+	const DropdownType = {
+		Select: "select",
+		Search: "search",
+		Range: "range",
+		Date: "date",
+		Timestamp: "timestamp"
+	}
+
+	export default {
+		name: 'FilterDropdown',
+		emits:['change'],
+		components: {
+			checkBox
+		},
+		options: {
+			virtualHost: true
+		},
+		props: {
+			filterType: {
+				type: String,
+				default: DropdownType.Select
+			},
+			filterData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			map: {
+				type: Object,
+				default () {
+					return {
+						text: 'text',
+						value: 'value'
+					}
+				}
+			},
+			filterDefaultValue: {
+				type: [Array,String],
+				default () {
+					return ""
+				}
+			}
+		},
+		computed: {
+			canReset() {
+				if (this.isSearch) {
+					return this.filterValue.length > 0
+				}
+				if (this.isSelect) {
+					return this.checkedValues.length > 0
+				}
+				if (this.isRange) {
+					return (this.gtValue.length > 0 && this.ltValue.length > 0)
+				}
+				if (this.isDate) {
+					return this.dateSelect.length > 0
+				}
+				return false
+			},
+			isSelect() {
+				return this.filterType === DropdownType.Select
+			},
+			isSearch() {
+				return this.filterType === DropdownType.Search
+			},
+			isRange() {
+				return this.filterType === DropdownType.Range
+			},
+			isDate() {
+				return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
+			}
+		},
+		watch: {
+			filterData(newVal) {
+				this._copyFilters()
+			},
+			indeterminate(newVal) {
+				this.isIndeterminate = newVal
+			}
+		},
+		data() {
+			return {
+				resource,
+				enabled: true,
+				isOpened: false,
+				dataList: [],
+				filterValue: this.filterDefaultValue,
+				checkedValues: [],
+				gtValue: '',
+				ltValue: '',
+				dateRange: [],
+				dateSelect: []
+			};
+		},
+		created() {
+			this._copyFilters()
+		},
+		methods: {
+			_copyFilters() {
+				let dl = JSON.parse(JSON.stringify(this.filterData))
+				for (let i = 0; i < dl.length; i++) {
+					if (dl[i].checked === undefined) {
+						dl[i].checked = false
+					}
+				}
+				this.dataList = dl
+			},
+			openPopup() {
+				this.isOpened = true
+				if (this.isDate) {
+					this.$nextTick(() => {
+						if (!this.dateRange.length) {
+							this.resetDate()
+						}
+						this.$refs.datetimepicker.show()
+					})
+				}
+			},
+			closePopup() {
+				this.isOpened = false
+			},
+			handleClose(e) {
+				this.closePopup()
+			},
+			resetDate() {
+				let date = new Date()
+				let dateText = date.toISOString().split('T')[0]
+				this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
+			},
+			onDropdown(e) {
+				this.openPopup()
+			},
+			onItemClick(e, index) {
+				let items = this.dataList
+				let listItem = items[index]
+				if (listItem.checked === undefined) {
+					items[index].checked = true
+				} else {
+					items[index].checked = !listItem.checked
+				}
+
+				let checkvalues = []
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i]
+					if (item.checked) {
+						checkvalues.push(item.value)
+					}
+				}
+				this.checkedValues = checkvalues
+			},
+			datetimechange(e) {
+				this.closePopup()
+				this.dateRange = e
+				this.dateSelect = e
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: e
+				})
+			},
+			timepickerclose(e) {
+				this.closePopup()
+			},
+			handleSelectSubmit() {
+				this.closePopup()
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: this.checkedValues
+				})
+			},
+			handleSelectReset() {
+				if (!this.canReset) {
+					return;
+				}
+				var items = this.dataList
+				for (let i = 0; i < items.length; i++) {
+					let item = items[i]
+					this.$set(item, 'checked', false)
+				}
+				this.checkedValues = []
+				this.handleSelectSubmit()
+			},
+			handleSearchSubmit() {
+				this.closePopup()
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: this.filterValue
+				})
+			},
+			handleSearchReset() {
+				if (!this.canReset) {
+					return;
+				}
+				this.filterValue = ''
+				this.handleSearchSubmit()
+			},
+			handleRangeSubmit(isReset) {
+				this.closePopup()
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
+				})
+			},
+			handleRangeReset() {
+				if (!this.canReset) {
+					return;
+				}
+				this.gtValue = ''
+				this.ltValue = ''
+				this.handleRangeSubmit(true)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #1890ff !default;
+	
+	.flex-r {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.flex-f {
+		flex: 1;
+	}
+
+	.a-i-c {
+		align-items: center;
+	}
+
+	.j-c-c {
+		justify-content: center;
+	}
+
+	.icon-select {
+		width: 14px;
+		height: 16px;
+		border: solid 6px transparent;
+		border-top: solid 6px #ddd;
+		border-bottom: none;
+		background-color: #ddd;
+		background-clip: content-box;
+		box-sizing: border-box;
+	}
+
+	.icon-select.active {
+		background-color: $uni-primary;
+		border-top-color: $uni-primary;
+	}
+
+	.icon-search {
+		width: 12px;
+		height: 16px;
+		position: relative;
+	}
+
+	.icon-search-0 {
+		border: 2px solid #ddd;
+		border-radius: 8px;
+		width: 7px;
+		height: 7px;
+	}
+
+	.icon-search-1 {
+		position: absolute;
+		top: 8px;
+		right: 0;
+		width: 1px;
+		height: 7px;
+		background-color: #ddd;
+		transform: rotate(-45deg);
+	}
+
+	.icon-search.active .icon-search-0 {
+		border-color: $uni-primary;
+	}
+
+	.icon-search.active .icon-search-1 {
+		background-color: $uni-primary;
+	}
+
+	.icon-calendar {
+		color: #ddd;
+		width: 14px;
+		height: 16px;
+	}
+
+	.icon-calendar-0 {
+		height: 4px;
+		margin-top: 3px;
+		margin-bottom: 1px;
+		background-color: #ddd;
+		border-radius: 2px 2px 1px 1px;
+		position: relative;
+	}
+	.icon-calendar-0:before, .icon-calendar-0:after {
+		content: '';
+		position: absolute;
+		top: -3px;
+		width: 4px;
+		height: 3px;
+		border-radius: 1px;
+		background-color: #ddd;
+	}
+	.icon-calendar-0:before {
+		left: 2px;
+	}
+	.icon-calendar-0:after {
+		right: 2px;
+	}
+
+	.icon-calendar-1 {
+		height: 9px;
+		background-color: #ddd;
+		border-radius: 1px 1px 2px 2px;
+	}
+
+	.icon-calendar.active {
+		color: $uni-primary;
+	}
+
+	.icon-calendar.active .icon-calendar-0,
+	.icon-calendar.active .icon-calendar-1,
+	.icon-calendar.active .icon-calendar-0:before,
+	.icon-calendar.active .icon-calendar-0:after {
+		background-color: $uni-primary;
+	}
+
+	.uni-filter-dropdown {
+		position: relative;
+		font-weight: normal;
+	}
+
+	.dropdown-popup {
+		position: absolute;
+		top: 100%;
+		background-color: #fff;
+		box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+		min-width: 150px;
+		z-index: 1000;
+	}
+
+	.dropdown-popup-left {
+		left: 0;
+	}
+
+	.dropdown-popup-right {
+		right: 0;
+	}
+
+	.uni-dropdown-cover {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: transparent;
+		z-index: 100;
+	}
+
+	.list {
+		margin-top: 5px;
+		margin-bottom: 5px;
+	}
+
+	.list-item {
+		padding: 5px 10px;
+		text-align: left;
+	}
+
+	.list-item:hover {
+		background-color: #f0f0f0;
+	}
+
+	.check {
+		margin-right: 5px;
+	}
+
+	.search-area {
+		padding: 10px;
+	}
+
+	.search-input {
+		font-size: 12px;
+		border: 1px solid #f0f0f0;
+		border-radius: 3px;
+		padding: 2px 5px;
+		min-width: 150px;
+		text-align: left;
+	}
+
+	.input-label {
+		margin: 10px 10px 5px 10px;
+		text-align: left;
+	}
+
+	.input {
+		font-size: 12px;
+		border: 1px solid #f0f0f0;
+		border-radius: 3px;
+		margin: 10px;
+		padding: 2px 5px;
+		min-width: 150px;
+		text-align: left;
+	}
+
+	.opera-area {
+		cursor: default;
+		border-top: 1px solid #ddd;
+		padding: 5px;
+	}
+
+	.opera-area .btn {
+		font-size: 12px;
+		border-radius: 3px;
+		margin: 5px;
+		padding: 4px 4px;
+	}
+
+	.btn-default {
+		border: 1px solid #ddd;
+	}
+
+	.btn-default.disable {
+		border-color: transparent;
+	}
+
+	.btn-submit {
+		background-color: $uni-primary;
+		color: #ffffff;
+	}
+</style>
diff --git a/uni_modules/uni-table/components/uni-th/uni-th.vue b/uni_modules/uni-table/components/uni-th/uni-th.vue
new file mode 100644
index 0000000..75fa42a
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-th/uni-th.vue
@@ -0,0 +1,285 @@
+<template>
+	<!-- #ifdef H5 -->
+	<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
+		<view class="uni-table-th-row">
+			<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
+				<slot></slot>
+				<view v-if="sortable" class="arrow-box">
+					<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
+					<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
+				</view>
+			</view>
+			<dropdown v-if="filterType || filterData.length" :filterDefaultValue="filterDefaultValue" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
+		</view>
+	</th>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
+	<!-- #endif -->
+</template>
+
+<script>
+	// #ifdef H5
+	import dropdown from './filter-dropdown.vue'
+	// #endif
+/**
+ * Th 表头
+ * @description 表格内的表头单元格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Number | String} 	width 	单元格宽度（支持纯数字、携带单位px或rpx）
+ * @property {Boolean} 	sortable 					是否启用排序
+ * @property {Number} 	align = [left|center|right]	单元格对齐方式
+ * @value left   	单元格文字左侧对齐
+ * @value center	单元格文字居中
+ * @value right		单元格文字右侧对齐
+ * @property {Array}	filterData 筛选数据
+ * @property {String}	filterType	[search|select] 筛选类型
+ * @value search	关键字搜素
+ * @value select	条件选择
+ * @event {Function} sort-change 排序触发事件
+ */
+export default {
+	name: 'uniTh',
+	options: {
+		virtualHost: true
+	},
+	components: {
+		// #ifdef H5
+		dropdown
+		// #endif
+	},
+	emits:['sort-change','filter-change'],
+	props: {
+		width: {
+			type: [String, Number],
+			default: ''
+		},
+		align: {
+			type: String,
+			default: 'left'
+		},
+		rowspan: {
+			type: [Number, String],
+			default: 1
+		},
+		colspan: {
+			type: [Number, String],
+			default: 1
+		},
+		sortable: {
+			type: Boolean,
+			default: false
+		},
+		filterType: {
+			type: String,
+			default: ""
+		},
+		filterData: {
+			type: Array,
+			default () {
+				return []
+			}
+		},
+		filterDefaultValue: {
+			type: [Array,String],
+			default () {
+				return ""
+			}
+		}
+	},
+	data() {
+		return {
+			border: false,
+			ascending: false,
+			descending: false
+		}
+	},
+	computed: {
+		// 根据props中的width属性 自动匹配当前th的宽度(px)
+		customWidth(){
+			if(typeof this.width === 'number'){
+				return this.width
+			} else if(typeof this.width === 'string') {
+				let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
+				let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
+				let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
+				if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
+					return this.width.replace('px', '')
+				} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
+					let numberRpx = Number(this.width.replace('rpx', ''))
+					let widthCoe = uni.getSystemInfoSync().screenWidth / 750
+					return Math.round(numberRpx * widthCoe)
+				} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
+					return this.width
+				} else { // 不符合格式
+					return ''
+				}
+			} else {
+				return ''
+			}
+		},
+		contentAlign() {
+			let align = 'left'
+			switch (this.align) {
+				case 'left':
+					align = 'flex-start'
+					break
+				case 'center':
+					align = 'center'
+					break
+				case 'right':
+					align = 'flex-end'
+					break
+			}
+			return align
+		}
+	},
+	created() {
+		this.root = this.getTable('uniTable')
+		this.rootTr = this.getTable('uniTr')
+		this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
+		this.border = this.root.border
+		this.root.thChildren.push(this)
+	},
+	methods: {
+		sort() {
+			if (!this.sortable) return
+			this.clearOther()
+			if (!this.ascending && !this.descending) {
+				this.ascending = true
+				this.$emit('sort-change', { order: 'ascending' })
+				return
+			}
+			if (this.ascending && !this.descending) {
+				this.ascending = false
+				this.descending = true
+				this.$emit('sort-change', { order: 'descending' })
+				return
+			}
+
+			if (!this.ascending && this.descending) {
+				this.ascending = false
+				this.descending = false
+				this.$emit('sort-change', { order: null })
+			}
+		},
+		ascendingFn() {
+			this.clearOther()
+			this.ascending = !this.ascending
+			this.descending = false
+			this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
+		},
+		descendingFn() {
+			this.clearOther()
+			this.descending = !this.descending
+			this.ascending = false
+			this.$emit('sort-change', { order: this.descending ? 'descending' : null })
+		},
+		clearOther() {
+			this.root.thChildren.map(item => {
+				if (item !== this) {
+					item.ascending = false
+					item.descending = false
+				}
+				return item
+			})
+		},
+		ondropdown(e) {
+			this.$emit("filter-change", e)
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getTable(name) {
+			let parent = this.$parent
+			let parentName = parent.$options.name
+			while (parentName !== name) {
+				parent = parent.$parent
+				if (!parent) return false
+				parentName = parent.$options.name
+			}
+			return parent
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+$uni-primary: #007aff !default;
+
+.uni-table-th {
+	padding: 12px 10px;
+	/* #ifndef APP-NVUE */
+	display: table-cell;
+	box-sizing: border-box;
+	/* #endif */
+	font-size: 14px;
+	font-weight: bold;
+	color: #909399;
+	border-bottom: 1px $border-color solid;
+}
+
+.uni-table-th-row {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+}
+
+.table--border {
+	border-right: 1px $border-color solid;
+}
+.uni-table-th-content {
+	display: flex;
+	align-items: center;
+	flex: 1;
+}
+.arrow-box {
+}
+.arrow {
+	display: block;
+	position: relative;
+	width: 10px;
+	height: 8px;
+	// border: 1px red solid;
+	left: 5px;
+	overflow: hidden;
+	cursor: pointer;
+}
+.down {
+	top: 3px;
+	::after {
+		content: '';
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		left: 2px;
+		top: -5px;
+		transform: rotate(45deg);
+		background-color: #ccc;
+	}
+	&.active {
+		::after {
+			background-color: $uni-primary;
+		}
+	}
+}
+.up {
+	::after {
+		content: '';
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		left: 2px;
+		top: 5px;
+		transform: rotate(45deg);
+		background-color: #ccc;
+	}
+	&.active {
+		::after {
+			background-color: $uni-primary;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/uni-table/components/uni-thead/uni-thead.vue b/uni_modules/uni-table/components/uni-thead/uni-thead.vue
new file mode 100644
index 0000000..a12078a
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-thead/uni-thead.vue
@@ -0,0 +1,129 @@
+<template>
+	<!-- #ifdef H5 -->
+	<thead class="uni-table-thead">
+		<tr class="uni-table-tr">
+			<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
+				<table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
+			</th>
+		</tr>
+		<slot></slot>
+	</thead>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-thead"><slot></slot></view>
+	<!-- #endif -->
+</template>
+
+<script>
+import tableCheckbox from '../uni-tr/table-checkbox.vue'
+export default {
+	name: 'uniThead',
+	components: {
+		tableCheckbox
+	},
+	options: {
+		virtualHost: true
+	},
+	data() {
+		return {
+			border: false,
+			selection: false,
+			rowspan: 1,
+			indeterminate: false,
+			checked: false
+		}
+	},
+	created() {
+		this.root = this.getTable()
+		// #ifdef H5
+		this.root.theadChildren = this
+		// #endif
+		this.border = this.root.border
+		this.selection = this.root.type
+	},
+	methods: {
+		init(self) {
+			this.rowspan++
+		},
+		checkboxSelected(e) {
+			this.indeterminate = false
+			const backIndexData = this.root.backIndexData
+			const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
+			if (backIndexData.length === data.length) {
+				this.checked = false
+				this.root.clearSelection()
+			} else {
+				this.checked = true
+				this.root.selectionAll()
+			}
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getTable(name = 'uniTable') {
+			let parent = this.$parent
+			let parentName = parent.$options.name
+			while (parentName !== name) {
+				parent = parent.$parent
+				if (!parent) return false
+				parentName = parent.$options.name
+			}
+			return parent
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-thead {
+	display: table-header-group;
+}
+
+.uni-table-tr {
+	/* #ifndef APP-NVUE */
+	display: table-row;
+	transition: all 0.3s;
+	box-sizing: border-box;
+	/* #endif */
+	border: 1px red solid;
+	background-color: #fafafa;
+}
+
+.checkbox {
+	padding: 0 8px;
+	width: 26px;
+	padding-left: 12px;
+	/* #ifndef APP-NVUE */
+	display: table-cell;
+	vertical-align: middle;
+	/* #endif */
+	color: #333;
+	font-weight: 500;
+	border-bottom: 1px $border-color solid;
+	font-size: 14px;
+	// text-align: center;
+}
+
+.tr-table--border {
+	border-right: 1px $border-color solid;
+}
+
+/* #ifndef APP-NVUE */
+.uni-table-tr {
+	::v-deep .uni-table-th {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+
+	::v-deep .uni-table-td {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+}
+
+/* #endif */
+</style>
diff --git a/uni_modules/uni-table/components/uni-tr/table-checkbox.vue b/uni_modules/uni-table/components/uni-tr/table-checkbox.vue
new file mode 100644
index 0000000..f22936b
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-tr/table-checkbox.vue
@@ -0,0 +1,179 @@
+<template>
+	<view class="uni-table-checkbox" @click="selected">
+		<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
+			<view class="checkbox__inner-icon"></view>
+		</view>
+		<view v-else class="checkbox__inner checkbox--indeterminate">
+			<view class="checkbox__inner-icon"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'TableCheckbox',
+		emits:['checkboxSelected'],
+		props: {
+			indeterminate: {
+				type: Boolean,
+				default: false
+			},
+			checked: {
+				type: [Boolean,String],
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: Number,
+				default: -1
+			},
+			cellData: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		watch:{
+			checked(newVal){
+				if(typeof this.checked === 'boolean'){
+					this.isChecked = newVal
+				}else{
+					this.isChecked = true
+				}
+			},
+			indeterminate(newVal){
+				this.isIndeterminate = newVal
+			}
+		},
+		data() {
+			return {
+				isChecked: false,
+				isDisabled: false,
+				isIndeterminate:false
+			}
+		},
+		created() {
+			if(typeof this.checked === 'boolean'){
+				this.isChecked = this.checked
+			}
+			this.isDisabled = this.disabled
+		},
+		methods: {
+			selected() {
+				if (this.isDisabled) return
+				this.isIndeterminate = false
+				this.isChecked = !this.isChecked
+				this.$emit('checkboxSelected', {
+					checked: this.isChecked,
+					data: this.cellData
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+	$border-color: #DCDFE6;
+	$disable:0.4;
+
+	.uni-table-checkbox {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		margin: 5px 0;
+		cursor: pointer;
+
+		// 多选样式
+		.checkbox__inner {
+			/* #ifndef APP-NVUE */
+			flex-shrink: 0;
+			box-sizing: border-box;
+			/* #endif */
+			position: relative;
+			width: 16px;
+			height: 16px;
+			border: 1px solid $border-color;
+			border-radius: 2px;
+			background-color: #fff;
+			z-index: 1;
+
+			.checkbox__inner-icon {
+				position: absolute;
+				/* #ifdef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				/* #ifndef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				left: 5px;
+				height: 7px;
+				width: 3px;
+				border: 1px solid #fff;
+				border-left: 0;
+				border-top: 0;
+				opacity: 0;
+				transform-origin: center;
+				transform: rotate(45deg);
+				box-sizing: content-box;
+			}
+
+			&.checkbox--indeterminate {
+				border-color: $uni-primary;
+				background-color: $uni-primary;
+
+				.checkbox__inner-icon {
+					position: absolute;
+					opacity: 1;
+					transform: rotate(0deg);
+					height: 2px;
+					top: 0;
+					bottom: 0;
+					margin: auto;
+					left: 0px;
+					right: 0px;
+					bottom: 0;
+					width: auto;
+					border: none;
+					border-radius: 2px;
+					transform: scale(0.5);
+					background-color: #fff;
+				}
+			}
+			&:hover{
+				border-color: $uni-primary;
+			}
+			// 禁用
+			&.is-disable {
+				/* #ifdef H5 */
+				cursor: not-allowed;
+				/* #endif */
+				background-color: #F2F6FC;
+				border-color: $border-color;
+			}
+
+			// 选中
+			&.is-checked {
+				border-color: $uni-primary;
+				background-color: $uni-primary;
+
+				.checkbox__inner-icon {
+					opacity: 1;
+					transform: rotate(45deg);
+				}
+
+				// 选中禁用
+				&.is-disable {
+					opacity: $disable;
+				}
+			}
+			
+		}
+	}
+</style>
diff --git a/uni_modules/uni-table/components/uni-tr/uni-tr.vue b/uni_modules/uni-table/components/uni-tr/uni-tr.vue
new file mode 100644
index 0000000..d5cdee6
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-tr/uni-tr.vue
@@ -0,0 +1,171 @@
+<template>
+	<!-- #ifdef H5 -->
+	<tr class="uni-table-tr">
+		<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
+			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
+		</th>
+		<slot></slot>
+		<!-- <uni-th class="th-fixed">123</uni-th> -->
+	</tr>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-tr">
+		<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
+			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
+		</view>
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import tableCheckbox from './table-checkbox.vue'
+/**
+ * Tr 表格行组件
+ * @description 表格行组件 仅包含 th,td 组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=
+ */
+export default {
+	name: 'uniTr',
+	components: { tableCheckbox },
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		keyValue: {
+			type: [String, Number],
+			default: ''
+		}
+	},
+	options: {
+		virtualHost: true
+	},
+	data() {
+		return {
+			value: false,
+			border: false,
+			selection: false,
+			widthThArr: [],
+			ishead: true,
+			checked: false,
+			indeterminate:false
+		}
+	},
+	created() {
+		this.root = this.getTable()
+		this.head = this.getTable('uniThead')
+		if (this.head) {
+			this.ishead = false
+			this.head.init(this)
+		}
+		this.border = this.root.border
+		this.selection = this.root.type
+		this.root.trChildren.push(this)
+		const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
+		if(rowData){
+			this.rowData = rowData
+		}
+		this.root.isNodata()
+	},
+	mounted() {
+		if (this.widthThArr.length > 0) {
+			const selectionWidth = this.selection === 'selection' ? 50 : 0
+			this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
+		}
+	},
+	// #ifndef VUE3
+	destroyed() {
+		const index = this.root.trChildren.findIndex(i => i === this)
+		this.root.trChildren.splice(index, 1)
+		this.root.isNodata()
+	},
+	// #endif
+	// #ifdef VUE3
+	unmounted() {
+		const index = this.root.trChildren.findIndex(i => i === this)
+		this.root.trChildren.splice(index, 1)
+		this.root.isNodata()
+	},
+	// #endif
+	methods: {
+		minWidthUpdate(width) {
+			this.widthThArr.push(width)
+		},
+		// 选中
+		checkboxSelected(e) {
+			let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
+			this.checked = e.checked
+			this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
+		},
+		change(e) {
+			this.root.trChildren.forEach(item => {
+				if (item === this) {
+					this.root.check(this, e.detail.value.length > 0 ? true : false)
+				}
+			})
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getTable(name = 'uniTable') {
+			let parent = this.$parent
+			let parentName = parent.$options.name
+			while (parentName !== name) {
+				parent = parent.$parent
+				if (!parent) return false
+				parentName = parent.$options.name
+			}
+			return parent
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-tr {
+	/* #ifndef APP-NVUE */
+	display: table-row;
+	transition: all 0.3s;
+	box-sizing: border-box;
+	/* #endif */
+}
+
+.checkbox {
+	padding: 0 8px;
+	width: 26px;
+	padding-left: 12px;
+	/* #ifndef APP-NVUE */
+	display: table-cell;
+	vertical-align: middle;
+	/* #endif */
+	color: #333;
+	font-weight: 500;
+	border-bottom: 1px $border-color solid;
+	font-size: 14px;
+	// text-align: center;
+}
+
+.tr-table--border {
+	border-right: 1px $border-color solid;
+}
+
+/* #ifndef APP-NVUE */
+.uni-table-tr {
+	::v-deep .uni-table-th {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+
+	::v-deep .uni-table-td {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+}
+
+/* #endif */
+</style>
diff --git a/uni_modules/uni-table/i18n/en.json b/uni_modules/uni-table/i18n/en.json
new file mode 100644
index 0000000..cc9c4a3
--- /dev/null
+++ b/uni_modules/uni-table/i18n/en.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "Reset",
+	"filter-dropdown.search": "Search",
+	"filter-dropdown.submit": "Submit",
+	"filter-dropdown.filter": "Filter",
+	"filter-dropdown.gt": "Greater or equal to",
+	"filter-dropdown.lt": "Less than or equal to",
+	"filter-dropdown.date": "Date"
+}
diff --git a/uni_modules/uni-table/i18n/es.json b/uni_modules/uni-table/i18n/es.json
new file mode 100644
index 0000000..9c4705c
--- /dev/null
+++ b/uni_modules/uni-table/i18n/es.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "Reiniciar",
+	"filter-dropdown.search": "Búsqueda",
+	"filter-dropdown.submit": "Entregar",
+	"filter-dropdown.filter": "Filtrar",
+	"filter-dropdown.gt": "Mayor o igual a",
+	"filter-dropdown.lt": "Menos que o igual a",
+	"filter-dropdown.date": "Fecha"
+}
diff --git a/uni_modules/uni-table/i18n/fr.json b/uni_modules/uni-table/i18n/fr.json
new file mode 100644
index 0000000..389a9ae
--- /dev/null
+++ b/uni_modules/uni-table/i18n/fr.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "Réinitialiser",
+	"filter-dropdown.search": "Chercher",
+	"filter-dropdown.submit": "Soumettre",
+	"filter-dropdown.filter": "Filtre",
+	"filter-dropdown.gt": "Supérieur ou égal à",
+	"filter-dropdown.lt": "Inférieur ou égal à",
+	"filter-dropdown.date": "Date"
+}
diff --git a/uni_modules/uni-table/i18n/index.js b/uni_modules/uni-table/i18n/index.js
new file mode 100644
index 0000000..2293b0d
--- /dev/null
+++ b/uni_modules/uni-table/i18n/index.js
@@ -0,0 +1,12 @@
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	es,
+	fr,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-table/i18n/zh-Hans.json b/uni_modules/uni-table/i18n/zh-Hans.json
new file mode 100644
index 0000000..0b1afab
--- /dev/null
+++ b/uni_modules/uni-table/i18n/zh-Hans.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "重置",
+	"filter-dropdown.search": "搜索",
+	"filter-dropdown.submit": "确定",
+	"filter-dropdown.filter": "筛选",
+	"filter-dropdown.gt": "大于等于",
+	"filter-dropdown.lt": "小于等于",
+	"filter-dropdown.date": "日期范围"
+}
diff --git a/uni_modules/uni-table/i18n/zh-Hant.json b/uni_modules/uni-table/i18n/zh-Hant.json
new file mode 100644
index 0000000..d633f2d
--- /dev/null
+++ b/uni_modules/uni-table/i18n/zh-Hant.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "重置",
+	"filter-dropdown.search": "搜索",
+	"filter-dropdown.submit": "確定",
+	"filter-dropdown.filter": "篩選",
+	"filter-dropdown.gt": "大於等於",
+	"filter-dropdown.lt": "小於等於",
+	"filter-dropdown.date": "日期範圍"
+}
diff --git a/uni_modules/uni-table/package.json b/uni_modules/uni-table/package.json
new file mode 100644
index 0000000..16cbb53
--- /dev/null
+++ b/uni_modules/uni-table/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-table",
+  "displayName": "uni-table 表格",
+  "version": "1.2.3",
+  "description": "表格组件，多用于展示多条结构类似的数据，如",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "table",
+    "表格"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-datetime-picker"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "n",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-table/readme.md b/uni_modules/uni-table/readme.md
new file mode 100644
index 0000000..a0f93cf
--- /dev/null
+++ b/uni_modules/uni-table/readme.md
@@ -0,0 +1,13 @@
+
+
+## Table 表单
+> 组件名：``uni-table``，代码块： `uTable`。
+
+用于展示多条结构类似的数据
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+