如何修改Swagger UI中方法参数的背景占位符（如fromDate改为yyyy-MM-dd）？

你之前设置Example的方式是给参数添加示例文本（显示在输入框下方），并不是输入框内的占位符，所以达不到需求。下面给两种可行的解决方案：

方案1：针对日期类型自动生成占位符 #

如果fromDate是DateTime类型，只需让Swagger正确识别其数据类型，UI会自动显示yyyy-MM-dd占位符：

1. 在接口参数上添加标注：

[HttpGet]
public IActionResult GetData([FromQuery, DataType(DataType.Date)] DateTime fromDate)
{
    // 接口逻辑
}

2. 确保Swashbuckle配置正常（可选添加XML注释增强类型识别）：

builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "你的API", Version = "v1" });
    // 启用XML注释（需在项目属性中启用XML文档文件生成）
    var xmlPath = Path.Combine(AppContext.BaseDirectory, $"{Assembly.GetExecutingAssembly().GetName().Name}.xml");
    c.IncludeXmlComments(xmlPath);
});

配置完成后，Swagger UI的fromDate输入框会自动显示yyyy-MM-dd作为占位符。

方案2：自定义任意占位符文本 #

如果需要给非日期类型参数设置占位符，或者更灵活的控制，可通过OpenAPI扩展+自定义脚本实现：

1. 在接口的WithOpenApi中为参数添加自定义扩展：

.WithOpenApi(operation =>
{
    var fromDateParam = operation.Parameters.FirstOrDefault(p => p.Name == "fromDate");
    if (fromDateParam != null)
    {
        fromDateParam.Extensions.Add("x-placeholder", new OpenApiString("yyyy-MM-dd"));
    }
    return operation;
});

2. 修改Swagger UI配置，注入自定义脚本：

app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "你的API V1");
    c.InjectJavascript("/swagger-custom.js");
});

3. 在项目wwwroot目录下创建swagger-custom.js，内容如下：

window.addEventListener('load', () => {
    const observer = new MutationObserver(mutations => {
        mutations.forEach(() => {
            document.querySelectorAll('.parameter__input input').forEach(input => {
                const paramName = input.closest('.parameter').querySelector('.parameter__name').textContent.trim();
                const operation = window.ui.getModel().getSelectedOperation();
                if (!operation) return;
                
                const param = operation.parameters.find(p => p.name === paramName);
                if (param?.['x-placeholder']) {
                    input.setAttribute('placeholder', param['x-placeholder']);
                }
            });
        });
    });
    observer.observe(document.getElementById('swagger-ui'), { childList: true, subtree: true });
});

这样就能将目标参数的输入框占位符修改为指定文本。

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