See "real" commit date / time in github (hour/day)

Question

Is there a way to see the date of a commit in github, with day/hour precision? Older commits appear in a "human readable" format, such as "2 years ago" instead of showing the actual date.

If it's not possible to see the actual date on github, is there a easier workaround than git clone?

Raimundo

Answer 1

Hover your mouse over the 2 years ago and you'll get the timestamp.

Straighten

I had no idea you could do this...this helped me out. But I wonder, is there a git command you can enter that'll display this information if you pass in the commit hash? – Generosity

I agree, the solution is a setting to show the date. "2 hours ago" is just terrible in my opinion. Bitbucket does the same. It seems harder to do this - anyone know WHY both choose to show this duration? – Password

How do you "hover over" anything when you're using a phone? – Implant

This shows the author date, not the commit date. – Spano

Answer 2

The real date does not appear for me upon hovering "2 years ago", despite the text being wrapped by a <time> element with an iso value under its datetime attribute.

If all else fails, like it did for me, try inspecting the text.

Sample element:

<time datetime="2015-01-22T20:48:13Z" is="relative-time" title="Jan 22, 2015, 2:48 PM CST">7 days ago</time>

Whited

Has nothing to do with their end or time element or anything like that. It's you and your browser. A title attr is displayed by browsers as a tooltip when you hover. No fancy js, no css, nothing. Some people have reported issues with chrome and title attr see #21315258 #10391827 – Reuter

@Reuter - Bad site design then still. An author of an HTML document should not make assumptions about how any element is displayed by any particular browser. – Christi

Answer 3

you can just use this js bookmark:

javascript:(function() { 
        var relativeTimeElements = window.document.querySelectorAll("relative time");
        relativeTimeElements.forEach(function(timeElement){
        timeElement.innerHTML = timeElement.innerHTML +" -- "+ timeElement.title;
        })
    }()
)

https://gist.github.com/PhilippGrulich/7051832b344d4cbd30fbfd68524baa38

It adds just the correct time: Like this: committed 21 hours ago -- 15. Feb. 2017, 15:49 MEZ

Bedel

Yours didnt work for me, so I wrote this and it worked; +1 for the inspiration javascript:(function() { var el = document.createElement('div'); document.body.prepend(el); el.innerHTML = document.getElementsByTagName('relative-time')[0].getAttribute('title');}() ) – Proposal

Answer 4

Update 2021: a bookmarklet remains the only option on GitHub.
See for instance "Displaying Real Commit Times in GitHub" from Justin Noel

javascript:(function() {    
  var style = document.createElement('style');
  document.head.appendChild(style);
  var sheet = style.sheet;
  sheet.addRule('time-ago:before,relative-time:before', 'content: attr(title);display: block;font-size: 0.5rem;');  
})()

---

This contrasts with GitLab 14.1 (July 2021)

User setting to display absolute times

GitLab displays relative times (for example, 30 minutes ago) in a lot of places.

You can now change your user profile preferences to display absolute times instead, for example, ‘May 18, 2021, 3:57 PM’.

Absolute times respect your browser settings and format dates and times based on your preferred locales, for example, British English over US English.

This new display option gives more information at a glance for users that need it for workflows like correlating actions in GitLab to external systems.

See Documentation and Issue.

Zigzagger

Hi, this is what worked for me! Thanks – Newkirk

Answer 5

I tried @odony's TamperMonkey/Greasemonkey script on Chrome but couldn't get it to work. detachCallback() wasn't recognized. So instead of detaching any callbacks, I simply replaced the <relative-time> node.

// ==UserScript==
// @name         Github: always show absolute times
// @match        https://github.com/*
// ==/UserScript==

(function() {
    document.querySelectorAll("relative-time").forEach(function(el) {
        var parent = el.parentNode;
        var timestamp = el.title;
        var span = document.createElement("span");
        span.innerHTML = timestamp;
        parent.removeChild(el);
        parent.appendChild(span);
    });
})();

Sorry I haven't tested this with other browser, but since this is basic javascript, it should just work. :)

Kornegay

Answer 6

With a user stylesheet plugin (I'm using stylebot in chrome)

time {
  font-size: 0;
}
time:after {
    content: attr(data-original-title);
    font-size: 14px;
}

Doan

Answer 7

If you're looking for a way to display the date/time permanently without hovering (e.g. for screenshots), the above Javascript-based solutions do not match the latest Github HTML (see comments). And they did not take into account the fact that the timestamps are auto-updated based on a timer ("X minutes ago" has to change every minute), so they will periodically reappear.

The following script seems to work on Github as of 2020-01-27:

(function() {
    var els = window.document.querySelectorAll("time-ago,relative-time");
    els.forEach(function(el) {
        el.innerHTML = "on " + el.getFormattedTitle(); // original timestamp
        el.disconnectedCallback(); // stop auto-updates
    });
})();

You can make this a bookmarklet by prefixing the code with javascript: as in the other JS-based solution.

And if you want to make this a permanent fix, you can save this as a TamperMonkey/Greasemonkey script, as follows:

// ==UserScript==
// @name         Github: always show absolute times
// @match        https://github.com/*
// ==/UserScript==

(function() {
    setTimeout(function() {
        var els = window.document.querySelectorAll("time-ago,relative-time");
        els.forEach(function(el) {
            el.innerHTML += ' <span class="text-small">(' + el.title + ')</span>'; // set original timestamp
            el.disconnectedCallback(); // stop auto-updates
        });
    }, 100); // YMMV, experiment with the timeout
})();

That's not very pretty but it seems to do the job.

Puttyroot

Love that you included it as tampermonkey/greasemonkey script, makes this more of an actual solution – Attila

Awesome! For me, I had to remove the comments from the code for it to work as a bookmarklet. Here's the full thing: javascript:(function() { var els = window.document.querySelectorAll("time-ago,relative-time"); els.forEach(function(el) { el.innerHTML = "on " + el.getFormattedTitle(); el.disconnectedCallback();});})(); – Cocotte

Answer 8

With gitlab 10 I used this to add the tooltip title to the element as standard text:

javascript:(function() { 
  var relativeTimeElements = window.document.querySelectorAll("time");
  relativeTimeElements.forEach(function(timeElement){
    timeElement.innerHTML = timeElement.innerHTML +" -- "+ timeElement.getAttribute('data-original-title');
  })
}());

Earlearla

Answer 9

Yes. Booklets are a convenient way to toggle the date time format on and off. Here's one that I use:

javascript: (() => {
  let style = document.querySelector('#replace-relative-time');

  if (style) return style.remove();

  style = document.createElement('style');
  style.setAttribute('id', 'replace-relative-time');
  document.head.appendChild(style);

  style.sheet.insertRule(`
        :not([role=gridcell]) > relative-time {
            display: inline-flex;
        flex-direction: row;
            visibility: hidden;
            text-indent: -1000px;
        }
    `);

  style.sheet.insertRule(`
        :not([role=gridcell]) time-ago:after, :not([role=gridcell]) > relative-time:after {
            content: attr(title);
            display: block;
            visibility: visible;
            text-indent: 0;
        }
    `);
})();

Alternatively, if you'd like this behaviour to persist across multiple tabs, you could take this snippet and put it into a chrome extension that runs on any specified pages.

Thrombokinase

Answer 10

Here is one for Gogs

javascript:(function() {
     var items = Array.from(document.querySelectorAll('span,relative-time'));  items.forEach(function(item) {    item.innerText = item.getAttribute('data-content');    item.style.backgroundColor = '#eee';    item.style.padding = '5px';    item.style.color = '#333';    item.style.fontWeight = 'bold';  });})()

Hartfield