ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.9k stars 3.89k forks source link

Negative time in amp-date-countdown #36287

Open jakerlton opened 2 years ago

jakerlton commented 2 years ago

Description

https://amp.dev/documentation/components/amp-date-countdown/ does not clarify what should happen for an amp-date-countdown time that has expired.

In our use case, we had a countdown until the start of October. Now that we are in October, the expectation was that the countdown date would show a value of 0. Instead, it gives the negative value of time since it expired, at the time the page loaded. Refreshing the page will change the value.

The date-count-up option looks like it's working properly as intended currently, so we may just need another option that can be set to have when-ended="stop" have the value return 0 after the timer has elapsed in the past.

Reproduction Steps

Using the AMP playground for amp-date-countdown: https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-date-countdown&format=websites&_gl=1*2cbo5p*_ga*YW1wLV9fMTBORjE2UzRUNXRGZDJSV1Z4S2c.

Add these amp-date-countdown elements that count down until the Y2K issue occurs and see if they behave as expected, and wonder how we should set a stopped clock at 0:

  <amp-date-countdown end-date="2000-01-01T00:00:00.000Z" layout="fixed-height" height="100">
    <template type="amp-mustache">
        Default:  {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2000_problem">Y2K</a>.
    </template>
  </amp-date-countdown>

  <amp-date-countdown end-date="2000-01-01T00:00:00.000Z" layout="fixed-height" height="100" when-ended="continue">
    <template type="amp-mustache">
        Continue:  {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2000_problem">Y2K</a>.
    </template>
  </amp-date-countdown>

  <amp-date-countdown end-date="2000-01-01T00:00:00.000Z" layout="fixed-height" height="100" when-ended="stop">
    <template type="amp-mustache">
        Stop:  {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2000_problem">Y2K</a>.
    </template>
  </amp-date-countdown>

  <amp-date-countdown data-count-up end-date="2000-01-01T00:00:00.000Z" layout="fixed-height" height="100">
    <template type="amp-mustache">
        data-count-up Default:  {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2000_problem">Y2K</a>.
    </template>
  </amp-date-countdown>

  <amp-date-countdown data-count-up end-date="2000-01-01T00:00:00.000Z" layout="fixed-height" height="100" when-ended="continue">
    <template type="amp-mustache">
        data-count-up Continue:  {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2000_problem">Y2K</a>.
    </template>
  </amp-date-countdown>

  <amp-date-countdown data-count-up end-date="2000-01-01T00:00:00.000Z" layout="fixed-height" height="100" when-ended="stop">
    <template type="amp-mustache">
        data-count-up Stop:  {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="https://en.wikipedia.org/wiki/Year_2000_problem">Y2K</a>.
    </template>
  </amp-date-countdown>

Relevant Logs

No response

Browser(s) Affected

Chrome, Firefox, Safari, Edge, UC Browser

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2109102127000

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.