我来帮你捋捋这个Chrome下日历组件渲染异常的问题，结合你给出的代码和浏览器差异，咱们从几个常见方向入手排查：

1. 排查插件兼容性与版本匹配 #

首先要确认你用的DateTimePicker插件（比如jQuery UI DateTimePicker、Bootstrap DateTimePicker这类）版本是否适配当前Chrome浏览器。虽说现在Edge也是Chromium内核，但部分插件可能对Chrome的新渲染特性支持滞后，或者和你项目里的jQuery、Bootstrap版本不兼容。

• 建议把插件升级到最新稳定版，同时对照插件文档核对依赖版本要求，确保jQuery、Bootstrap的版本和插件完全匹配。

2. 检查自定义样式与控件的冲突 #

你的input元素嵌套在wrap-input100、validate-input这类自定义样式容器里，还叠加了form-control类，很大概率是这些自定义样式在Chrome里和DateTimePicker的默认样式撞车了：

• 先临时移除wrap-input100和validate-input类，只保留form-control，测试日历组件能不能正常渲染，逐步定位是哪个样式搞的鬼。
• 另外，Chrome对type="text"和原生type="datetime-local"的渲染逻辑有差异，如果你用的是第三方插件，要确保没同时触发浏览器原生日期控件（有些插件会自动检测input类型，类型冲突直接导致渲染异常）。

3. 确认初始化脚本的时机与正确性 #

DateTimePicker的初始化时机特别关键，Chrome的DOM加载顺序可能和Edge略有不同，如果脚本执行时DOM还没完全加载，控件就会初始化失败：

• 一定要把初始化代码包裹在DOM就绪事件里，比如：

  $(function() {
      $('#AppointmentDate').datetimepicker({
          format: 'YYYY-MM-DD', // 按你的需求调整日期格式
          // 可以添加禁用过去日期、时间范围等配置项
      });
  });
  

• 打开Chrome控制台（F12）看看有没有JS报错，比如找不到插件方法、元素不存在这类问题，这些都会直接导致控件没法正常渲染。

4. 清除缓存与排除浏览器干扰 #

有时候Chrome的缓存会加载旧的CSS/JS文件，间接导致样式或脚本冲突：

• 按Ctrl+Shift+R强制刷新页面，清掉浏览器缓存后再测试。
• 试试在Chrome隐身模式下打开页面，排除浏览器扩展程序对页面渲染的干扰。

调整后的测试代码示例 #

给你一个简化版的测试代码，你可以先试试这个版本能不能正常工作：

<div class="form-group">
    <input type="text" class="form-control" id="AppointmentDate" name="date" placeholder="Select appointment date">
</div>

<script>
$(function() {
    $('#AppointmentDate').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        // 可以添加图标、禁用状态等配置
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar'
        }
    });
});
</script>

如果以上方法都没解决问题，你可以打开Chrome开发者工具（F12），切换到Elements面板查看日历组件的DOM结构和样式，看看是不是有样式被覆盖、元素偏移或隐藏的情况，这些细节能帮你精准定位问题点。

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