jQuery ui datepicker 在 Firefox 中不起作用
Posted
技术标签:
【中文标题】jQuery ui datepicker 在 Firefox 中不起作用【英文标题】:jQuery ui datepicker not working in Firefox 【发布时间】:2013-10-30 22:34:26 【问题描述】:这是我的日期选择器,它在 Firefox 中不起作用
<div class="input-append datepicker">
<?php if($_REQUEST["date"]) ?>
<input id="filter-date" size="16" type="date" value="<?php echo $_REQUEST["date"];?>"/>
<?php else ?>
<input id="filter-date" size="16" type="date" value="<?php echo date('Y-m-d');?>"/>
<?php ?>
</div>
$('.datepicker').datepicker();
我能做些什么来解决这个问题?
更新
这是 Firefox 的呈现方式。
另一个更新
这是我正在使用的脚本:
<script type="text/javascript" src=".../lodash.min.js"></script>
<script type="text/javascript" src=".../jquery.min.js"></script>
<script type="text/javascript" src=".../jquery-1.9.1.js"></script>
<script type="text/javascript" src=".../jquery-ui.js"></script>
<script type="text/javascript" src=".../jquery.dataTables.min.js"></script>
<script type="text/javascript" src=".../DT_bootstrap.js"></script>
<script type="text/javascript" src=".../datatables.responsive.js"></script>
<script type="text/javascript" src=".../dom-bootstrap.js"></script>
【问题讨论】:
那么你必须给输入类名 = 日期选择器。其次,我不知道这是否只是不完整的代码,但您还需要将其包装在脚本标签以及jQuery(document).ready(function($) );
中
这可以回答你的问题***.com/questions/18382788/…
更改 name=datepicker 不会有帮助,因为 jQuery 的目标是类而不是名称
可能不相关,但您是否有任何理由加载(看起来像)两个版本的 jQuery 库? <script type="text/javascript" src=".../jquery.min.js"></script> <script type="text/javascript" src=".../jquery-1.9.1.js"></script>
【参考方案1】:
保利, 你应该使用这个脚本:
<script type="text/javascript" src="Include/JS/jquery-ui-min.js"></script>
和
<script type="text/javascript" >
$(document).ready(function ()
$("#filter-date").datepicker(
dateFormat: 'yy/mm/dd'
);
);
</script>
您需要将日期选择器应用于text
类型的输入控件。
因此,请尝试在您的代码中进行这些更改。
<div class="input-append datepicker">
<?php if($_REQUEST["date"]) ?>
<input id="filter-date" size="16" type="text"
value="<?php echo $_REQUEST["date"];?>"/>
<?php else ?>
<input id="filter-date" size="16" type="text"
value="<?php echo date('Y-m-d');?>"/>
<?php ?>
</div>
【讨论】:
这和我的回答不一样? @IrvinDomininakaEdward 关键区别在于在$.ready
调用中包含$.datepicker
附件 - 没有它,您的脚本将在之后运行 @987654327 @ 元素已在 DOM 中创建
@BrianNorth 我不这么认为,主要问题是我没有正确附加日期选择器(作为我的回答),我们没有真正的代码,所以我们不知道尚未准备好在 dom 中运行它;其次是 type=date (作为我的回答)为什么在 chrome 上工作的原因
在 Firefox 中仍然无法使用。但它现在可以在 Chrome 中运行,而无需将类型设置为日期。【参考方案2】:
我从您在页面中包含正确的 jQuery 和 jQuery UI 的事实开始。
现在您正在使用此选择器附加日期选择器:
$('.datepicker').datepicker();
你必须给你的元素 datepicker
类例如:
<?php if($_REQUEST["date"]) ?>
<input id="filter-date" class="datepicker" size="16" type="text" value="<?php echo $_REQUEST["date"];?>"/>
<?php else ?>
<input id="filter-date" class="datepicker" size="16" type="text" value="<?php echo date('Y-m-d');?>"/>
<?php ?>
或将您的日期选择器与 id 选择器绑定,例如:
$('#filter-date').datepicker();
PS:我建议你不要使用type="date"
,否则 Chrome 会渲染 datepicker 两次(它的行为和插件)。
【讨论】:
两次使用 id="filter-date" 会导致冲突吗? 从代码中我可以看到,输入元素是在一个条件下创建的,所以一次只会存在一个元素 检查控制台是否有错误并提供您的 html 标记(不是 PHP)和 JS 代码【参考方案3】:你使用了错误的选择器,它应该是$('#divDatePicker').datepicker();
,直接指向输入而不是父级。
【讨论】:
【参考方案4】:尝试使用这样的东西:
$(document).ready(function()
<?php if($_REQUEST["date"]) ?>
$('.datepicker').datepicker( "setDate", "<?php echo date('Y-m-d', strtotime($_REQUEST['date']));?>" );
<?php ?>
);
【讨论】:
【参考方案5】:试一试
$('.datepicker input').datepicker();
如果你不想使用 jquery 写
<input id="filter-date" size="16" type="text" />
如果你使用 type="date" 会造成混乱。
这样这个目标就是 div 内的输入
DEMO
另请参阅此 *** 帖子 Chrome type="date" and jquery ui date picker ***ing
【讨论】:
【参考方案6】:您必须将 '.datepicker'
类名分配给输入
【讨论】:
【参考方案7】:如果您使用bootstrap
日期选择器而不是 -
<div id="divDatePicker" class="input-append datepicker">
<?php if($_REQUEST["date"]) ?>
<input id="filter-date" size="16" type="date" value="<?php echo $_REQUEST["date"];?>"/>
<?php else ?>
<input id="filter-date" size="16" type="date" value="<?php echo date('Y-m-d');?>"/>
<?php ?>
</div>
您应该尝试将日期选择器与元素 ID
绑定:
$('#divDatePicker').datepicker();
并在脚本块中编写您的代码:
<script type="text/javascript">
$(document).ready(function()
$('.datepicker').datepicker();
);
</script>
或
<script type="text/javascript">
$(document).ready(function()
$('#divDatePicker').datepicker();
);
</script>
Try This
【讨论】:
【参考方案8】:以下是 HTML 的简短版本:
<div class="input-append datepicker">
<input id="filter-date" size="16" type="date" value="<?php echo (isset($_REQUEST["date"]) ? $_REQUEST["date"] : date('Y-m-d')) ?>"/>
</div>
使用(地址<input>
,而不是包装<div>
)调用日期选择器
$(document).ready(function()
$('#filter-date').datepicker();
);
【讨论】:
嘿,在 Firefox 中仍然无法使用> 检查我的更新并查看屏幕截图。 请用相关代码创建一个jsfiddle.net(不带PHP)。或查看控制台(在 Firefox 中按 F12) 我添加了 jquery 和 jquery UI(在左侧),对我来说它在 Firefox 中运行良好:jsfiddle.net/5hEna 向我们展示您的完整页面(可能是其他一些脚本干扰了日期选择器)或在您的站点上按 F12 以加载控制台,重新加载页面并查看控制台上的输出。 好的,小提琴对我来说很完美,但是一旦我把它放到我的实际页面中,它就不起作用了。我认为我的脚本相互干扰。我无法向您显示我的页面,但让我添加我正在使用的脚本列表,看看您是否能找到问题。【参考方案9】:由于分配给日期选择器 ui 的 z-index,我在某些浏览器中遇到了类似的问题。我使用了如下所示的解决方法来完成这项工作。
$(".datepicker input").datepicker( dateFormat: "yy-mm-dd",beforeShow: function()
setTimeout(function() $('.ui-datepicker').css('z-index', 99999999);,0);
);
但在此之前,请在 mozilla 中使用检查元素以确保将具有类 .ui-datepicker 的元素添加到 dom 中的某处。
【讨论】:
我试过了,但没用。在 Firefox 中检查元素时,我可以看到 class=hasDatepicker 的输入,但它仍然没有出现。我该如何检查:“类 .ui-datepicker 的元素被添加到 dom 的某处?” 根据浏览器,您可以搜索类名。在 safari inspect element 中,按 Command + F 并输入 ui-datepicker,它将为您提供该类的所有元素。通常它会在输入元素之后或 【参考方案10】:你可以在Mozilla的情况下使用jQuery日期选择器:使用$.browser.mozilla检查浏览器但它在jQuery>1.9中不起作用,所以你必须使用jQuery Migration,如下所示:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
<script>
if ($.browser.mozilla)
if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
$(function ()
$(".datepicker").datepicker(
changeMonth: true,
changeYear: true,
yearRange: "1900:2015",
dateFormat: "yy-mm-dd",
defaultDate: '1900-01-01'
);
);
</script>
【讨论】:
【参考方案11】:这是 Firefox 中使用 html5 的 Datepicker 问题的完整和最终答案 答案:
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', types: 'date');
webshims.polyfill('forms forms-ext');
</script>
<input type="date" name="event_date" required/>
【讨论】:
以上是关于jQuery ui datepicker 在 Firefox 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
jQuery datepicker - 在初始化后更改 .ui-datepicker-calendar 的显示
将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用