Merge pull request #2057 from quadratichq/fix-custom-dates

Fix bugs with custom dates

quadratic-client/src/app/ui/components/DateFormat.tsx

@@ -227,9 +227,17 @@ export const DateFormat = (props: DateFormatProps) => {
             <ValidationInput
               ref={ref}
               placeholder="%d, %B %Y"
-              onChange={changeCustom}
+              onInput={changeCustom}
               value={custom ?? ''}
-              onEnter={closeMenu}
+              onEnter={(value) => {
+                changeCustom(value);
+                apply();
+                closeMenu();
+              }}
+              onKeyDown={(e) => {
+                // ensures that the menu does not close when the user presses keys like arrow
+                e.stopPropagation();
+              }}
             />
             <p className="text-xs text-muted-foreground ">
               Learn custom date and time formatting{' '}

quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '@/shared/shadcn/ui/input';
 import { cn } from '@/shared/shadcn/utils';
-import { FocusEvent, forwardRef, Ref, useCallback, useEffect, useRef } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, Ref, useCallback, useEffect, useRef } from 'react';
 
 interface ValidationInputProps {
   className?: string;
@@ -15,8 +15,8 @@ interface ValidationInputProps {
 
   // used to update whenever the input is changed (ie, a character is changes within the input box)
   onInput?: (value: string) => void;
-
-  onEnter?: () => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onEnter?: (value: string) => void;
 
   footer?: string | JSX.Element;
   height?: string;
@@ -46,6 +46,7 @@ export const ValidationInput = forwardRef((props: ValidationInputProps, ref: Ref
     readOnly,
     type,
     clear,
+    onKeyDown,
   } = props;
 
   const parentRef = useRef<HTMLDivElement>(null);
@@ -105,10 +106,12 @@ export const ValidationInput = forwardRef((props: ValidationInputProps, ref: Ref
                 }
 
                 // timeout is needed to ensure the state updates before the onEnter function is called
-                setTimeout(onEnter, 0);
+                const savedValue = e.currentTarget.value;
+                setTimeout(() => onEnter?.(savedValue), 0);
                 e.preventDefault();
                 e.stopPropagation();
               }
+              onKeyDown?.(e);
             }}
           />
         </div>

quadratic-core/src/date_time.rs

@@ -97,7 +97,11 @@ fn find_items_date_start(items: &[Item<'_>]) -> Option<usize> {
 /// Converts a NaiveDateTime to a date and time string using a strftime format string.
 pub fn date_time_to_date_time_string(date_time: NaiveDateTime, format: Option<String>) -> String {
     let format = format.map_or(DEFAULT_DATE_TIME_FORMAT.to_string(), |f| f);
-    date_time.format(&format).to_string()
+    let strftime_items = StrftimeItems::new(&format);
+    let Ok(items) = strftime_items.parse() else {
+        return date_time.format(DEFAULT_DATE_TIME_FORMAT).to_string();
+    };
+    date_time.format_with_items(items.iter()).to_string()
 }
 
 /// Converts a NaiveDateTime to a date-only string using a strftime format string.

quadratic-rust-client/src/lib.rs

@@ -25,3 +25,8 @@ impl SheetOffsetsWasm {
         SheetOffsets::default()
     }
 }
+
+#[wasm_bindgen(start)]
+pub fn start() {
+    console_error_panic_hook::set_once();
+}