`format` in `Tick.count.down` gives error when including `Y` & `M`

deadcoder0904 commented 4 years ago

I'm playing around with tick so I cloned this repo.

Created a duplicate of example/index.html, named it example/index2.html & here's my HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Tick Example Preset</title>

        <link rel="stylesheet" href="../dist/core/tick.core.min.css" />
        <link rel="stylesheet" href="../dist/view-swap/tick.view.swap.min.css" />
    </head>
    <body>
        <style>
            .tick {
                font-size: 2rem;
            }
        </style>

        <p>Countdown from a date - How many days till 2021?</p>
        <div class="tick" data-did-init="startDateCountdown">
            <span data-view="text"></span>
        </div>

        <script>
            function startDateCountdown(tick) {
                var counter = Tick.count.down('2021', {
                    format: ['Y', 'M', 'd', 'h', 'm', 's'],
                })
                counter.onupdate = function (value) {
                    tick.value = value
                }
                counter.onended = function () {}
            }
        </script>

        <!-- END OF TICK EXAMPLE PRESET -->

        <script src="../dist/view-swap/tick.view.swap.global.min.js"></script>
        <script src="../dist/core/tick.core.kickstart.min.js"></script>
    </body>
</html>

The relevant parts:

<p>Countdown from a date - How many days till 2021?</p>
<div class="tick" data-did-init="startDateCountdown">
    <span data-view="text"></span>
</div>

<script>
    function startDateCountdown(tick) {
        var counter = Tick.count.down('2021', {
            format: ['Y', 'M', 'd', 'h', 'm', 's'],
        })
        counter.onupdate = function (value) {
            tick.value = value
        }
        counter.onended = function () {}
    }
</script>

This should work as expected but displays the following instead:

tick

If I remove Y & M from format, it works. If I make the year 3021, it still throws error.

rikschennink commented 4 years ago

Please create a test case on codesandbox.io, happy to take a look

deadcoder0904 commented 4 years ago

Hey @rikschennink I tried opening it in codesandbox.io but it codesandbox currently doesn't load HTML files so I created a feature request there https://github.com/codesandbox/codesandbox-client/issues/4172

If you copy-paste the above HTML in a new file inside example folder like example/index2.html & open it, you'll have a repro.

Otherwise if you can publish to NPM, I can create a new sandbox for the test usecase :)

rikschennink commented 4 years ago

@deadcoder0904 npm: https://www.npmjs.com/package/@pqina/tick

deadcoder0904 commented 4 years ago

Here's a Codesandbox demonstrating the error stated: https://codesandbox.io/s/react-flip-countdown-timer-8tin3?file=/src/WorkingFlipDate.js

Check the last counter displaying lots of NaNs. If you remove "Y", "M" from the format, it'll work.

Try changing

const counter = Tick.count.down(value, {
   format: ["Y", "M", "d", "h", "m", "s"]
});

to

const counter = Tick.count.down(value, {
   format: ["d", "h", "m", "s"]
});

to make it work :)

rikschennink commented 4 years ago

You need to use lowercase Y

const counter = Tick.count.down(value, {
      //format: ["Y", "M", "d", "h", "m", "s"]
      format: ['y','M','d','h','m','s']
    });

deadcoder0904 commented 4 years ago

Whoops, that did the trick 😂

The docs need to updated :)

pqina / tick

`format` in `Tick.count.down` gives error when including `Y` & `M` #2