24hour mode completed

Author: DomonJi

README.md

@@ -12,7 +12,7 @@
 
 > 24 Hours Mode, with Material Design. Try the [Live Demo](https://domonji.github.io/vue-clock-picker)
 
-![24HoursMode](./intro_src/24M.png) ![vue-clock-picker](./intro_src/1.gif)
+![24HoursMode](./intro_src/24M.png) ![vue-clock-picker](./intro_src/24M.gif)
 
 ## HAVE A TRY
 

intro_src/1.gif

@@ -1,16 +1,10 @@
 <template lang="pug">
 
 
-
-
-
 div(':style'="inlineStyle" '@click'="handleTimeChange(index,angle)" class="picker-point" ':class'="[pointClass,{current:picked}]")
 	div(class="pointer-wrapper" ':style'="wrapperStyle") {{index}}
 
 
-
-
-
 </template>
 
 <script>
@@ -69,11 +63,11 @@ export default {
   text-align: center;
   line-height: 30px;
   border-radius: 50%;
-  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 .picker-point.current{
 	background-color:#3498db;
 	color:#fff !important;
+	transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 .picker-point.point-outter {
   top: 10px;

intro_src/24M.gif

@@ -1,12 +1,14 @@
 <template lang="pug">
 
-
 div
 	div(v-if="type=='minute'" id="picker-pointer-container")
 		picker-points(v-for="(m,i) in MINUTES" v-if="i%5==0" ':index'="i" ':key'="i" ':angle'="6*i" ':handle-time-change'="handleTimePointerClick" ':picked'="i==minute")
 	div(v-else id="picker_pointer_container")
-		picker-points(v-for="(h,i) in HOURS" v-if="i%2==0" ':index'="i" ':key'="i" ':angle'="15*i" ':handle-time-change'="handleTimePointerClick" ':picked'="i==hour")
-
+		picker-points(v-for="(h,i) in TWELVE_HOURS" ':index'="interval=='AM'?i:i+12" ':key'="interval=='AM'?i:i+12" ':angle'="30*i" ':handle-time-change'="handleTimePointerClick" ':picked'="interval=='AM'?i==hour:(i+12)==hour")
+		div(class="interval-container")
+			span(@click="handleIntervalChange('AM')" class="time-picker-interval" ':class'="{active:interval=='AM'}") AM
+			| &nbsp;|&nbsp;
+			span(@click="handleIntervalChange('PM')" class="time-picker-interval" ':class'="{active:interval=='PM'}") PM
 
 </template>
 
@@ -45,11 +47,17 @@ export default {
 		return {
 			MINUTES,
 			HOURS,
-			TWELVE_HOURS
+			TWELVE_HOURS,
+			interval: 'AM'
 		}
 	},
 	components: {
 		PickerPoints
+	},
+	methods: {
+		handleIntervalChange(itv) {
+			this.interval = itv
+		}
 	}
 }
 </script>
@@ -64,4 +72,20 @@ export default {
   opacity: 0;
   transform: scale3d(0.85, 0.85, 1);
 }
+
+.interval-container {
+	transform: translateY(-150%);
+	transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.time-picker-interval {
+  cursor: pointer;
+}
+.time-picker-interval.active {
+  color: #3498db;
+  cursor: default;
+}
+.time-picker-interval:hover {
+  color: #3498db;
+}
 </style>

intro_src/24M.png

@@ -130,8 +130,8 @@ export default {
 	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.08);
 }
 .time-picker-modal-header {
-  height: 50px;
-  line-height: 20px;
+  height: 80px;
+  line-height: 40px;
   text-align: center;
   font-size: 2.5em;
   position: relative;