jQueryUI 日期选择器不起作用
Posted
技术标签:
【中文标题】jQueryUI 日期选择器不起作用【英文标题】：jQueryUI datepicker not functioning 【发布时间】：2019-04-04 21:41:45 【问题描述】：我一直在做一个项目，我想使用 jqueryUI datepicker，这对我来说并不陌生，但现在使用 laravel Blade 模板它不起作用。我尝试了很多东西，但似乎没有找到解决方案。如果有人知道答案，我会很高兴与我和其他任何可能处理相同问题的人分享。这是代码块。
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content=" csrf_token() ">
<script src=" asset('js/app.js') " defer></script>
<link href=" asset('css/app.css') " rel="stylesheet">
<!-- jQueryUI CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<!-- on this place where datepicker is, it's "@yield('content')" -->
<p>Date: <input type="text" id="datepicker"></p>
</div>
</main>
</div>
<!-- jQueryUI scripts -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
$( "#datepicker" ).datepicker(
changeMonth: true,
changeYear: true
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您的示例运行良好，样式链接中仅缺少 https:：
<!-- jQueryUI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
【讨论】：
【参考方案2】：我遇到了同样的问题，我的解决方法是在文档末尾删除 jQuery 的第二个包含。 jQuery 在标头中使用 app.js 加载，第二个包含会覆盖第一个包含并导致问题。
【讨论】：
【参考方案3】：如果您在本地运行，则需要下载或包含带有 http 的 jquery-ui.css，类似于
<!-- jQueryUI CSS -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
当您在没有 http:// 的情况下在本地运行时，它会将 url 转换为 file://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css 之类的东西
【讨论】：
【参考方案4】：我用这个……希望对你有帮助。
<!-- jQueryUI scripts -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
$( "#datepicker" ).datepicker(
dateFormat: 'dd/mm/yy',
dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
monthNames:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
nextText: 'Próximo',
prevText: 'Anterior'
);
);
</script>
【讨论】：
以上是关于jQueryUI 日期选择器不起作用的主要内容，如果未能解决你的问题，请参考以下文章