jQuery ui datepicker 在 Firefox 中不起作用答案

【问题标题】：jQuery ui datepicker not working in FirefoxjQuery ui datepicker 在 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($) { }); 中
这可以回答你的问题stackoverflow.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>

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案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

另请参阅此 stackoverflow 帖子 Chrome type="date" and jquery ui date picker clashing

【讨论】：

【解决方案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>

&lt;input type="date" name="event_date" required/&gt;

【讨论】：