cipchk / ngx-countdown

Simple, easy and performance countdown for angular
https://cipchk.github.io/ngx-countdown/
MIT License
192 stars 57 forks source link

How can I add MM:dd:hh:mm:ss to the countdown? (months:days:hours:minutes:seconds ) #108

Closed ManikantaKattaDev closed 3 years ago

ManikantaKattaDev commented 3 years ago

Please find stackblitz link.

https://ngx-countdown-setup-16zccz.stackblitz.io

Bug Report or Feature Request (mark with an x)


[ ] Bug report -> please search issues before submitting
[ ] Feature request
[ ] Documentation issue or request

Current behavior

If I give more than 2,592,000seconds(1 month/ 30days) timer is not showing correctly for more than 30days lets say 3456000(40days) it is showing 21d 01h 59m 08s something.

please help me how to do this. is there any date conversion need to add or am i missing something in configuration?

Expected behavior

need to show 39d 23h 59m 08s or 1m 9d 23h 59m 08s .

Environment


Angular version: 11

ngx-countdown version: ^8.0.4
cipchk commented 3 years ago

A demo (from More than 24 hours):

import { Component } from '@angular/core';
import { CountdownConfig } from 'ngx-countdown';

const CountdownTimeUnits: Array<[string, number]> = [
  ['Y', 1000 * 60 * 60 * 24 * 365], // years
  ['M', 1000 * 60 * 60 * 24 * 30], // months
  ['D', 1000 * 60 * 60 * 24], // days
  ['H', 1000 * 60 * 60], // hours
  ['m', 1000 * 60], // minutes
  ['s', 1000], // seconds
  ['S', 1], // million seconds
];

@Component({
  selector: 'my-app',
  template: `
    <countdown
      [config]="config"
    ></countdown>
    <p>{{ date }}</p>
  `
})
export class AppComponent {
  config: CountdownConfig = {
    leftTime: 3456000,
    format: `MM:DD:HH:mm:ss`,
    formatDate: ({ date, formatStr }) => {
      let duration = Number(date || 0);

      return CountdownTimeUnits.reduce((current, [name, unit]) => {
        if (current.indexOf(name) !== -1) {
          const v = Math.floor(duration / unit);
          duration -= v * unit;
          return current.replace(new RegExp(`${name}+`, 'g'), (match: string) => {
            return v.toString().padStart(match.length, '0');
          });
        }
        return current;
      }, formatStr);
    },
  };
}
ManikantaKattaDev commented 3 years ago

@cipchk Thank you, it is working as expected.