The Javascript countdown feature may experience issues on Safari and IE browsers

Why does this function work in Chrome, but not on IE or Safari?

function countdown(){
    var dDay = new Date().getUTCDate() + 1;
    var dMonth = new Date().getUTCMonth() + 1;
    var dYear = new Date().getUTCFullYear();
    var BigDay = new Date(dYear+ ", " +dMonth+ ", " +dDay+ ",00:00:00");
    var msPerDay = 24 * 60 * 60 * 1000;
    var today = new Date();
            var timeLeft = (BigDay.getTime() - today.getTime());

            var e_daysLeft = timeLeft / msPerDay;
            var daysLeft = Math.floor(e_daysLeft);

            var e_hrsLeft = (e_daysLeft - daysLeft)*24;
            var hrsLeft = Math.floor(e_hrsLeft);

            var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
            var minsLeft = Math.floor(e_minsLeft);

            var e_secsLeft = (e_minsLeft - minsLeft)*60;
            var secsLeft = Math.floor(e_secsLeft);
            if(daysLeft.toString().length === 1){
              daysLeft = "0"+daysLeft;
            } 
            if(hrsLeft.toString().length === 1){
              hrsLeft = "0"+hrsLeft;
            } 
            if(minsLeft.toString().length === 1){
              minsLeft = "0"+minsLeft;
            } 
            if(secsLeft.toString().length === 1){
              secsLeft = "0"+secsLeft;
            } 

            timeString = daysLeft + ":" + hrsLeft + ":" + minsLeft + ":" + secsLeft;
            return timeString;     
    }

This code snippet is used to display the countdown:

window.setInterval(function(){
           $('#countdown').html("Time left: "+ countdown());
        }, 1000);

Output in Chrome:

Time left: 00:01:55:15

However, in IE and Safari, I get:

Time left: NaN:NaN:NaN:NaN

Answer №1

It appears that the issue lies in creating an invalid date object within the following code:

var BigDay = new Date(dYear+ ", " +dMonth+ ", " +dDay+ ",00:00:00");

For more information, refer to the documentation at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

The representation of a month is as follows:

Integer value representing the month from 0 for January to 11 for December.

If you only need to add a day to today's date, consider updating your code like this:

var BigDay = new Date();
BigDay.setDate(BigDay.getDate() + 1);
BigDay.setHours(0, 0, 0, 0);

Check out the demo here: http://jsfiddle.net/IrvinDominin/HgUhq/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Data string not being converted correctly to date format

Here is a table I am currently working with: ID DateColumn 1 3/7/2019 5:29:38 AM 2 3/8/2019 5:28:38 AM 3 3/7/2019 5:30:38 AM 4 3/7/2019 5:31:38 AM The date column in this table is being processed as a string when bound to the grid. To ...

What could be the reason for the issue with Backbone.js and modal window breaking on IE9?

I have a basic contact management table in backbone.js that utilizes twitter's bootstrap-modal to display the form input. While everything works smoothly in Firefox and Chrome, I am encountering issues with the modal not appearing in IE 9. Additional ...

When using a Higher-Order Component in React JS, make sure that the function is not executed if the component's state is

Apologies if the question title is unclear—I'm struggling to come up with a suitable sentence. Recently, I completed learning React JS and decided to practice by building an app. The app consists of a login form that displays an alert and clears th ...

Error message encountered in PHP due to an undefined index

My goal is to add items from a form to a table named products. The form layout can be seen here: https://i.stack.imgur.com/f9e08.png The "Add more suppliers: +" link adds a new row to the form when clicked. The corresponding script for this action is as ...

What is the proper way to send properties to a component that is enclosed within a Higher Order Component?

I have a situation where I need to pass props from the index page to a component wrapped inside two higher-order components. Despite fetching the data successfully in getStaticProps, when passing the props to the About component and console logging them in ...

Utilizing Jquery for ASP.NET, an AJAX call dynamically populates a list

My user interface is designed to populate a select dropdown menu using data retrieved from a database through an AJAX call. The C# web method responsible for this operation is structured as follows: private static List<List<string>> componentT ...

Utilizing Zustand state management with Next.js 13.4.12 for routing and server-side rendering, enhanced with local storage

My Zustand store code looks like this: import create from "zustand"; import { persist } from "zustand/middleware"; const useProjectStore = create( persist( (set) => ({ selectedProject: null, setSelectedProject: (pr ...

A step-by-step guide on accessing an API to check the status updates of ongoing API calls

I'm facing an issue with making two API calls concurrently. The goal is to have call X executed first, while Y should run in parallel and keep calling itself recursively until the X API resolves. Both calls should be initiated immediately upon clickin ...

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

Interactive tabs displaying real-time information

My goal is to create tabbed content based on a tutorial I found online. Following the tutorial step by step works perfectly, but now I want to take it a step further and make the tabs dynamic. The issue arises when some tabs have no content, so I need to g ...

Invoking an *.aspx method from an external HTML file

Greetings, I am a newcomer to the world of web application development. I have successfully created an *aspx page that communicates with a webservice through a method returning a string. My next goal is to invoke this aspx method from a remote HTML 5 page ...

Include a "remember me" feature in the Stripe form

I am currently working on an exciting project using Angular 6. Within my website, I have decided to integrate the Stripe payment system. However, I would like to incorporate a unique and default "remember me" feature offered by Stripe. <div id="card-e ...

Deactivate radio buttons when the table value is greater than or equal to one

On my webpage, there are radio buttons for 'Yes' and 'No'. When 'Yes' is selected, a hidden <div> appears where users can fill in fields. Upon clicking the 'Add' button, the information is displayed in a table. ...

Using Twitter bootstrap with Node.js and Express framework

Is it possible to integrate Twitter Bootstrap with Node.js and Express? I understand that I need to place CSS and Javascript files in the ./public directory (if it's set as default). However, when trying to implement Twitter Bootstrap on Node.js and ...

Can anyone share best practices for writing unit tests for $scope.broadcast and $scope.$on in Jasmine?

Greetings, I am new to the AngularJs/NodeJs realm, so please bear with me if this question seems basic to some. Essentially, I have two controllers where the first controller broadcasts an 'Id' and the second controller retrieves that Id using $ ...

Adjusting the size of div content without changing its dimensions

I'm in search of a solution for resizing the contents within a fixed width and height div. Currently, my div looks like this: <div id="editor_preview" style="width:360px !important; color:gray; ...

How can I implement SSO and Auth for multiple sub-domains using PHP?

Is it possible to implement SSO using PHP between two different sub-domains (e.g. parappawithfries.com and *.parappawithfries.com)? My current configuration is causing issues as I use Cloudflare to direct my subs to a different 000webhost website. While I ...

Creating a View-Model for a header bar: A step-by-step guide

I am looking to develop a View-Model for the header bar using WebStorm, TypeScript, and Aurelia. In my directory, I have a file named header-bar.html with the following code: <template bindable="router"> <require from="_controls/clock"></ ...

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

Interested in learning how to redirect to a different page using vanilla JavaScript after submitting an HTML form with a Django backend?

Recently delving into Django, I encountered a challenge of linking a js file to my HTML form page and saving the form data before moving on to the next screen. My aim was to incorporate a feature where users can click a picture and POST it along with their ...