jQuery date picker无输出，但同一份代码单独运行可正常执行

你提供的代码单独运行可正常执行，问题出现在集成到项目的场景中，可按以下方向逐一排查：

• DOM 加载顺序错误
  若初始化datepicker的JS代码执行时，#datepicker输入框还未完成DOM渲染，会导致选择器找不到对应元素，初始化失效。
  解决方案：将初始化代码放在DOM元素之后，或用DOM加载完成事件包裹代码：

  $(document).ready(function(){
    $("#datepicker").datepicker();
  });
  // 简写形式
  $(function(){
    $("#datepicker").datepicker();
  });
  

• ID 重复冲突
  页面内ID必须唯一，若存在多个id为datepicker的元素，jQuery只会匹配第一个出现的元素，若首个匹配元素不可见/非输入框，则会出现无响应的情况。可修改目标元素的唯一ID后重新测试。
• JS 库加载异常/冲突
  1. 检查项目中是否重复加载了不同版本的jQuery，版本冲突会导致jQuery UI挂载失效，控制台会报datepicker is not a function错误
  2. 若项目引入了其他占用$符号的JS库（如Prototype、MooTools等），会导致$指向异常，可改用全写形式调用：

  jQuery.noConflict();
  jQuery("#datepicker").datepicker();
  

• 遗漏jQuery UI 样式文件
  jQuery datepicker依赖jQuery UI的配套样式渲染日历控件，若仅引入JS文件未引入CSS，控件实际已经初始化完成但无样式不可见，看起来和无输出一致。补充引入对应版本的jQuery UI样式即可：

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

• 控制台报错排查
  打开浏览器开发者工具（F12）切换到控制台标签，查看是否有JS报错：
  • 报$ is not defined：jQuery库未加载/加载顺序错误，需保证jQuery在jQuery UI和初始化代码之前加载
  • 报datepicker is not a function：jQuery UI库未加载/加载失败，或先于jQuery加载

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