Relative time with languages and dynamic updates

Inspect the full details and code of a selected snippet

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }

UIkit.component('relativetime', {
    props: {
      datetime: String,
      locale: String
    },

data() {
      return {
        datetime: '',
        locale: '',
        timer: null
      };
    },

connected() {
      this.updateTime();
      this.timer = setInterval(() => this.updateTime(), 60000);
    },

disconnected() {
      clearInterval(this.timer);
    },

methods: {
      updateTime() {
        const date = new Date(this.datetime);
        if (isNaN(date)) {
          this.$el.textContent = 'Invalid date';
          return;
        }

const locale = this.locale || navigator.language || 'en';
        this.$el.textContent = this.getRelativeTime(date, locale);
      },

getRelativeTime(date, locale) {
        const now = new Date();
        const diff = (date - now) / 1000;
        const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
        const divisions = [
          { amount: 60, name: 'seconds' },
          { amount: 60, name: 'minutes' },
          { amount: 24, name: 'hours' },
          { amount: 7, name: 'days' },
          { amount: 4.34524, name: 'weeks' },
          { amount: 12, name: 'months' },
          { amount: Infinity, name: 'years' }
        ];
        let duration = diff;
        for (let i = 0; i < divisions.length; i++) {
          if (Math.abs(duration) < divisions[i].amount) {
            return rtf.format(Math.round(duration), divisions[i].name);
          }
          duration /= divisions[i].amount;
        }
      }
    }
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

yaneony

09.05.2025, 11:39:11

23.05.2025, 13:53:43

uk-border, uk-card, uk-container, uk-flex, uk-margin, uk-padding, uk-relativetime

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!