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

我該怎么做才能解決這個問題？

UPDATE

以下是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”和jquery ui日期選擇器沖突

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> 

試試這個

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> ，而不是wrap <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> 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問題的完整和最終答案答案：

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