jQuery ui datepicker在Firefox中不起作用

Question

这是我的日期选择器，它在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>

Answer 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>

您需要将datepicker应用于类型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>

Answer 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选择器绑定你的datepicker，如：

$('#filter-date').datepicker();

PS：我建议您不要使用type="date"，否则Chrome会将日期选择器呈现两次（其行为和插件）。

Answer 3

你使用了错误的选择器，它应该是$('#divDatePicker').datepicker();，直接输入而不是父。

Answer 4

尝试使用以下内容：

$(document).ready(function() {
    <?php if($_REQUEST["date"]){ ?>
    $('.datepicker').datepicker( "setDate", "<?php echo date('Y-m-d', strtotime($_REQUEST['date']));?>" );
    <?php }?>
});

Answer 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

Answer 6

您必须为输入分配'.datepicker'班级名称

Answer 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

Answer 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>

调用datepicker（地址<input>，而不是包裹<div>）

$(document).ready(function() {
    $('#filter-date').datepicker();
});

Answer 9

由于分配给日期选择器ui的z-index，我在某些浏览器中遇到了类似的问题。我使用了如下所示的工作来完成这项工作。

    $(".datepicker input").datepicker({ dateFormat: "yy-mm-dd",beforeShow: function() {
        setTimeout(function(){ $('.ui-datepicker').css('z-index', 99999999);},0);
    }});

但在此之前，请在mozilla中使用inspect元素，以确保在某个dom中添加了带有.ui-datepicker类的元素。

Answer 10

你可以在Mozilla的情况下使用jQuery日期选择器：使用$ .browser.mozilla检查浏览器，但它在jQuery＆gt; 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>

Answer 11

这是使用html5在Firefox中的Datepicker问题的完整和最终答案 答：

＆＃13;

＆＃13;

<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>

＆＃13;

<input type="date" name="event_date" required/>

＆＃13;

＆＃13;

＆＃13;