diff --git a/src/timepicker/reducer/timepicker.reducer.ts b/src/timepicker/reducer/timepicker.reducer.ts
index 93843beba7..1a40c0903a 100644
--- a/src/timepicker/reducer/timepicker.reducer.ts
+++ b/src/timepicker/reducer/timepicker.reducer.ts
@@ -17,7 +17,8 @@ export class TimepickerState {
   controls: TimepickerControls;
 }
 
-export const initialState = {
+export const initialState: TimepickerState = {
+  value: null,
   config: new TimepickerConfig(),
   controls: {
     canIncrementHours: true,
@@ -28,7 +29,7 @@ export const initialState = {
     canDecrementMinutes: true,
     canDecrementSeconds: true
   }
-} as TimepickerState;
+};
 
 export function timepickerReducer(state = initialState, action: Action) {
   switch (action.type) {
@@ -81,11 +82,17 @@ export function timepickerReducer(state = initialState, action: Action) {
 
     case (TimepickerActions.UPDATE_CONTROLS): {
       const _newControlsState = timepickerControls(state.value, action.payload);
-
-      return Object.assign({}, state, {
+      const _newState: TimepickerState = {
+        value: state.value,
         config: action.payload,
         controls: _newControlsState
-      });
+      };
+
+      if (state.config.showMeridian !== _newState.config.showMeridian) {
+        _newState.value = new Date(state.value);
+      }
+
+      return Object.assign({}, state, _newState);
     }
 
     default:
diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts
index b41a3fdc0e..0f163f70bf 100644
--- a/src/timepicker/timepicker.component.ts
+++ b/src/timepicker/timepicker.component.ts
@@ -35,18 +35,16 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = {
         <!-- increment hours button-->
         <td>
           <a class="btn btn-link" [class.disabled]="!canIncrementHours"
-             (click)="changeHours(hourStep)">
-            <span class="glyphicon glyphicon-chevron-up"></span>
-          </a>
+             (click)="changeHours(hourStep)"
+          ><span class="glyphicon glyphicon-chevron-up"></span></a>
         </td>
         <!-- divider -->
         <td>&nbsp;&nbsp;&nbsp;</td>
         <!-- increment minutes button -->
         <td>
           <a class="btn btn-link" [class.disabled]="!canIncrementMinutes"
-             (click)="changeMinutes(minuteStep)">
-            <span class="glyphicon glyphicon-chevron-up"></span>
-          </a>
+             (click)="changeMinutes(minuteStep)"
+          ><span class="glyphicon glyphicon-chevron-up"></span></a>
         </td>
         <!-- divider -->
         <td *ngIf="showSeconds">&nbsp;</td>
@@ -112,8 +110,8 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = {
           <button type="button" class="btn btn-default text-center"
                   [disabled]="readonlyInput"
                   [class.disabled]="readonlyInput"
-                  (click)="toggleMeridian()">
-            {{meridian}}
+                  (click)="toggleMeridian()"
+          >{{ meridian }}
           </button>
         </td>
       </tr>