jQuery UI的日期選擇在Firefox中不工作

這裏是我的日期選擇器未在FirefoxjQuery UI的日期選擇在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

這裏的火狐如何呈現它。

enter image description here

另一個更新

下面是我使用的腳本：

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

來源

2013-10-22 Anon

那麼你必須給輸入的類名= datepicker。其次，我不知道這是否只是不完整的代碼，但你也需要在腳本標籤以及'jQuery（document）.ready（function（$） { }）;' – Chitowns24

這可以回答你的問題http://stackoverflow.com/questions/18382788/js-jquery-typeerror-jquery-datepicker-is-not-a-function – Bazinga777

更改名稱= datepicker不會幫助，因爲jQuery的目標是類而不是名稱 – Bazinga777

我的事實，已包含正確的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渲染兩次（它的行爲和插件）。

來源

2013-10-22 07:31:54

兩次會使用id =「filter-date」會引起衝突嗎？ – Bazinga777

正如我從代碼中看到的輸入元素是在一個條件中創建的，所以只有一個元素在時間上將存在 –

哦謝謝，我沒有想到關於php代碼部分 – Bazinga777

這裏是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(); 
});

來源

2013-10-26 09:34:23 Reeno

嘿，它仍然無法在Firefox中工作>檢查我的更新並查看屏幕快照。 – Anon

請用相關代碼創建一個http://jsfiddle.net/（不含PHP）。或者看看控制檯（在Firefox中按F12） – Reeno

這裏是小提琴：http://jsfiddle.net/paulie/YWVGj/ – Anon

如果使用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

來源

2013-10-26 13:30:52

嘗試使用這樣的：

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

來源

2013-10-29 10:12:47

保利，你應該使用這個腳本：

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

來源

2013-10-30 09:24:42

這不是我的答案相同嗎？ –

@IvinvinDomininakaEdward關鍵的區別是在'$中包含'$ .datepicker'附件。準備好「的調用 - 沒有那麼'保證'你的腳本將會運行*在'＃filter-date'元素已經在DOM –

@BrianNorth中創建了我不這麼認爲，主要問題是日期選擇器我沒有正確連接（如我的答案），我們沒有真正的代碼，所以我們不知道它已經在dom準備好了;其次是類型=日期（作爲我的答案）爲什麼在Chrome上工作的原因 –

只是嘗試

$('.datepicker input').datepicker();

如果你想OT使用jQuery寫

<input id="filter-date" size="16" type="text" />

如果使用類型= 「日期」會造成混亂。

使這一目標股利

DEMO

內輸入同樣看到這個StackOverflow的發佈 Chrome type="date" and jquery ui date picker clashing

來源

2013-10-31 06:03:20 dev

您必須分配'.datepicker'類名來輸入

來源

2013-10-31 12:04:30

您使用了錯誤的選擇，它應該是$('#divDatePicker').datepicker();，直接輸入不是父項。

來源

2013-11-01 02:25:33 user2934760

由於分配給日期選擇器UI的z-index，我在某些瀏覽器中遇到類似的問題。我使用瞭如下所示的工作來完成這項工作。

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

但在此之前，請使用檢查元素在Mozilla，以確保帶班的.ui-日期選擇器的元素在DOM添加的地方。

來源

2013-11-01 17:01:20 allupaku

我試過了，但沒有奏效。在檢查Firefox中的元素時，我可以看到class = hasDatepicker用於輸入，但它仍然沒有出現。我該如何檢查：「類的.ui-datepicker元素添加到dom的某處？」 – Anon

根據瀏覽器的不同，您可以搜索課程名稱。在safari檢查元素中，按下Command + F並鍵入ui-datepicker，它將爲您提供該類的所有元素。通常它會在輸入元素之後或結束標記之前添加。在任何情況下，獲取hasDatepicker類的輸入元素，意味着查詢ui顯示，並且hasDatepicker的功能類似於查詢ui隱藏元素的條件。查看這些截圖 [鏈接]（http://grab.by/rHKe） [鏈接]（http://grab.by/rHKc） @Paulie – allupaku

你可以在Mozilla的情況下，用戶jQuery的日期選擇器：使用$ .browser.mozilla檢查瀏覽器，但它不會在jQuery的> 1.9工作，所以你必須使用jQuery的遷移，如下圖所示：

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

來源

2015-02-06 05:19:05

這是完全和使用HTML5 答案最終的答案對於您的日期選擇問題在Firefox：

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

來源

2015-09-17 12:16:12

jQuery UI的日期選擇在Firefox中不工作

回答

相關問題