標籤：targe putty 參考 nat https function jquery ui htm bootstrap
1. Html5 native DatePicker和Bootstrap DatePicker
支援Html5 native DatePicker的瀏覽器有：Chrome, Opera 11+, Opera Mobile, and iOS 5+，參考http://caniuse.com/#feat=input-datetime
Bootstrap、JQuery UI都提供DatePicker組件，本文以Bootstrap為例，https://bootstrap-datepicker.readthedocs.io/en/latest/
後端對於DateTime類型欄位在自動產生的前端代碼可能會使用如下格式，在支援Html5 native DatePicker的瀏覽器如Chrome中使用Bootstrap DatePicker時，這會自動使用瀏覽器內建支援的Html5 DatePicker：
<input type="date" />
如果同時使用Bootstrap DatePicker，則會同時出現Html5 native DatePicker和Bootstrap DatePicker：
<script> $(document).ready(function () { //$(‘.datepicker‘).datepicker({format: ‘mm/dd/yyyy‘}); $(‘#conflic‘).datepicker({format: ‘mm/dd/yyyy‘}); }); </script> <P><form >Both Html5 DatePicker and Bootstrap datepicker used, which cause conflics.<br/><input type="date" class="datepicker" id="conflic" /> </form></P>
衝突如第二個輸入框所示。
2. 問題解決
把input HTML元素的type屬性改成text即可禁用Html5 native DatePicker，使用JQuery選取器修改元素的type屬性，this這裡是一個input元素，datepicker()先使其附加Bootstrap Datepicker組件，然後attr()修改掉type屬性：
$(this).datepicker().attr(‘type‘, ‘text‘);
禁用Html5 native DatePicker時，先用Modernizr檢測瀏覽器是否支援此項功能。Modernizr是檢測瀏覽器的Html5和CSS的feature支援狀況的Javascript庫。
Modernizr.inputtypes[‘date‘]
3. 完整測試代碼
代碼中對於Bootstrap、JQuery、Modernizr全部使用CDN提供的連結。
<html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Bootstrap and Html5 DatePicker</title> <!-- Modernizr CDN--> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> <!-- JQuery CDN--> <script src="https://code.jquery.com/jquery-3.2.0.js"></script> <!-- Bootstrap and DatePicker CDN--> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.standalone.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" charset="UTF-8"></script> <script> $(document).ready(function () { //$(‘.datepicker‘).datepicker({format: ‘mm/dd/yyyy‘}); // 將Bootstrap DatePicker附加到id為conflic的input元素上 $(‘#conflic‘).datepicker({format: ‘mm/dd/yyyy‘}); }); $(function() { // 這段代碼在支援Html5 native DatePicker的瀏覽器如Chrome不會運行 if (!Modernizr.inputtypes[‘date‘]) { $(‘input[type=date]‘).each(function(){ //alert($(this).attr(‘id‘)); // 如果當前元素的id不是conflic則附加Bootstrap DatePicker if ($(this).attr(‘id‘) != ‘conflic‘) $(this).datepicker(); }); alert("Bootstrap DatePicker used for the first input field."); } }); function removeHtml5DatePicker() { if (Modernizr.inputtypes[‘date‘]) { $(‘input[type=date]‘).each(function(){ if ($(this).attr(‘id‘) != ‘conflic‘) { //alert($(this).attr(‘id‘)); // 如果當前元素的id不是conflic則附加Bootstrap DatePicker並修改type的屬性為text $(this).datepicker().attr(‘type‘, ‘text‘); } }); } else alert("No Html5 DatePicker Used."); } </script> </head><body><P>Html5 DatePicker used within Chrome and Bootstrap DatePicker used within Firefox.<br/><input type="date" /> <a href="javascript:removeHtml5DatePicker();">Remove Html5 DatePicker</a></P><P><form >Both Html5 DatePicker and Bootstrap datepicker used, which cause conflics.<br/><input type="date" class="datepicker" id="conflic" /> </form></P></body></html>
4.
為你唱這首歌 沒有什麼風格它僅僅代表著 我想給你快樂為你解凍冰河 為你做一隻撲火的飛蛾沒有什麼事情是不值得為你唱這首歌 沒有什麼風格它僅僅代表著 我希望你快樂為你輾轉反側 為你放棄世界有何不可
Html5 native DatePicker和Bootstrap DatePicker的衝突問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
