rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Firefox DatePicker input variant falls through to button variant

Browse Source 
Instead of type=text with raw ISO strings, Firefox users now get
the same button-style picker used on the registration screen.
Chromium keeps native date/datetime-local for segmented editing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-03 15:49:03 +08:00
parent 8e922a1f1c
commit e7979afba3
1 changed files with 8 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/ui/date-picker.tsx
View File

@ -433,35 +433,22 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
)
: null;
// ── Input variant ──
// Firefox: use type="text" to avoid the native calendar icon that cannot be
// hidden via CSS (Firefox has no ::-webkit-calendar-picker-indicator equivalent).
// Chromium: use native type="date"/"datetime-local" for segmented editing UX,
// ── Input variant (Chromium only) ──
// Firefox: falls through to the button variant below because Firefox has no
// CSS pseudo-element to hide its native calendar icon (Mozilla bug 1830890).
// Chromium: uses native type="date"/"datetime-local" for segmented editing UX,
// with the native icon hidden via CSS in index.css (.datepicker-wrapper rule).
if (variant === 'input') {
const nativeType = isFirefox
? 'text'
: mode === 'datetime'
? 'datetime-local'
: 'date';
const textPlaceholder = isFirefox
? mode === 'datetime'
? 'YYYY-MM-DDThh:mm'
: 'YYYY-MM-DD'
: undefined;
if (variant === 'input' && !isFirefox) {
return (
<>
<div ref={wrapperRef} className="datepicker-wrapper relative">
<input
ref={inputElRef}
type={nativeType}
type={mode === 'datetime' ? 'datetime-local' : 'date'}
id={id}
name={name}
autoComplete={autoComplete}
value={value}
placeholder={textPlaceholder}
onChange={(e) => onChange(e.target.value)}
onBlur={handleInputBlur}
onKeyDown={(e) => {
@ -473,8 +460,8 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
}}
required={required}
disabled={disabled}
min={isFirefox ? undefined : min}
max={isFirefox ? undefined : max}
min={min}
max={max}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-9 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className