Jquery 日期选择器元素以不正确的格式显示日期且样式混乱

Question

I am having a problem with my datepicker element that is driving me crazy.我的日期选择器元素有问题，这让我发疯。 I am using the following code to create the datepicker element in index.cshtml:我使用以下代码在 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>
}

And here is my UpToDate model:这是我的 UpToDate model：

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

I am importing the relevant jQuery scripts in my layout.cshtml file like this:我在我的 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)

The problem is that the date is displaying in the wrong format, but it displays correctly when changing the date.问题是日期以错误的格式显示，但在更改日期时显示正确。 Additionally, the styling of the datepicker is messed up.此外，日期选择器的样式也很混乱。

I have been trying to fix this for hours and I can't seem to find a solution.几个小时以来，我一直在尝试解决这个问题，但似乎找不到解决方案。 Any help would be greatly appreciated.任何帮助将不胜感激。

Answer 1

try this:尝试这个：

@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>
}

if this answer is not correct, you sholde change var dateString = "2023-01-22";如果这个答案不正确，你应该更改var dateString = "2023-01-22"; and try this.试试这个。 ( 2023-01-22 is example. ) If the problem is solved, the problem is from this line. （ 2023-01-22 是示例。 ）如果问题解决，则问题出在这一行。

and for using default template: use并使用默认模板：使用

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

You cleared the rel="stylesheet" in your code.您清除了代码中的rel="stylesheet" 。

sorry for my english if it's bad抱歉我的英语不好

Jquery 日期选择器元素以不正确的格式显示日期且样式混乱

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-01-26 11:38:34

Jquery 日期选择器元素以不正确的格式显示日期且样式混乱

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-01-26 11:38:34

解决方案1
1 已采纳 2023-01-26 11:38:34