修改时间控件和时间控件举例。

examples/App.vue

@@ -40,6 +40,10 @@
                     <li>
                         <router-link :to="{ path: '/desktop/switches-example'}">开关控件</router-link>
                     </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/time-example'}">时间控件</router-link>
+                    </li>
+
 
                     <li>
                         <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>

examples/route/index.js

@@ -10,6 +10,7 @@ const PageSizeSelectExample = () => import(/* webpackChunkName: "page-size-selec
 const PrintExample = () => import(/* webpackChunkName: "print-example" */ '../print/src/PrintExample.vue')
 const ScannerExample = () => import(/* webpackChunkName: "scanner-example" */ '../scanner/src/ScannerExample.vue')
 const SwitchesExample = () => import(/* webpackChunkName: "switches-example" */ '../switches/src/SwitchesExample.vue')
+const TimeExample = () => import(/* webpackChunkName: "time-example" */ '../time/src/TimeExample.vue')
 
 
 
@@ -64,6 +65,9 @@ export default {
 				/** 开关控件 */
 				{ path: 'switches-example', component: SwitchesExample },
 
+				/** 时间控件 */
+				{ path: 'time-example', component: TimeExample },
+
 				
 
 				/** 流程报表 */

examples/time/src/TimeExample.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <h1>时间控件</h1>
+
+        <h2>基本表单</h2>
+        <div>
+            <div class="form-group">
+                <label for="datetime">时间</label>
+                <Time v-model="dateValue1"
+                      class="form-control"></Time>
+            </div>
+        </div>
+
+        {{ dateValue1 }}
+
+        <h2>内联表单</h2>
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">时间</label>
+                <Time v-model="dateValue2"
+                      class="form-control"
+                      style="width: 200px;"></Time>
+            </div>
+        </div>
+
+        {{ dateValue2 }}
+
+        <h2>只读</h2>
+
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">时间</label>
+                <Time v-model="dateValue3"
+                      :readonly="true"
+                      class="form-control"
+                      style="width: 200px;"></Time>
+            </div>
+        </div>
+
+        {{ dateValue3 }}
+
+    </div>
+</template>
+
+<script>
+
+
+import Time from "@/time/index.js";
+
+export default {
+    name: 'date-example',
+
+    data: function () {
+        return {
+            dateValue1: '12:00:01',
+            dateValue2: '14:02:00',
+            dateValue3: '14:02:00',
+        }
+    },
+
+    components: {
+        Time,
+    },
+
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+</style>

packages/time/src/Time.vue

@@ -1,64 +1,61 @@
 <template>
-	<date-picker :readonly="readonly" :date="starttime" :option="option" style="padding: 0px; border: none;"></date-picker>
+	<input type="time" :readonly="readonly" v-model="innerValue">
 </template>
 
 <script>
-var VueDatepicker = require("../../vue-datepicker/src/vue-datepicker.vue").default;
-var VueDatepickerOption2 = require("./vue-datepicker-setting.js");
 
 module.exports = {
     name: 'time',
 	props:[
-		"dateValue", "readonly"
+		"modelValue",
+		"readonly",
 	],
 
 	data: function(){
-		var vueDatepickerOption = VueDatepickerOption2();
-		
-		vueDatepickerOption.option.type = 'min';
-		vueDatepickerOption.option.format = 'YYYY-MM-DD';
-
-		vueDatepickerOption.timeoption.type = 'min';
-		vueDatepickerOption.timeoption.format = 'HH:mm';
-
-		vueDatepickerOption.multiOption.type = 'multi-day';
-		vueDatepickerOption.multiOption.format = 'HH:mm';
-
 		return{
-			starttime: {
-		        time: this.dateValue
-		    },
-		    endtime: {
-        		time: ''
-      		},		
-  			testTime: '',
-  			multiTime: '',
-  			option: vueDatepickerOption.option,
-			timeoption: vueDatepickerOption.timeoption,
-			multiOption: vueDatepickerOption.multiOption,
-			limit: vueDatepickerOption.limit,
+			innerValue : ''
 		}
 	},
 
+	methods: {
+		getTimeValue: function(value){
+			if(value != null && value.length == 8){
+				return value.substring(0, 5);
+			}else{
+				return value;
+			}
+		}
+	},
+
+
 	components: {
-	    'date-picker': VueDatepicker
+	    
 	},
 
 	watch:{
-		// 'value': function(val){
-		// 	// 监听外部对props属性value的变更，并同步到组件内
-		// 	starttime.time = val;
-		// },
+		modelValue: {
+			handler(newValue, oldValue){
+				if(newValue != null && newValue != ''){
+					this.innerValue = this.getTimeValue(newValue);
+				}else{
+					this.innerValue = newValue;
+				}
+			},
+			immediate: true,
+		},
 
-		'starttime.time': function(val){
-			// 组件内对starttime.time变更后向外部发送事件通知
-			this.$emit("on-value-change", val);
-			this.$emit("input", val);
-			console.log('name has been changed:', val );
+		innerValue: function(newValue, oldValue){
+			// 向外部发送事件通知
+			let newValue1 = '';
+			if(newValue == null || newValue == ''){
+				newValue1 = newValue;
+			}else{
+				newValue1 = newValue + ':00';
+			}
+			console.log('time has been changed:', newValue1);
+			this.$emit("update:modelValue", newValue1);
+			this.$emit("on-value-change", newValue1);
 		},
-		dateValue: function(val){
-			this.starttime.time = val;
-		}
 	}
 }
 </script>