reversed hunk from 219a133

Author: gselderslaghs

sass/components/_timepicker.scss

@@ -34,10 +34,10 @@
   user-select: none;
   padding: 1rem 1rem 1.5rem 1rem;
 
-  input[type=number] {
+  input[type=text]{
     height: 4rem;
     color: var(--md-sys-color-secondary);
-    border-bottom: 0;
+    border-bottom: 0px;
     font-size: 4rem;
     direction: ltr;
   }
@@ -49,18 +49,18 @@
   cursor: pointer;
 }
 
-input[type=number].timepicker-input-hours {
+input[type=text].timepicker-input-hours {
   text-align: right;
   width: 28%;
   margin-right: 3px;
 }
 
-input[type=number].timepicker-input-minutes {
+input[type=text].timepicker-input-minutes {
   width: 33%;
   margin-left: 3px;
 }
 
-input[type=number].text-primary {
+input[type=text].text-primary {
   color: var(--md-sys-color-on-background);
 }
 
@@ -217,12 +217,8 @@ input[type=number].text-primary {
     margin-top: 1.2rem;
   }
 
-  input[type=number].timepicker-input-hours {
-    min-width: 6rem;
-  }
-
-  input[type=number].timepicker-input-minutes {
-    min-width: 6.5rem;
+  input[type=text].timepicker-input-minutes {
+    min-width: 5.3rem;
   }
 
   .timepicker-modal .am-btn,

src/timepicker.ts

@@ -819,9 +819,9 @@ export class Timepicker extends Component<TimepickerOptions> {
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
               <div class="timepicker-display-column">
-                <input type="number" maxlength="2" autofocus class="timepicker-input-hours text-primary"/>
+                <input type="number" maxlength="2" autofocus class="timepicker-input-hours text-primary" min="1" max="12"/>
                 :
-                <input type="number" maxlength="2" class="timepicker-input-minutes"/>
+                <input type="number" maxlength="2" class="timepicker-input-minutes" min="0" max="59"/>
               </div>
               <div class="timepicker-display-column timepicker-display-am-pm">
                 <div class="timepicker-span-am-pm"></div>