Home > Developer > Web Develop
1. HTML5 native DatePicker and Bootstrap DatePicker
Browsers that support HTML5 native DatePicker are: Chrome, opera 11+, opera Mobile, and IOS 5+, reference http://caniuse.com/#feat =input-datetime
Bootstrap, JQuery UI provides DatePicker components, this article takes Bootstrap as an example, https://bootstrap-datepicker.readthedocs.io/en/latest/
Backend for datetime type fields in auto-generated front-end code may use the following format when using bootstrap DatePicker in browsers that support HTML5 native DatePicker, such as Chrome This will automatically use the browser's built-in support for HTML5 DatePicker:
<type= "date"/>
If you use bootstrap DatePicker at the same time, HTML5 native DatePicker and Bootstrap DatePicker appear at the same time:
<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/><inputtype= "Date"class= "DatePicker"ID= "Conflic" /> </form></P>
A conflict is shown in the second input box.
2. Problem solving
Change the Type property of the input HTML element to text to disable HTML5 native DatePicker, using the jquery selector to modify the element's type attribute, this is an INPUT element, DatePicker () First make it attach the bootstrap DatePicker component, and then attr () modify the Type property:
$ (this). DatePicker (). attr (' type ', ' text ');
When disabling HTML5 native DatePicker, use MODERNIZR to detect if the browser supports this feature. Modernizr is a JavaScript library that detects the status of browser HTML5 and CSS feature support.
modernizr.inputtypes[' Date ']
3. Complete test Code
The links provided in the code for bootstrap, JQuery, Modernizr all use CDN.
<HTML><Head> <MetaCharSet= "Utf-8" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <title>Test Bootstrap and HTML5 DatePicker</title> <!--MODERNIZR CDN - <Scriptsrc= "Https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></Script> <!--JQuery CDN - <Scriptsrc= "Https://code.jquery.com/jquery-3.2.0.js"></Script> <!--Bootstrap and DatePicker CDN - <Linkhref= "Https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"rel= "stylesheet"> <Linkhref= "Https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.css"rel= "stylesheet"> <Linkhref= "Https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css"rel= "stylesheet"> <Linkhref= "Https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.standalone.css"rel= "stylesheet"> <Scriptsrc= "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 '}); //Append bootstrap DatePicker to INPUT element with ID conflic $('#conflic'). DatePicker ({format:'mm/dd/yyyy'}); }); $(function() { //This code is not running on browsers that support HTML5 native datepicker such as Chrome if (!modernizr.inputtypes['Date']) { $('Input[type=date]'). each (function(){ //Alert ($ (this). attr (' id ')); //Append bootstrap if the ID of the current element is not conflic DatePicker if ($( This). attr ('ID') != 'conflic') $( This). DatePicker (); }); Alert ("Bootstrap DatePicker used for the first input field."); } }); functionRemovehtml5datepicker () {if(modernizr.inputtypes['Date']) { $('Input[type=date]'). each (function(){ if ($( This). attr ('ID') != 'conflic') { //Alert ($ (this). attr (' id ')); //If the ID of the current element is not conflic, append bootstrap DatePicker and modify the type's property to text $( This). DatePicker (). attr ('type', 'text'); } }); } ElseAlert ("No Html5 DatePicker used."); } </Script> </Head><Body><P>Html5 DatePicker used within Chrome and Bootstrap DatePicker used within Firefox.<BR/><inputtype= "Date" /> <ahref= "Javascript:removehtml5datepicker ();">Remove HTML5 DatePicker</a></P><P><form>Both Html5 DatePicker and Bootstrap DatePicker used, which cause conflics.<BR/><inputtype= "Date"class= "DatePicker"ID= "Conflic" /> </form></P></Body></HTML>
4.
Sing this song for you there's no style it just means I want to give you the pleasure to thaw the glacier for you to make a fire moth nothing is not worth singing for you this song no style it just means I want you to be happy for you tossing and turning for you to give up the world why not
The conflict of HTML5 native DatePicker and 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
