JQuery browser compatibility issue on browser

Question

I am trying to make multiple counter and its working fine for me but on some browsers it says NAN invalid date. I have tested it on my android device (chrome and Samsung default browser) and it worked but I have tested it on iPhone (chrome and safari) it won't work. I am not sure what I did wrong in my code or may be its a compatibility issue which I am unable to fix it.

Here is my Fiddle https://jsfiddle.net/infohassan/v4p5o7mq/1/

Here is my JS

$(document).ready(function() {
    var dt = new Date();
    //Current Date
    $('#date-1').attr('data-date', moment(dt).format("MM.D.YYYY HH:mm"));
    // +2 Days
    var dt2 = new Date();
    var twoDays = dt2.setDate(dt2.getDate() + 2);
    $('#date-2').attr('data-date', moment(dt2).format("MM.D.YYYY HH:mm"));

    // +7 Days
    var dt3 = new Date();
    var twoDays = dt3.setDate(dt3.getDate() + 7);
    $('#date-3').attr('data-date', moment(dt3).format("MM.D.YYYY HH:mm"));

    $('.counter-sub').each(function(i, obj) {
        var counterDate = $('.counter-sub label').eq(i).attr("data-date");
        var countDownDate = new Date(counterDate).getTime();
        $('.counter-sub label').eq(i).html(moment(countDownDate).format("D.MM.YYYY HH:mm"));

        // Update the count down every 1 second
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            var getOnlyHours = Math.floor((distance / (1000 * 60 * 60)));
            var ShowTimer = days + " Day(s)";

            if (i == 2) {
                ShowTimer = ShowTimer;
            } else {
                ShowTimer = getOnlyHours + " Hours";
            }
            $('.counter-sub span').eq(i).html("Next to: " + ShowTimer);

            // If the count down is over, write some text 
            if (distance < 0) {
                //clearInterval(x);
                days = days * -1;
                hours = hours * -1;
                minutes = minutes * -1;
                seconds = seconds * -1;
                getOnlyHours = getOnlyHours * -1;

                ShowTimer = days + " Day(s)";
                if (i == 2) {
                    ShowTimer = ShowTimer;
                } else {
                    ShowTimer = getOnlyHours + " Hours";
                }
                $('.counter-sub span').eq(i).html("Over: " + ShowTimer);
            }
        }, 1000);
    });
});

Answer 1

It is not a jQuery compatibility issue, the date object is plain javascript. Any reason why you are trying to convert and reconvert the date back?

The below example should work in Safari.

While I didn't include it in the example below (it's a large dump of code), you can more easily loop over your elements targeting $(this), and data attributes need to be set using .attr(dataname, datavalue) and need to be fetched as follow: .data(dataname)

$(document).ready(function() {
    var dt = new Date();
    $('#date-1').attr('data-dateformat',dt);
    //Current Date
    $('#date-1').attr('data-date', moment(dt).format("MM.D.YYYY HH:mm"));
    // +2 Days
    var dt2 = new Date();
    var twoDays = dt2.setDate(dt2.getDate() + 2);
    $('#date-2').attr('data-date', moment(dt2).format("MM.D.YYYY HH:mm"));
    $('#date-2').attr('data-dateformat',dt2);

    // +7 Days
    var dt3 = new Date();
    var twoDays = dt3.setDate(dt3.getDate() + 7);
    $('#date-3').attr('data-date', moment(dt3).format("MM.D.YYYY HH:mm"));
    $('#date-3').attr('data-dateformat',dt3);

    $('.counter-sub').each(function(i, obj) {
        var counterDate = $('.counter-sub label').eq(i).data("dateformat");
        var countDownDate = new Date(counterDate).getTime();
        $('.counter-sub label').eq(i).html(moment(countDownDate).format("D.MM.YYYY HH:mm"));

        // Update the count down every 1 second
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            var getOnlyHours = Math.floor((distance / (1000 * 60 * 60)));
            var ShowTimer = days + " Day(s)";

            if (i == 2) {
                ShowTimer = ShowTimer;
            } else {
                ShowTimer = getOnlyHours + " Hours";
            }
            $('.counter-sub span').eq(i).html("Next to: " + ShowTimer);

            // If the count down is over, write some text 
            if (distance < 0) {
                //clearInterval(x);
                days = days * -1;
                hours = hours * -1;
                minutes = minutes * -1;
                seconds = seconds * -1;
                getOnlyHours = getOnlyHours * -1;

                ShowTimer = days + " Day(s)";
                if (i == 2) {
                    ShowTimer = ShowTimer;
                } else {
                    ShowTimer = getOnlyHours + " Hours";
                }
                $('.counter-sub span').eq(i).html("Over: " + ShowTimer);
            }
        }, 1000);
    });
});

.counter-div-main {
    background-color: white;
}

.counter-sub {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.counter-sub p {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 30px;
    padding: 5px 10px;
}

.counter-sub label,
.counter-sub span {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 30px;
    overflow: hidden;
    padding: 5px 10px;
}

.counter-sub span {
    background-color: #bfbfbf;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div class="row justify-content-md-center">
    <div class="col-xs-12 col-md-6 mt-4 counter-div-main">
        <!-- Counter Sub -->
        <div class="row">
            <div class="col-xs-12 counter-sub">
                <p><strong>Start:</strong></p>
                <label id="date-1"></label>
                <span></span>
            </div>
        </div>
        <!-- Counter Ends -->

        <!-- Counter Sub -->
        <div class="row">
            <div class="col-xs-12 counter-sub">
                <p><strong>Go to 1:</strong></p>
                <label id="date-2"></label>
                <span></span>
            </div>
        </div>
        <!-- Counter Ends -->

        <!-- Counter Sub -->
        <div class="row">
            <div class="col-xs-12 counter-sub">
                <p><strong>Go to 2:</strong></p>
                <label id="date-3"></label>
                <span></span>
            </div>
        </div>
        <!-- Counter Ends -->
    </div>
</div>

What is twoDays variable?