Jquery Datepicker 元素以不正确的格式显示日期并且样式混乱答案

【问题标题】：Jquery Datepicker element displaying date in incorrect format and messed up stylingJquery Datepicker 元素以不正确的格式显示日期并且样式混乱
【发布时间】：2023-01-26 19:54:51
【问题描述】：

我的日期选择器元素有问题，这让我发疯。我使用以下代码在 index.cshtml 中创建日期选择器元素：

@using ChartDataStructures;
@model UpToDate
@{
    ViewData["Title"] = "Index";
}
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

这是我的 UpToDate 模型：

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

我在我的 layout.cshtml 文件中导入相关的 jQuery 脚本，如下所示：

Copy code
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

问题是日期以错误的格式显示，但在更改日期时显示正确。此外，日期选择器的样式也很混乱。

几个小时以来，我一直在尝试解决此问题，但似乎找不到解决方案。任何帮助将不胜感激。

【问题讨论】：

您是否尝试过使用dateFormat 选项？
我认为你应该使用setDate方法。
看我的回答。告诉我是否有问题。

标签： c# jquery asp.net jquery-ui jquery-ui-datepicker

【解决方案1】：

尝试这个：

@section DatePicker{
<script type="text/javascript">
    $(function () {
        var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
        var defaultDate = new Date(dateString);
        $(".datePicker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy/mm/dd"
        });
       $(".datePicker").datepicker("setDate", defaultDate);

    });
</script>
}

如果此答案不正确，请更改var dateString = "2023-01-22"; 并尝试此操作。 (2023-01-22 就是例子。) 如果问题解决，则问题出在这一行。

并使用默认模板：使用

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

您清除了代码中的 rel="stylesheet"。

抱歉我的英语不好

【讨论】：