如何将<input type='date'>占位符从西里尔文改为英文（Formik+Styled Components）

问题核心 #

原生type="date"输入框的提示文本（如dd/mm/yyyy）由浏览器根据系统/浏览器语言决定，即使页面设置了英文，部分浏览器仍可能跟随系统语言显示，直接给input加lang属性有时因组件封装或浏览器优先级问题不生效。

方法1：确保lang属性正确传递给原生Input #

如果想依赖浏览器原生提示，需确保lang属性正确作用到底层<input>元素：

1. Styled Components组件需透传props：
   若你封装了自定义日期输入组件，必须将所有props传递给原生input：

   const CustomDateInput = ({ className, ...props }) => {
     return <input className={className} type="date" {...props} />;
   };
   const StyledDateInput = styled(CustomDateInput)`
     // 你的样式代码
   `;
   

2. 在Formik中明确指定lang和dir：
   使用Field组件时直接传入语言属性：

   <Field
     component={StyledDateInput}
     type="date"
     name="eventDate"
     lang="en-US"
     dir="ltr"
   />
   

3. 检查根元素语言设置：
   确认页面<html>标签的lang属性为en-US或en，避免嵌套元素的语言设置覆盖全局配置。

方法2：自定义占位符（彻底摆脱浏览器限制） #

最可靠的方式是隐藏原生提示，用自定义占位符模拟，完全控制文本内容：

import styled from 'styled-components';
import { Field } from 'formik';

const DateInputWrapper = styled.div`
  position: relative;
  width: fit-content;

  input[type="date"] {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-sizing: border-box;
  }

  // 渲染自定义英文占位符
  &::before {
    content: "MM/DD/YYYY"; // 可替换为DD/MM/YYYY等格式
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font: inherit;
  }

  // 输入框聚焦或有值时隐藏占位符
  input[type="date"]:focus ~ &::before,
  input[type="date"]:valid ~ &::before {
    display: none;
  }
`;

// 组件使用示例
<DateInputWrapper>
  <Field
    type="date"
    name="bookingDate"
    required // 确保输入后标记为valid，触发占位符隐藏
  />
</DateInputWrapper>

这种方式完全不受浏览器语言设置影响，精准控制显示文本。

内容的提问来源于stack exchange，提问作者Olexandr Sorokin