112

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?

Martin Thoma
  • 124,992
  • 159
  • 614
  • 958
Michael
  • 1,257
  • 2
  • 9
  • 7
  • Interesting filters are `date_to_string` and `date_to_xmlschema` (See http://jekyllrb.com/docs/templates/) – Martin Thoma Jan 09 '14 at 22:16
  • The most complete date jekyll/liquid date formatting document I could find: http://alanwsmith.com/jekyll-liquid-date-formatting-examples – joce Jun 25 '17 at 14:53

6 Answers6

186

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!

Alan W. Smith
  • 24,647
  • 4
  • 70
  • 96
  • Is it possible to get it to format in the NNXX format, ie 1st 2nd 3rd etc? – Ian Jun 03 '13 at 12:47
  • @Ian - I don't see a way to do the "1st", "2nd", etc... out of the with the Liquid date formatters. It may be possible with some extra logic thrown in. Post another question for that specifically and see if someone knows how. – Alan W. Smith Jun 03 '13 at 19:33
  • @Ian - I posted [another answer here](http://stackoverflow.com/a/18938806/102401) that addresses the 1st, 2nd, 3rd question. I'm also updating my answer to point to a reference set of date formatting snippets. – Alan W. Smith Sep 22 '13 at 02:38
  • Don't use `plus: '0'`. Use: `{{ page.date | date: "%-m-%d-%Y" }}`. Notice the hyphen between `%` and m: `%-m`. – Nowaker Sep 26 '13 at 20:26
  • 1
    @DamianNowak - Thanks for the pointer to use `%-m`. It's much cleaner. I've updated the answer to reflect that and will update my reference post as soon as I can. – Alan W. Smith Sep 27 '13 at 05:13
  • Date Formatting info can be found at : http://docs.shopify.com/themes/liquid-documentation/filters/additional-filters#date – jonasll Aug 27 '14 at 14:02
  • Date format docs have moved to: http://docs.shopify.com/themes/liquid-documentation/filters/additional-filters#date – Marcus Whybrow Sep 08 '14 at 12:12
  • I updated the link pointing to the date filters. Thanks for pointing out the change. – Alan W. Smith Sep 09 '14 at 15:14
18

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

Mike Vormwald
  • 2,280
  • 22
  • 29
7

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.

Colin
  • 1,159
  • 8
  • 8
3

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>
lifeisfoo
  • 15,478
  • 6
  • 74
  • 115
3

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.

theomega
  • 31,591
  • 21
  • 89
  • 127
2

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

SACn
  • 1,862
  • 1
  • 14
  • 29