asp.net-core-mvc - 日期选择器在编辑表单中的日期不可见

Question

我正在尝试做一个 editForm ，它从数据库中正确获取所有值。问题是日期是可见的或只是日期选择器。“查看页面源显示正确的值” 这就是我在模型中显示属性的方式

   [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime DateOfBirth { get; set; }

我已经尝试了输入标签和@Html标签，并且都给出了不同的结果只有输入标签它只显示带有dd/mm/yyyy的日期选择器

                    <div class="form row">
                        <div class="form-group col-md-6">
                            <label asp-for="DateOfBirth" class="col-auto col-form-label small form-text">Date Of Birth</label>
                            <div class="col">
                                <input asp-for="DateOfBirth" class="form-control ui-datepicker" type="date" placeholder="Date of Birth" value="@Model.DateOfBirth.ToShortDateString()" asp-format="dd/mm/yyyy" />

并且使用@Html 它只显示正确的日期而不是日期选择器

  @*@{
                                    string parameterValue = @Model.DateOfBirth.ToShortDateString();
                                }
                                @Html.TextBoxFor(m => parameterValue, new { @class = "form-control ui-datepicker" })*@
                                <span asp-validation-for="DateOfBirth"></span>
                            </div>
                        </div>

如何在编辑表单中同时显示日期和日期选择器？

标签： asp.net-core-mvc

Answer 1

只是输入标签，它只显示带有 dd/mm/yyyy 的日期选择器

1. 这是因为您将输入类型指定为date。
   • 类型="日期"
2. 关于<input type="date">，你需要知道：
   1. 显示的日期格式将与实际值不同——显示的日期是根据用户浏览器的语言环境格式化的，但解析后的值始终 是yyyy-mm-dd 格式。
   2. 因此，当您输入的值不是yyyy-mm-dd 格式时，将无法 正确显示。
   3. type="date "的输入元素

如何在编辑表单中同时显示日期和日期选择器？

1. 我建议您结合jquery Datepicker来满足您的需求。
2. 我写了一个例子，你可以参考一下。
   1. 您需要引用jquery-ui.css和jquery-ui.js文件。
      • 您可以通过右键单击wwwroot并选择Add->Client-Side Library来安装 jqueryui。
      • 
   2. 模型

      • public class TestDate
        {
           [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
           public DateTime DateOfBirth { get; set; }
        }
        

   3. 控制器

      • public IActionResult Index()
        {
          TestDate model = new TestDate {  DateOfBirth=DateTime.Now};
          return View(model);
        }
        

   4. 看法

      • @model WebApplication24.Models.TestDate
        <link href="~/jqueryui/jquery-ui.css" rel="stylesheet" />
        <input asp-for="DateOfBirth" type="text" class="form-control" placeholder="Date of Birth" />
        @section scripts{
            <script src="~/jqueryui/jquery-ui.js"></script>
            <script>
                $(function () {
                    $("#DateOfBirth").datepicker({ dateFormat: 'dd/mm/yy' });
                });
            </script>
        }
        

   5. 结果
      •