fix(filter): datetime slider ui bug

Co-Authored-By: kyusho <antoineyang99@gmail.com>
Kanaries · Jun 8, 2023 · 6493896 · 6493896
1 parent 6c2dfb5
commit 6493896
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/packages/rath-client/public/locales/en-US.json b/packages/rath-client/public/locales/en-US.json
@@ -628,6 +628,7 @@
         "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
         "shortMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
     },
+    "date_format": "{Y}-{m}-{d}({w}) {H}:{M}:{S}",
     "login": {
         "configKeys": {
             "basic": "Basic",

diff --git a/packages/rath-client/public/locales/zh-CN.json b/packages/rath-client/public/locales/zh-CN.json
@@ -604,6 +604,7 @@
         "months": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
         "shortMonths": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
     },
+    "date_format": "{Y}年{m}{d}日 {w} {H}:{M}:{S}",
     "login": {
         "configKeys": {
             "basic": "基础信息",

diff --git a/packages/rath-client/src/components/fieldFilter/rangeSelection.tsx b/packages/rath-client/src/components/fieldFilter/rangeSelection.tsx
@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import { Slider } from '@fluentui/react';
 import React, { useCallback } from 'react';
 
@@ -8,12 +9,30 @@ interface RangeSelectionProps {
     onValueChange: (range: [number, number]) => void;
     type: 'number' | 'time';
 }
+
+const DateTimeValueLabelStyle = {
+    // monospace
+    fontFamily: 'Courier New',
+    // narrowed
+    letterSpacing: '-0.05em',
+    transform: 'scaleX(0.95)',
+    marginInline: '-1%',
+} as const;
+
 const RangeSelection: React.FC<RangeSelectionProps> = (props) => {
     const { range, left, right, onValueChange, type } = props;
 
     const formatter = useCallback((v: number) => {
         if (type === 'time') {
-            return new Date(v).toLocaleString();
+            return intl.get('date_format', {
+                Y: `${new Date(v).getFullYear()}`.padStart(4, ' '),
+                m: intl.get(`time_format.shortMonths.${new Date(v).getDay()}`),
+                d: `${new Date(v).getDate()}`.padStart(2, '0'),
+                w: intl.get(`time_format.shortDays.${new Date(v).getDay()}`),
+                H: `${new Date(v).getHours()}`.padStart(2, '0'),
+                M: `${new Date(v).getMinutes()}`.padStart(2, '0'),
+                S: `${new Date(v).getSeconds()}`.padStart(2, '0'),
+            });
         }
         return `${v}`;
     }, [type]);
@@ -42,10 +61,12 @@ const RangeSelection: React.FC<RangeSelectionProps> = (props) => {
                 },
                 slideBox: {
                     flex: 1,
+                    minWidth: '120px',
                 },
                 valueLabel: {
                     minWidth: '40px',
                     width: 'unset',
+                    ...(type === 'time' ? DateTimeValueLabelStyle : {}),
                 },
             }}
         />