jQuery Datepicker日期格式错误及样式错乱问题求助

样式错乱问题修复 #

你的layout.cshtml中引入jQuery UI样式表的标签缺少rel="stylesheet"属性，导致浏览器无法正确识别并加载样式文件，这是Datepicker样式错乱的直接原因。

修改后的样式表引入代码：

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

初始日期格式错误问题修复 #

初始状态日期格式错误、选择后恢复正常的核心原因是：

1. 手动通过@Value设置输入框日期格式，但未在Datepicker配置中指定统一的dateFormat，导致初始化时未按期望格式渲染初始值；
2. 直接使用new Date(dateString)解析日期字符串存在跨浏览器兼容性风险，部分浏览器无法正确解析yyyy-MM-dd格式的字符串。

修改步骤： #

1. 移除@Html.TextBoxFor中的@Value手动赋值，让Datepicker统一管理输入框显示值：

@Html.TextBoxFor(model => model.Date, new { @class = "datePicker" })

2. 在Datepicker初始化配置中添加dateFormat参数，用内置解析方法处理初始日期，确保格式统一：

$(function () {
    // 用Datepicker的parseDate方法解析初始日期，避免兼容性问题
    var initialDate = $.datepicker.parseDate('yy-mm-dd', "@Model.Date.ToString("yyyy-MM-dd")");
    
    $(".datePicker").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd', // 统一设置显示格式
        defaultDate: initialDate
    });
});

或者更简洁的写法（直接传入日期字符串，Datepicker会自动按指定格式解析）：

$(function () {
    $(".datePicker").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd',
        defaultDate: "@Model.Date.ToString("yyyy-MM-dd")"
    });
});

完成以上修改后，Datepicker样式会正常加载，初始日期显示格式也会和选择新日期后的格式保持一致，解决你遇到的两个问题。

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