Javascript horodatage en temps relatif

Question

Je suis à la recherche d'un joli extrait de code JS pour convertir un horodatage (par exemple à partir de l'API Twitter) en un temps relatif convivial pour l'utilisateur (par exemple, il y a 2 secondes, il y a une semaine, etc).

Est-ce que quelqu'un serait prêt à partager certaines de ses méthodes préférées (de préférence sans utiliser de plugins) ?

Answer 1

Les plugins datetime existent parce qu'il est très difficile de les faire correctement. Cette vidéo expliquant les incohérences des dates et heures éclairera la situation.

Toutes les solutions ci-dessus sans plugins sont incorrectes.

Pour travailler avec les dates et heures, il est préférable d'utiliser un plugin. Parmi les centaines de plugins qui traitent de ce sujet, nous utilisons Moment.js et il fait le travail.

À partir de la documentation de l'API Twitter, nous pouvons voir leur format de timestamp :

"created_at":"Wed Aug 27 13:08:45 +0000 2008"

Nous pouvons l'analyser avec Moment.js

const postDatetime = moment(
  "Wed Aug 27 13:08:45 +0000 2008",
  "dddd, MMMM Do, h:mm:ss a, YYYY"
);
const now = moment();
const timeAgo = now.diff(postDatetime, 'seconds');

Pour spécifier l'unité de temps préférée pour la méthode diff, nous pouvons utiliser la méthode isSame. par exemple :

if (now.isSame(postDatetime, 'day')) {
  const timeUnit = 'jours';
}

En général, construire quelque chose comme :

`Publié il y a ${timeAgo} ${timeUnit}`;

Reportez-vous à la documentation de votre plugin pour gérer les calculs de temps relatif (c'est-à-dire "Il y a combien de temps ?").

Answer 2

(2021) Si vous avez seulement besoin de jours, comme il y a 243 jours ou dans 127 jours, alors cela peut être super simple :

function relativeDays(timestamp) {
  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
  const aDay = 1000 * 60 * 60 * 24;
  const diffInDays = Math.round((timestamp - Date.now()) / aDay);
  return rtf.format(diffInDays, 'day');
}

Essayez d'exécuter le snippet ci-dessous:

function relativeDays(timestamp) {
  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
  const aDay = 1000 * 60 * 60 * 24;
  const diffInDays = Math.round((timestamp - Date.now()) / aDay);
  return rtf.format(diffInDays, 'day');
}

console.log(relativeDays(Date.now() - 86400000)); // "hier"
console.log(relativeDays(Date.now())); // "aujourd'hui"
console.log(relativeDays(Date.now() + 86400000)); // "demain"
console.log(relativeDays(Date.now() - 8640000000)); // "il y a 100 jours"
console.log(relativeDays(Date.now() + 8640000000)); // "dans 100 jours"

// Notez que mon argument timestamp est un nombre en ms, si vous voulez passer un objet Date, modifiez la fonction en conséquence

Answer 3

Ajout de mon code pour les étiquettes de temps basées sur la conception actuelle de Twitter

function timeElapsed(targetTimestamp:string) {
    let currentDate=new Date();
    let currentTimeInms = currentDate.getTime();
    let targetDate=new Date(targetTimestamp);
    let targetTimeInms = targetDate.getTime();
    let elapsed = Math.floor((currentTimeInms-targetTimeInms)/1000);
    if(elapsed<1) {
        return '0s';
    }
    if(elapsed<60) { //< 60 sec
        return `${elapsed}s`;
    }
    if (elapsed < 3600) { //< 60 minutes
        return `${Math.floor(elapsed/(60))}m`;
    }
    if (elapsed < 86400) { //< 24 hours
        return `${Math.floor(elapsed/(3600))}h`;
    }
    if (elapsed < 604800) { //<7 days
        return `${Math.floor(elapsed/(86400))}d`;
    }
    if (elapsed < 2628000) { //<1 month
        return `${targetDate.getDate()} ${MonthNames[targetDate.getMonth()]}`;
    }   
    return `${targetDate.getDate()} ${MonthNames[targetDate.getMonth()]} ${targetDate.getFullYear()}`; //plus d'un mois
}

Answer 4

Si vous utilisez PHP time(), vous pouvez essayer ceci à la place;

function time_stamp(session_time)
{
    var time_difference ="" - session_time;
    var seconds = time_difference;
    var minutes = Math.round(time_difference / 60);
    var hours = Math.round(time_difference / 3600);
    var days = Math.round(time_difference / 86400);
    var weeks = Math.round(time_difference / 604800);
    var months = Math.round(time_difference / 2419200);
    var years = Math.round(time_difference / 29030400);

    if (seconds <= 60) {
        return seconds+" Secs Ago";
    } else if (minutes <= 60) {
        if (minutes == 1) {
            return "Il y a 1 minute";
        } else {
            return minutes+" Minutes Ago";
        }
    } else if (hours <= 24) {
        if (hours == 1) {
            return "Il y a 1 heure";
        } else {
            return hours+" Heures Ago";
        }
    } else if (days <= 7) {
        if (days == 1) {
            return "Il y a 1 jour";
        } else {
            return days+" Jours Ago";
        }
    } else if (weeks <= 4) {
        if (weeks == 1) {
            return "Il y a 1 semaine";
        } else {
            return weeks+" Semaines Ago";
        }
    } else if (months <= 12) {
        if (months == 1) {
            return "Il y a 1 mois";
        } else {
            return months+" Mois Ago";
        }
    } else {
        if (years == 1) {
            return "Il y a 1 an";
        } else {
            return years+" Years Ago";
        }
    }
}

Answer 5

Pour utiliser ceci, il vous suffit de COPIER LITTÉRALEMENT tout ce code et de l'importer simplement dans votre composant ou n'importe où & insérez simplement votre date ISOstring() à l'intérieur: showTimeAgo("2022-06-20T13:42:29-05:00") & vous obtiendrez des mises à jour automatiques de l'heure pour chaque scénario.

note marginale : J'ai fait un package npm pour cela https://www.npmjs.com/package/showtimeago

export const showTimeAgo = () => {
    const MONTH_NAMES = [
        'Janvier',
        'Février',
        'Mars',
        'Avril',
        'Mai',
        'Juin',
        'Juillet',
        'Août',
        'Septembre',
        'Octobre',
        'Novembre',
        'Décembre',
    ];

    function getOrdinalNum() {
        return (
            n +
            (n > 0
                ? ['th', 'st', 'nd', 'rd'][
                      (n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10
                  ]
                : '')
        );
    }

    function getFormattedDate(
        date,
        preformattedDate = false,
        hideYear = false
    ) {
        const day = date.getDate();
        const month = MONTH_NAMES[date.getMonth()];
        const year = date.getFullYear();
        let hours = date.getHours();
        let minutes = date.getMinutes();

        let ampm = hours >= 12 ? 'pm' : 'am';

        switch(true){
            case (hours > 12):
                hours = hours - 12;
                break;
            case (hours === 0):
                hours = 12;
                break;
            case(minutes < 10):
                minutes = `0${minutes}`;
                break;
            case(preformattedDate):
            // Aujourd'hui à 10h20
            // Hier à 10h20
                return `${preformattedDate} à ${hours}:${minutes} ${ampm}`;

            case(hideYear):
                // Janvier 10th à 10h20pm
                return `${month} ${getOrdinalNum(
                    day
                )}, à ${hours}:${minutes} ${ampm}`;
            default:
                // Janvier 10th 2022 à 10h20pm
                return `${month} ${getOrdinalNum(
                    day
                )}, ${year} à ${hours}:${minutes} ${ampm}`;
        }

    }

    // --- Fonction principale
    function timeAgo(dateParam) {
        if (!dateParam) {
            return null;
        }

        const date =
            typeof dateParam === 'object' ? dateParam : new Date(dateParam);
        const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000
        const today = new Date();

        const yesterday = new Date(today - DAY_IN_MS);

        const seconds = Math.round((today - date) / 1000);
        const minutes = Math.round(seconds / 60);
        const hour = Math.round(seconds / 3600);
        const day = Math.round(seconds / 86400);
        const month = Math.round(seconds / 2629800);
        const year = Math.floor(seconds / 31536000);
        const isToday = today.toDateString() === date.toDateString();
        const isYesterday =
            yesterday.toDateString() === date.toDateString();
        const isThisYear = today.getFullYear() === date.getFullYear();

        switch(true){
            case (seconds < 5):
                return 'maintenant';
            case (seconds < 60):
                return `${seconds} secondes ago`;
            case (seconds < 90):
                return 'il y a environ une minute';
            case (minutes < 60):
                return `${minutes} minutes ago`;
            case (hour === 1 && hour < 2):
                return `${hour} heure ago`; // 1 heure ago
            case (hour > 1 && hour <= 12):
                return `${hour} heures ago`; // 2 heures ago
            case (isToday):
                return getFormattedDate(date, 'Aujourd’hui'); // Aujourd'hui à 10h20
            case (isYesterday): 
                return getFormattedDate(date, 'Hier'); // Hier à 10h20
            case(day > 1 && day <= 30):
                return `${day} jours ago`; // 2 jours ago
            case (isThisYear):
                return getFormattedDate(date, false, true); // Janvier 10th at 10:20pm 
            case (day > 30 && month <= 1):
                return `${hour} mois ago`; // 1 mois ago
            case (month > 1 && month <= 12):
                return `${month} mois ago`; // 2 mois ago
            case (year === 1):
                return `${year} an ago`; // 1 an ago
            case (year > 1):
                return `${year} ans ago`; // 2 ans ago
            default:
                return getFormattedDate(date); // Janvier 10th 2022 à 10h20pm
        }
    }

    return timeAgo(date);
};

console.log(showTimeAgo("2022-06-20T13:42:29-05:00"));-05:00"))