diff --git a/packages/clay-date-picker/src/__tests__/IncrementalInteractions.tsx b/packages/clay-date-picker/src/__tests__/IncrementalInteractions.tsx
index c8f64cf048..c0858b0bb4 100644
--- a/packages/clay-date-picker/src/__tests__/IncrementalInteractions.tsx
+++ b/packages/clay-date-picker/src/__tests__/IncrementalInteractions.tsx
@@ -357,13 +357,9 @@ describe('IncrementalInteractions', () => {
 			);
 
 			const input: any = getByLabelText(ariaLabels.input);
-			const inputTimePicker: any = getByTestId('time-picker-input');
+			const hoursEl = getByTestId('hours') as HTMLInputElement;
 
-			fireEvent.change(inputTimePicker, {
-				target: {
-					value: '00:20',
-				},
-			});
+			fireEvent.keyDown(hoursEl, {key: '10'});
 
 			expect(input.value).toBe('');
 		});
@@ -381,17 +377,13 @@ describe('IncrementalInteractions', () => {
 
 			const input: any = getByLabelText(ariaLabels.input);
 			const dayNumber = getByLabelText('2019 04 24');
-			const inputTimePicker: any = getByTestId('time-picker-input');
+			const hoursEl = getByTestId('hours') as HTMLInputElement;
 
 			fireEvent.click(dayNumber);
 
-			fireEvent.change(inputTimePicker, {
-				target: {
-					value: '00:20',
-				},
-			});
+			fireEvent.keyDown(hoursEl, {key: '10'});
 
-			expect(input.value).toBe('2019-04-24 00:20');
+			expect(input.value).toBe('2019-04-24 10:0');
 		});
 
 		it('value entered in the input value must be reflected in the time picker', () => {
@@ -406,7 +398,8 @@ describe('IncrementalInteractions', () => {
 			);
 
 			const input: any = getByLabelText(ariaLabels.input);
-			const inputTimePicker: any = getByTestId('time-picker-input');
+			const hoursEl = getByTestId('hours') as HTMLInputElement;
+			const minutesEl = getByTestId('minutes') as HTMLInputElement;
 
 			fireEvent.change(input, {
 				target: {
@@ -414,7 +407,8 @@ describe('IncrementalInteractions', () => {
 				},
 			});
 
-			expect(inputTimePicker.value).toBe('01:20');
+			expect(hoursEl.value).toBe('1');
+			expect(minutesEl.value).toBe('20');
 		});
 	});
 });
diff --git a/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap
index 5e6ed4f2d5..b10be2ff65 100644
--- a/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap
+++ b/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -1609,43 +1609,130 @@ exports[`BasicRendering renders date picker with time 1`] = `
             class="time-picker"
           >
             <div
-              class="input-group"
+              class="clay-time"
             >
               <div
-                class="input-group-item input-group-item-shrink"
+                class="input-group"
               >
-                <span
-                  class="input-group-text"
+                <div
+                  class="input-group-item input-group-item-shrink"
                 >
-                  <svg
-                    class="lexicon-icon lexicon-icon-time"
-                    role="presentation"
+                  <div
+                    class="input-group-text"
                   >
-                    <use
-                      xlink:href="icons.svg#time"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div
-                class="input-group-item"
-              >
-                <input
-                  class="form-control"
-                  data-testid="time-picker-input"
-                  name="timer"
-                  type="time"
-                  value="00:00"
-                />
-              </div>
-              <div
-                class="input-group-item input-group-item-shrink"
-              >
-                <span
-                  class="input-group-text"
-                >
-                  (GMT+01:00)
-                </span>
+                    <svg
+                      class="lexicon-icon lexicon-icon-time"
+                      role="presentation"
+                    >
+                      <use
+                        xlink:href="icons.svg#time"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="input-group-item input-group-item-shrink"
+                >
+                  <div
+                    class="form-control"
+                    data-testid="formControl"
+                  >
+                    <div
+                      class="clay-time-edit"
+                    >
+                      <input
+                        class="clay-time-hours form-control-inset"
+                        data-testid="hours"
+                        maxlength="2"
+                        type="text"
+                        value="0"
+                      />
+                      <span
+                        class="clay-time-divider"
+                      >
+                        :
+                      </span>
+                      <input
+                        class="clay-time-minutes form-control-inset"
+                        data-testid="minutes"
+                        maxlength="2"
+                        type="text"
+                        value="0"
+                      />
+                    </div>
+                    <div
+                      class="clay-time-action-group"
+                    >
+                      <div
+                        class="clay-time-action-group-item"
+                        data-testid="containerReset"
+                        style="opacity: 0; pointer-events: none;"
+                      >
+                        <button
+                          class="clay-time-clear-btn btn btn-unstyled"
+                          type="button"
+                        >
+                          <svg
+                            class="lexicon-icon lexicon-icon-times-circle"
+                            role="presentation"
+                          >
+                            <use
+                              xlink:href="icons.svg#times-circle"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                      <div
+                        class="clay-time-action-group-item"
+                        data-testid="containerSpin"
+                        style="opacity: 0;"
+                      >
+                        <div
+                          class="btn-group-vertical clay-time-inner-spin"
+                          role="group"
+                        >
+                          <button
+                            class="clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary"
+                            data-testid="spinInc"
+                            type="button"
+                          >
+                            <svg
+                              class="lexicon-icon lexicon-icon-angle-up"
+                              role="presentation"
+                            >
+                              <use
+                                xlink:href="icons.svg#angle-up"
+                              />
+                            </svg>
+                          </button>
+                          <button
+                            class="clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary"
+                            data-testid="spinDec"
+                            type="button"
+                          >
+                            <svg
+                              class="lexicon-icon lexicon-icon-angle-down"
+                              role="presentation"
+                            >
+                              <use
+                                xlink:href="icons.svg#angle-down"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="input-group-item input-group-item-shrink"
+                >
+                  <span
+                    class="input-group-text"
+                  >
+                    (GMT+01:00)
+                  </span>
+                </div>
               </div>
             </div>
           </div>
diff --git a/packages/clay-date-picker/src/__tests__/__snapshots__/Internationalization.tsx.snap b/packages/clay-date-picker/src/__tests__/__snapshots__/Internationalization.tsx.snap
index 11cb5e3265..f069847d61 100644
--- a/packages/clay-date-picker/src/__tests__/__snapshots__/Internationalization.tsx.snap
+++ b/packages/clay-date-picker/src/__tests__/__snapshots__/Internationalization.tsx.snap
@@ -4412,34 +4412,121 @@ exports[`Internationalization should render the date picker in russian 1`] = `
             class="time-picker"
           >
             <div
-              class="input-group"
+              class="clay-time"
             >
               <div
-                class="input-group-item input-group-item-shrink"
+                class="input-group"
               >
-                <span
-                  class="input-group-text"
+                <div
+                  class="input-group-item input-group-item-shrink"
                 >
-                  <svg
-                    class="lexicon-icon lexicon-icon-time"
-                    role="presentation"
+                  <div
+                    class="input-group-text"
                   >
-                    <use
-                      xlink:href="icons.svg#time"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div
-                class="input-group-item"
-              >
-                <input
-                  class="form-control"
-                  data-testid="time-picker-input"
-                  name="timer"
-                  type="time"
-                  value="00:00"
-                />
+                    <svg
+                      class="lexicon-icon lexicon-icon-time"
+                      role="presentation"
+                    >
+                      <use
+                        xlink:href="icons.svg#time"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="input-group-item input-group-item-shrink"
+                >
+                  <div
+                    class="form-control"
+                    data-testid="formControl"
+                  >
+                    <div
+                      class="clay-time-edit"
+                    >
+                      <input
+                        class="clay-time-hours form-control-inset"
+                        data-testid="hours"
+                        maxlength="2"
+                        type="text"
+                        value="0"
+                      />
+                      <span
+                        class="clay-time-divider"
+                      >
+                        :
+                      </span>
+                      <input
+                        class="clay-time-minutes form-control-inset"
+                        data-testid="minutes"
+                        maxlength="2"
+                        type="text"
+                        value="0"
+                      />
+                    </div>
+                    <div
+                      class="clay-time-action-group"
+                    >
+                      <div
+                        class="clay-time-action-group-item"
+                        data-testid="containerReset"
+                        style="opacity: 0; pointer-events: none;"
+                      >
+                        <button
+                          class="clay-time-clear-btn btn btn-unstyled"
+                          type="button"
+                        >
+                          <svg
+                            class="lexicon-icon lexicon-icon-times-circle"
+                            role="presentation"
+                          >
+                            <use
+                              xlink:href="icons.svg#times-circle"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                      <div
+                        class="clay-time-action-group-item"
+                        data-testid="containerSpin"
+                        style="opacity: 0;"
+                      >
+                        <div
+                          class="btn-group-vertical clay-time-inner-spin"
+                          role="group"
+                        >
+                          <button
+                            class="clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary"
+                            data-testid="spinInc"
+                            type="button"
+                          >
+                            <svg
+                              class="lexicon-icon lexicon-icon-angle-up"
+                              role="presentation"
+                            >
+                              <use
+                                xlink:href="icons.svg#angle-up"
+                              />
+                            </svg>
+                          </button>
+                          <button
+                            class="clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary"
+                            data-testid="spinDec"
+                            type="button"
+                          >
+                            <svg
+                              class="lexicon-icon lexicon-icon-angle-down"
+                              role="presentation"
+                            >
+                              <use
+                                xlink:href="icons.svg#angle-down"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>