jQuery UI 由于输入字段上有额外的 类，日期选择器未初始化
jQuery UI Datepicker not initializing due to extra classes on input fields
我对 jQuery 并不陌生，而且我对 Bootstrap Datepicker 有很多经验并且从未遇到过问题。然而，这个项目有很多 jQuery UI Datepicker 的遗留配置，这些配置或多或少让我无法使用它。但是，无论出于何种原因，我似乎无法对其进行初始化。我正在使用来自 CDN 的 jQuery 和 jQuery UI，我还没有尝试做任何花哨的事情。
以下是所有内容在最基本状态下的设置方式。
CDN：
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
初始化：
<script type="text/javascript">
$("#checkin").datepicker();
</script>
HTML:
<div class="travel-dates small">
<div class="date">
<label for="checkin">Check in</label>
<div class="input-group form-group">
<input name='checkin' id="checkin" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="date">
<label for="checkout">Check out</label>
<div class="input-group form-group">
<input name="checkout" id="checkout" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
我也尝试使用 $("#checkin").datepicker("show") 在单击时调用日期选择器，当我这样做时，我收到错误 "t is undefined,"，其中引用了日期选择器它的痕迹。
我一定是遗漏了什么，或者做错了什么，但我终生无法让它发挥作用。我已经浏览了关于该主题的所有其他 SO 答案，但没有找到任何有用的信息。老实说，我决定用其他东西重做他们为 jQuery UI Datepicker 所做的所有很酷的事情，而不是尝试让它在如此少的情况下继续工作错误的方式。任何帮助或建议将不胜感激。
更新：
我在上面发布的内容在我将其复制回来时最终起作用了。我正在处理的站点是一个 angular 站点，已移植到 PHP，但我的输入中仍有一些 angular 类。这些 类 没有在我们当前的 CSS 文件中定义，我们只是没有时间删除它们。出于某种原因，删除那些 类 就可以了。澄清一下，日历没有被隐藏或显示：none，它未能正确初始化。现在一切正常，但我很好奇是否有人能解开为什么额外的未定义 类 导致它失败的谜团。
原文HTML：
<div class="travel-dates small ng-isolate-scope">
<div class="date">
<label for="checkin" class="ng-scope">Check in</label>
<div class="input-group form-group">
<input name='checkin' id="checkin" class="form-control input-sm ng-pristine ng-invalid ng-invalid-required hasDatepicker" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="date">
<label for="checkout" class="ng-scope">Check out</label>
<div class="input-group form-group">
<input name="checkout" id="checkout" class="form-control input-sm ng-pristine ng-invalid ng-invalid-required hasDatepicker" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm" disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
无法重现您所描述的问题。我怀疑某些东西导致加载 jQuery UI.
出现问题
$(function() {
$("#checkin").datepicker();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="travel-dates small">
<div class="date">
<label for="checkin">Check in</label>
<div class="input-group form-group">
<input name='checkin' id="checkin" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="date">
<label for="checkout">Check out</label>
<div class="input-group form-group">
<input name="checkout" id="checkout" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
我对 jQuery 并不陌生，而且我对 Bootstrap Datepicker 有很多经验并且从未遇到过问题。然而，这个项目有很多 jQuery UI Datepicker 的遗留配置，这些配置或多或少让我无法使用它。但是，无论出于何种原因，我似乎无法对其进行初始化。我正在使用来自 CDN 的 jQuery 和 jQuery UI，我还没有尝试做任何花哨的事情。
以下是所有内容在最基本状态下的设置方式。
CDN：
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
初始化：
<script type="text/javascript">
$("#checkin").datepicker();
</script>
HTML:
<div class="travel-dates small">
<div class="date">
<label for="checkin">Check in</label>
<div class="input-group form-group">
<input name='checkin' id="checkin" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="date">
<label for="checkout">Check out</label>
<div class="input-group form-group">
<input name="checkout" id="checkout" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
我也尝试使用 $("#checkin").datepicker("show") 在单击时调用日期选择器，当我这样做时，我收到错误 "t is undefined,"，其中引用了日期选择器它的痕迹。
我一定是遗漏了什么，或者做错了什么，但我终生无法让它发挥作用。我已经浏览了关于该主题的所有其他 SO 答案，但没有找到任何有用的信息。老实说，我决定用其他东西重做他们为 jQuery UI Datepicker 所做的所有很酷的事情，而不是尝试让它在如此少的情况下继续工作错误的方式。任何帮助或建议将不胜感激。
更新：
我在上面发布的内容在我将其复制回来时最终起作用了。我正在处理的站点是一个 angular 站点，已移植到 PHP，但我的输入中仍有一些 angular 类。这些 类 没有在我们当前的 CSS 文件中定义，我们只是没有时间删除它们。出于某种原因，删除那些 类 就可以了。澄清一下，日历没有被隐藏或显示：none，它未能正确初始化。现在一切正常，但我很好奇是否有人能解开为什么额外的未定义 类 导致它失败的谜团。
原文HTML：
<div class="travel-dates small ng-isolate-scope">
<div class="date">
<label for="checkin" class="ng-scope">Check in</label>
<div class="input-group form-group">
<input name='checkin' id="checkin" class="form-control input-sm ng-pristine ng-invalid ng-invalid-required hasDatepicker" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="date">
<label for="checkout" class="ng-scope">Check out</label>
<div class="input-group form-group">
<input name="checkout" id="checkout" class="form-control input-sm ng-pristine ng-invalid ng-invalid-required hasDatepicker" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm" disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
无法重现您所描述的问题。我怀疑某些东西导致加载 jQuery UI.
出现问题$(function() {
$("#checkin").datepicker();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="travel-dates small">
<div class="date">
<label for="checkin">Check in</label>
<div class="input-group form-group">
<input name='checkin' id="checkin" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="date">
<label for="checkout">Check out</label>
<div class="input-group form-group">
<input name="checkout" id="checkout" class="form-control input-sm" placeholder="mm/dd/yyyy" required="" type="text">
<span class="input-group-btn">
<button type="button" tabindex="-1" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>