Как получить годы и месяцы с моментами и вуэйсами - PullRequest
Новая
       15

Как получить годы и месяцы с моментами и вуэйсами

0 голосов
/ 27 августа 2018

Я пытаюсь отобразить относительное время с моментами в формате:

года и месяцы, т.е. 2 года и 8 месяцев

В настоящее время 2016-01-29 | moment('from', 'now', true) округляется до 3 лет.

Пакет vue-moment не имеет прямого способа сделать это, momentjs также, похоже, не справляется с этим

Я пытаюсь не использовать дополнительный плагин.

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

Вот версия, которая использует date-fns и создает собственный фильтр

https://codesandbox.io/s/mmm0q9r61x

это код самого фильтра 

import Vue from "vue";
import { differenceInMonths, differenceInYears } from "date-fns";

Vue.filter("tsDiff", (from, to) => {
  const tsTo = to || new Date();
  try {
    // return `${distanceInWords(from, tsTo)}`;
    let y = differenceInYears(from, tsTo);
    let m = differenceInMonths(from, tsTo) - y * 12;
    let r = [];
    if (y !== 0) {
      r.push(`${Math.abs(y)} Year${Math.abs(y) !== 1 ? "s" : ""}`);
    }
    if (m !== 0) {
      r.push(`${Math.abs(m)} Month${Math.abs(m) !== 1 ? "s" : ""}`);
    }
    r = r.join(" and ");
    if (y < 0 || m < 0) {
      r = r + " ago";
    } else {
      r = "In " + r;
    }
    return r;
  } catch (error) {
    // eslint-disable-next-line
    console.error(error);
    return "Invalid Date";
  }
});

как только вы импортируете фильтр (import './datefilter';), вы можете звонить из любого места как {{ myDate | tsDiff }}

вы можете настроить использование по мере необходимости.

Вы можете легко заменить использование differenceInYears и differenceInMonths на vanilla js, так что вам вообще не понадобится зависимость.

В качестве примечания обратите внимание, можете ли вы заменить моментальные значения на date-fns. Momentjs - хорошая библиотека, но вы должны загрузить всю библиотеку независимо от того, сколько вы используете. Однако, когда вы используете Date-fns, вы можете указать, какие части вы хотите использовать, и только те, которые будут добавлены в окончательную сборку. Это может значительно сэкономить на окончательном размере сборки.

0 голосов
/ 28 августа 2018

// момент импорта 

var moment = require('moment')

// добавить это как метод в ваш компонент 

 getYearsMonthsDays(date){
        let fromTime = moment(date).diff(moment(), "milliseconds")
        let duration = moment.duration(fromTime)
        let years = duration.years() / -1
        let months = duration.months() / -1
        let days = duration.days() / -1
        if (years > 0) {
            var Ys = years == 1? years + " year and ": years + " years and "
            var Ms = months == 1? months + " month": months + " months"
            return Ys + Ms
        } else {
            if (months > 0)
                return months == 1? months + " month": months + " months"
            else
                return days == 1? days + " day": days + " days"
        }
    }

// использование в компоненте 

{{ getYearsMonthsDays(date) }}

Это работает, как и ожидалось, с настройками из ответа @jordanw. Может быть, это можно сделать короче или лучше, но это работает хорошо.

0 голосов
/ 27 августа 2018

Вы можете разбить расчет момента на миллисекунды. 

let fromTime = moment("2016-01-29").diff(moment(), "milliseconds")

Затем создайте объект продолжительности, используя предоставленную разницу. 

let duration = moment.duration(fromTime)

Он вернет объект продолжительности, который будет иметь методы для миллисекунд, секунд, минут, часов, дней, месяцев и лет.

Методы duration.methods() возвращают отрицательные значения, поэтому существует деление на отрицательное / -1 для преобразования значений в положительные.

Вот пример использования duration.years() и duration.months()

let timeString = duration.years() / -1 + " years and " + duration.months() / -1 + " months"

Итак, на данный момент timeString вернет 2 years and 6 months.

...