How does Jekyll date formatting work?

LiquidJekyll

Liquid Problem Overview


I'm using Jekyll to generate a simple site.

I want the date field to display in the format 12 September 2011.

I've found, through some creative googling, a bit of date-format manipulation, but nothing that seems to get me the month name. What I have is {{ page.date| date: "%m-%d-%Y" }}, which gets me output as 09-12-2011, but isn't quite what I'm looking for.

Is there any way to get the month as a name in Jekyll?

Or, barring that, is there any documentation for the date attribute?

Liquid Solutions


Solution 1 - Liquid

Solution

This output filter:

{{ page.date | date: "%-d %B %Y" }}

produces dates formatted like:

9 September 2013

Be sure not to miss the minus (-) in front of %-d for the day. Without it, numbers below ten would have leading zeros (e.g. 09 September 2013).

Details on the individual date formatting tokens can be found on the Liquid "Output tags and filters" documentation page.

More Info

I put together a large set of Jekyll date formatting examples. It provides examples for several formats and should provide enough detail to format in any way you'd like. Some examples include:

  • 2013-09-23
  • September 23, 2013
  • Sept. 23rd, 2013
  • 4 Juli 2013 (i.e. changing names to other languages like "Juli" instead of "July").

Enjoy!

Solution 2 - Liquid

Jekyll adds filter extensions to liquid. See here. You can display your desired date format by simply running the date_to_long_string filter.

From the link:


Date to Long String

Format a date in long format e.g. “27 January 2011”.

{{ site.time | date_to_long_string }} => 17 November 2008

Solution 3 - Liquid

Jekyll 3.8 supports ordinal dates out of the box. To output the month use one of these.

{{ page.date | date_to_long_string: "ordinal", "US" }} will output April 24th, 2018.

{{ page.date | date_to_string: "ordinal", "US" }} will output Apr 24th, 2018.

{{ page.date | date_to_long_string: "ordinal" }} will output 24th April 2018.

{{ page.date | date_to_string: "ordinal" }} will output 24th Apr 2018.

Solution 4 - Liquid

Try '%B' which means "The full month name (``January'')"

search the documentation for strftime, the function which is typically used for converting a date to string.

Solution 5 - Liquid

Just in case you want a custom solution, you could write a Jekyll plugin to format a date as you want, like this (this example is for Italian dates):

module Jekyll
    module ItalianDates
        MONTHS = {"01" => "gennaio", "02" => "febbraio", "03" => "marzo",
                "04" => "aprile", "05" => "maggio", "06" => "giugno",
                "07" => "luglio", "08" => "agosto", "09" => "settembre",
                "10" => "ottobre", "11" => "novembre", "12" => "dicembre"}

        # http://man7.org/linux/man-pages/man3/strftime.3.html
        def italianDate(date)
            day = time(date).strftime("%e") # leading zero is replaced by a space
            month = time(date).strftime("%m")
            year = time(date).strftime("%Y")
            day+' '+MONTHS[month]+' '+year
        end

        def html5date(date)
            day = time(date).strftime("%d")
            month = time(date).strftime("%m")
            year = time(date).strftime("%Y")
            year+'-'+month+'-'+day
        end
    end
end

Liquid::Template.register_filter(Jekyll::ItalianDates)

Just save this to a file like _plugins/italian_dates.rb and use it as you need in templates:

<time datetime="{{page.date | html5date}}">{{page.date | italianDate}}</time>

Solution 6 - Liquid

Use {{ page.date| date: "%d %B %Y" }} for dates like 12 September 2011, refer to nice and quick formatting guide on Jekyll Date Formatting

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMichaelView Question on Stackoverflow
Solution 1 - LiquidAlan W. SmithView Answer on Stackoverflow
Solution 2 - LiquidMike VormwaldView Answer on Stackoverflow
Solution 3 - LiquidColinView Answer on Stackoverflow
Solution 4 - LiquidtheomegaView Answer on Stackoverflow
Solution 5 - LiquidlifeisfooView Answer on Stackoverflow
Solution 6 - LiquidSACnView Answer on Stackoverflow