jQuery ui 日期选择器在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19511384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery ui datepicker not working in Firefox
提问by Anon
Here's my datepicker which isn't working in Firefox
这是我的日期选择器，它在 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();
What can I do to fix this?
我能做些什么来解决这个问题？
UPDATE
更新
Here's how Firefox renders it.
以下是 Firefox 呈现它的方式。
ANOTHER UPDATE
另一个更新
Here are the scripts that I'm using:
以下是我正在使用的脚本：
<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>
回答by Premdeep Mohanty
Paulie, You should use this script:
保利，你应该使用这个脚本：
<script type="text/javascript" src="Include/JS/jquery-ui-min.js"></script>
And
和
<script type="text/javascript" >
$(document).ready(function () {
$("#filter-date").datepicker({
dateFormat: 'yy/mm/dd'
});
});
</script>
You need to apply datepicker to an input control of type text.
So try this my making these changes in your code.
您需要将 datepicker 应用于 type 的输入控件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>
回答by Irvin Dominin
I start from the fact that you have included right jQuery and jQuery UI in your page.
我从您在页面中包含正确的 jQuery 和 jQuery UI 的事实开始。
Now your are attaching the datepicker with this selector:
现在您将使用此选择器附加日期选择器：
$('.datepicker').datepicker();
you must give your element the datepickerclass eg:
你必须给你的元素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 } ?>
or bind your datepicker with id selector like:
或将您的日期选择器与 id 选择器绑定，例如：
$('#filter-date').datepicker();
PS: I suggest you to don't use type="date"or Chrome will render the datepicker twice (its behaviour and plugin).
PS：我建议你不要使用，type="date"否则 Chrome 会渲染 datepicker 两次（它的行为和插件）。
回答by user2934760
You use a wrong selector, it's should be $('#divDatePicker').datepicker();, direct to the input not parent.
您使用了错误的选择器，应该是$('#divDatePicker').datepicker();，直接输入而不是父级。
回答by Rahul Gupta
Try using something like this:
尝试使用这样的东西：
$(document).ready(function() {
<?php if($_REQUEST["date"]){ ?>
$('.datepicker').datepicker( "setDate", "<?php echo date('Y-m-d', strtotime($_REQUEST['date']));?>" );
<?php }?>
});
回答by Dev
Just Try
你试一试
$('.datepicker input').datepicker();
If you want ot use jquery write
如果你想使用 jquery 写
<input id="filter-date" size="16" type="text" />
if you use type="date" it will create confusion.
如果您使用 type="date" 它会造成混乱。
So that this targets input inside the div
以便此目标在 div 内输入
Also see this stackoverflow post Chrome type="date" and jquery ui date picker clashing
另请参阅此 stackoverflow 帖子 Chrome type="date" 和 jquery ui 日期选择器冲突
回答by Hamid Bahmanabady
You must assign '.datepicker'class name to inputs
您必须'.datepicker'为输入分配类名
回答by Ishan Jain
If you use bootstrapdate picker than -
如果您使用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>
You should try to bind date-picker with element ID:
您应该尝试将日期选择器与 element 绑定ID：
$('#divDatePicker').datepicker();
And also write your code in script block:
并在脚本块中编写您的代码：
<script type="text/javascript">
$(document).ready(function() {
$('.datepicker').datepicker();
});
</script>
or
或者
<script type="text/javascript">
$(document).ready(function() {
$('#divDatePicker').datepicker();
});
</script>
回答by Reeno
Here's a shorter version of the HTML:
这是 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>
Call the datepicker with (address the <input>, not the wrapping <div>)
使用（寻址<input>，而不是包装<div>）调用日期选择器
$(document).ready(function() {
$('#filter-date').datepicker();
});
回答by Althaf M
I have faced similar issue in some of the browsers because of the z-index which is assigned to the date picker ui. I used a work around like shown below which did the job.
由于分配给日期选择器 ui 的 z-index，我在某些浏览器中遇到了类似的问题。我使用了如下所示的解决方法，它完成了这项工作。
$(".datepicker input").datepicker({ dateFormat: "yy-mm-dd",beforeShow: function() {
setTimeout(function(){ $('.ui-datepicker').css('z-index', 99999999);},0);
}});
But before that, please use inspect element in mozilla to make sure the element with class .ui-datepicker is added in the dom somewhere.
但在此之前，请使用 mozilla 中的 inspect 元素来确保类 .ui-datepicker 的元素添加到 dom 中的某处。
回答by Harmeet Singh
You can user jQuery date picker in case of Mozilla: Check the browser using $.browser.mozilla but it will not work in jQuery>1.9, so you have to use jQuery Migration as shown below:
在 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>
