How to change the format of the date that appears on website via CSS?

Question

I'm currently hosting my own webpage using GitHub Pages and Jekyll themes. The repository is here.

The current date format for my posts look like this:

and I want to change the date format to something like Sep. 12, 2020. However, I'm not sure how to do that. I've tried searching online but as I have almost zero knowledge in web-related things I'm not sure what to even search for. I'm not sure if it's correct or even relevant, but this Stack Overflow question seems to say that you can't change the format.

Thanks.

Sorry, but I'm not sure which file that would be. Is that the `_config.yml` file? — Sean, Sep 12 '20 at 14:04
Not sure about that, I have added Jekyll tag to the question, hopefully someone who know Jekyll will answer it — kiranvj, Sep 12 '20 at 15:42

Bailey S · Accepted Answer · 2020-09-12T22:22:11.910

So the best way to do this would be to change the format of the date in the index page, since then you only have to set it once, which is in /blog/index.html.

This is a great website that explains all of the different formatting options for dates in Jekyll.

And all that you have to do is to add a filter on to the end of the date, like so:

<span>{{ post.date | date_to_string | date: "%b. %d, %Y"}}</span> &raquo;

Which outputs the dates as:

Sep. 12, 2020 » Too Much Game
Sep. 11, 2020 » Daily Update
Sep. 09, 2020 » Relation Extraction
Sep. 07, 2020 » Exposure Bias and Teacher Forcing, RE
Sep. 05, 2020 » Sean Yi, Launches Site

score 0 · Answer 2 · answered Sep 12 '20 at 14:14

Well if the input and output formats will be exactly as you described each time, you could just do something like this:

var oldDateString = document.querySelector("the data element's selector").innerText;
var split = oldDateString.split(" ");
var d = split[0];
var m = split[1];
var y = split[2];
var newDateString = m + ". " + d + ", " + y;
document.querySelector("the data element's selector").innerText = newDateString;

You could add this code on the page load event, to replace the dates at runtime

score 0 · Answer 3 · answered Sep 12 '20 at 17:52

As other people have posted, this isn't exactly possible with CSS. There are some janky ways you could do it with :before and :after selectors, but it would be a mess. I'd recommend editing your theme or using JS above if you don't have direct control over it.

How to change the format of the date that appears on website via CSS?

3 Answers3