[4.x] Change Time fieldtype from text to time input type (#9662)

Co-authored-by: Jason Varga <[email protected]>
statamic · Mar 11, 2024 · 66fd5e4 · 66fd5e4
1 parent 478a665
commit 66fd5e4
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 28 deletions.
diff --git a/resources/css/components/fieldtypes/datetime.css b/resources/css/components/fieldtypes/datetime.css
@@ -48,7 +48,6 @@
 	.time-fieldtype-container {
 		@apply flex items-center;
 		min-width: max-content;
-		max-width: 140px;
 	}
 
 	.input-time {

diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -7,8 +7,7 @@
     	</button>
 
         <div v-if="hasDate || config.inline"
-            class="date-time-container flex flow-col @sm:flex-row"
-            :class="config.time_seconds_enabled ? 'space-x-1' : 'space-x-3'"
+            class="date-time-container flex flex-col @sm:flex-row gap-2"
         >
             <component
                 :is="pickerComponent"
@@ -18,7 +17,7 @@
                 @blur="focusedField = null"
             />
 
-            <div v-if="config.time_enabled && !isRange" class="time-container rtl:@xs:mr-2 ltr:@xs:ml-2 @xs:mt-0 time-fieldtype">
+            <div v-if="config.time_enabled && !isRange" class="time-container time-fieldtype">
 				<time-fieldtype
                     v-if="hasTime"
                     ref="time"

diff --git a/resources/js/components/fieldtypes/TimeFieldtype.vue b/resources/js/components/fieldtypes/TimeFieldtype.vue
@@ -1,17 +1,16 @@
 <template>
     <div class="time-fieldtype-container">
-        <div class="input-group" :class="{'w-[120px]': useSeconds, 'w-[96px]': ! useSeconds}">
+        <div class="input-group">
             <button class="input-group-prepend flex items-center" v-tooltip="__('Set to now')" @click="setToNow" v-if="!isReadOnly">
                 <svg-icon name="light/time" class="w-4 h-4" />
             </button>
             <input
-                type="text"
+                type="time"
                 ref="time"
-                class="input-text"
+                class="input-text [&::-webkit-calendar-picker-indicator]:hidden"
+                :step="useSeconds ? '1' : null"
                 :readonly="isReadOnly"
                 @keydown.esc="clear"
-                @keydown.up.prevent="incrementPart"
-                @keydown.down.prevent="decrementPart"
                 @focus="focused"
                 @blur="$emit('blur')"
                 @change="updateActualValue"
@@ -160,24 +159,6 @@ export default {
                 e.target.selectionEnd = caretPosition;
             });
         },
-
-        incrementPart(e) {
-            this.adjustPart(e, 'increment', (part, value) => {
-                if ((part === 0 && value > 23) || (part !== 0 && value > 59)) {
-                    return '00';
-                }
-            });
-        },
-
-        decrementPart(e) {
-            this.adjustPart(e, 'decrement', (part, value) => {
-                if (part === 0 && value == -1) {
-                    return '23';
-                } else if (part !== 0 && value == -1) {
-                    return '59';
-                }
-            });
-        },
     }
 
 };

diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="w-full">
+    <div class="flex-1">
 
         <v-portal :disabled="!open" :to="portalTarget">
             <v-date-picker