如何缩短ASP.NET Razor Pages中Date Picker的长度？

你的Date Picker控件过长，文本后方存在大量空白区域，可通过以下方法缩短：

问题代码 #

cshtml.cs 文件代码

[BindProperty, DataType(DataType.Date)]
public DateTime Date { get; set; }

public void OnPostTestClick()
{
    String testparam = Request.Form["navn"];
    String testDate = Request.Form["Date"];
    Debug.WriteLine("Testclick verdi = " + testparam);
    Debug.WriteLine("Testclick verdi2 = " + testDate);
    filterdato = testDate;
    ListData();
}

cshtml 文件代码

<form method="post" asp-page-handler="TestClick">
    <input name="name" id="name" />
    <button>seacrh</button>

    <br />
    <br />
    <input class="form-control" type="date" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" value="åååå-mm-dd" />
    <br />
</form>

解决方案 #

问题根源是你使用了Bootstrap的form-control类，它默认设置width: 100%，会让控件占满父容器宽度，导致过长。可以用以下几种方式调整：

• 方式一：使用Bootstrap内置宽度工具类
  直接给input添加Bootstrap的宽度类（比如w-25表示占25%宽度，w-50表示50%），快速调整：

<input class="form-control w-25" type="date" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" value="åååå-mm-dd" />

• 方式二：自定义CSS样式
  在页面中添加自定义CSS，设置控件的最大宽度或固定宽度：

.date-picker {
    max-width: 200px; /* 按需调整数值 */
    /* 也可以用固定宽度：width: 200px; */
}

然后给input添加这个类：

<input class="form-control date-picker" type="date" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" value="åååå-mm-dd" />

• 方式三：内联样式（快速测试用）
  直接在input标签里加内联样式，临时调整宽度：

<input class="form-control" type="date" style="max-width:200px;" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" value="åååå-mm-dd" />

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