Bootstrap date and time in IE8 incompatible solution

Last Update:2017-01-13 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Bootstrap DateTimePicker plugin appears invalid under IE8, Error prompts Bootstrap-datetimepicker.js script does not support indexof () method

Solution: Add the following code to the front of the Bootstrap-datetimepicker.js/bootstrap-datetimepicker.min.js:

if (! ARRAY.PROTOTYPE.INDEXOF)
{
Array.prototype.indexOf = function (ELT/*, from*/)
{
var len = this.length >>> 0;

var from = number (Arguments[1]) | | 0;
From = (From < 0)
? Math.ceil (from)
: Math.floor (from);
if (from < 0)
from + = Len;

for (; from < Len; from++)
{
if (from &&
This[from] = = ELT)
return from;
}
return-1;
};
}

Here are a few additional

Here's how to make Bootstrap 3 compatible with IE8 browsers, as someone will ask me how to be compatible with IE6 IE7, please bypass Bsie (BOOTSTRAP2).

Bootstrap in the IE8 is certainly not as good as Chrome, Firefox, IE11 so perfect, some components do not guarantee full compatibility, or to hack. I don't talk about it here.

1. Use HTML5 Document Declaration
Use the zencoding user input html:5 and press the TAB key.

Xhtml
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<body>

</body>

2. Add META tags
The former defines the media query, which determines the IE version of this page.

Xhtml
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

3, the introduction of bootstrap documents
This step is very important, it depends on whether you refer to other Web site (CDN) bootstrap files or bootstrap files Local.
I put it here locally because it's simpler to deploy later.

Xhtml
<link rel= "stylesheet" href= "Bootstrap/css/bootstrap.min.css" >

4. Introduction of Respond.js and Html5.js
Respond.js (Github) is for media queries, description of the project: to be in the same domain as the file that requires media queries. Otherwise, the CDN deployment needs to change some of the options, and then again.

Html5shiv:html5.js (Google Code) (Github) is a browser "support" HTML5 tag that does not (fully) support HTML5.

Xhtml

Respond.js deployment of 4.1 CSS files on a CDN (or subdomain)
For more information, please see: https://github.com/scottjehl/Respond#cdnx-domain-setup

GitHub says this JS is a copy of your CSS file via Ajax. So you need a proxy page to request the file.

Need to upload some files, the steps are more complex, and the general public CDN Basically no one has the right to operate.

And then add the code.

Xhtml

<link href= "http://externalcdn.com/respond-proxy.html" id= "Respond-proxy" rel= "Respond-proxy"/>


<link href= "/path/to/respond.proxy.gif" id= "Respond-redirect" rel= "Respond-redirect"/>


<script src= "/path/to/respond.proxy.js" ></script>

5, add 1. X version of the jquery library
Jquery more than 2.0 will no longer support IE 6/7/8 these three heart-battering artifacts. So you want to use some of the plug-in effects in Bootstrap3, such as the modal pop-up dialog box controls. We need to add below 2.0, here I use the 1.10.2 jquery library.

Xhtml
<script src= "Http://libs.baidu.com/jquery/1.10.2/jquery.js" ></script> 6, summary
I am not a front-end engineer, just a fan, if there are errors also please criticize the advice. We learn from each other ~

I also did a BOOTSTRAP3 small project (name code query), it is this project let me summarize the above experience.

Mainly is to let respond.js effect, the key is to let bootstrap file and respond.js the same domain, different domains need to use CDN on the HTML to do Ajax.

The lazy code concludes as follows:

<!doctype html>
<meta charset= "UTF-8"
<meta Name= "Viewport" content= "Width=device-width, initial-scale=1"
<meta "http-equiv=" content = "Ie=edge"
<meta name= "author" content= "Jophy"/>//can be deleted
<title>ie8</title>
<link Rel= "stylesheet" href= "Bootstrap/css/bootstrap.min.css" "
<link rel=" stylesheet "href=" bootstrap/css/ Style.css ">//reference to

<script src= "http://libs.baidu.com/jquery/1.10.2/jquery.js" ></script>//reference as needed
<script src= "Bootstrap/js/bootstrap.min.js" ></SCRIPT>
<body> as needed;
</body>

The compatibility mode for Internet Explorer 9 and 8 is supported, and pure Internet Explorer 8 is not supported, however, many CSS3 properties and HTML5 elements-for example, rounded rectangles and projections-are definitely not supported

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More