首页 > 代码库 > Html5 native DatePicker和Bootstrap DatePicker的冲突问题
Html5 native DatePicker和Bootstrap DatePicker的冲突问题
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的冲突问题