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 库? &lt;script type="text/javascript" src=".../jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src=".../jquery-1.9.1.js"&gt;&lt;/script&gt; 【参考方案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>

使用(地址&lt;input&gt;,而不是包装&lt;div&gt;)调用日期选择器

$(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;

【讨论】:

以上是关于jQuery ui datepicker 在 Firefox 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

jQuery datepicker - 在初始化后更改 .ui-datepicker-calendar 的显示

将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用

Rails,如何在特定页面上显示 jquery-ui-datepicker 日历?

使用 jquery-ui/datepicker 的内存泄漏

jquery UI datepicker汉化

jquery ui datepicker字体大小很大