fix: prevent editing non numeric parts

formwerkjs · Jan 26, 2025 · 861c0ea · 861c0ea
1 parent cb322c0
commit 861c0ea
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/core/src/useDateTimeField/useDateTimeSegment.ts b/packages/core/src/useDateTimeField/useDateTimeSegment.ts
@@ -50,6 +50,8 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
     getType: () => toValue(props.type),
   });
 
+  const isNumeric = computed(() => parser.isValidNumberPart(toValue(props.value)));
+
   let currentInput = '';
 
   const handlers = {
@@ -64,6 +66,10 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
       }
 
       blockEvent(evt);
+      if (!isNumeric.value) {
+        return;
+      }
+
       const nextValue = currentInput + evt.data;
       currentInput = nextValue;
 

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -9,7 +9,7 @@ import DateField from '@/components/DateField.vue';
       label="Date"
       :format-options="{
         day: '2-digit',
-        month: '2-digit',
+        month: 'long',
         year: 'numeric',
         hour: '2-digit',
         hour12: true,