Laravel中jQuery Datepicker图标加载及默认提示问题求助
解决jQuery Datepicker的两个问题
先给你修正后的完整可运行代码:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <body> <div style="display:table-cell;width:50%"> <input class="date_picker_icon" name="ddl_date" placeholder="dd/mm/yy"> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { let field = $("[name='ddl_date']"); field.datepicker({ changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', onSelect: function() { $(this).removeAttr('placeholder'); } }); }); </script> </body> </html>
问题1:切换月份时显示空白而非图标
原代码里有两个核心问题导致这个异常:
- 初始化了页面不存在的
#datepicker元素,无效的初始化会引发脚本冲突,破坏组件渲染逻辑 - 对同一个输入框重复调用
datepicker()和datepicker('option', ...),多次初始化会打乱组件的正常状态
解决方式:
- 删除针对
#datepicker的无效代码 - 只对目标输入框做一次完整初始化,把
changeMonth、changeYear等配置统一写在初始化参数里
问题2:输入框默认显示'dd/mm/yy'提示
直接给input标签添加placeholder="dd/mm/yy"属性即可,同时在选择日期后清空该属性,避免提示文本和选中日期重叠:
- 在HTML的input标签中加入
placeholder属性实现默认提示 - 在datepicker的
onSelect回调中移除placeholder,保证界面整洁
另外注意:你设置的dateFormat: 'yy-mm-dd'是后台存储常用格式,和前端提示的dd/mm/yy不冲突,用户选完日期后会自动按配置格式填充输入框。
内容的提问来源于stack exchange,提问作者RA.IBOY
相关产品推荐
相关产品推荐

