Polskie daty i godziny w Ghost

Problem z polskimi datami i godzinami

Ghost jest świetnym systemem blogowym, posiada jednak na tę chwile kilka dość wad. Kilka z nich da się w dość prosty sposób wyeliminować. Pierwszą rzeczą są daty utworzenia postów w języku angielskim. Na te chwilę Ghost nie posiada żadnego pliku językowego i nie jesteśmy w stanie przetłumaczyć dat bez ingerencji w rdzeń Ghost, czego jednak nie powinniśmy robić, jeśli w przyszłości chcemy go bezboleśnie zaktualizować.

Rozwiązanie

Polskie daty możemy uzyskać stosując bibliotekę JS o nazwie moment.j, która znajdziemy na stronie:

Pobierz moment.js

Pobieramy więc i dołączamy do naszej strony plik moment.min.js.

Następnie musimy dodać jeszcze konfigurację dla Polski:

//! moment.js locale configuration
//! locale : polish (pl)
//! author : Rafal Hirsz : https://github.com/evoL

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../moment')) :
   typeof define === 'function' && define.amd ? define(['moment'], factory) :
   factory(global.moment)
}(this, function (moment) { 'use strict';


    var monthsNominative = 'styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień'.split('_'),
        monthsSubjective = 'stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia'.split('_');
    function plural(n) {
        return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
    }
    function translate(number, withoutSuffix, key) {
        var result = number + ' ';
        switch (key) {
        case 'm':
            return withoutSuffix ? 'minuta' : 'minutę';
        case 'mm':
            return result + (plural(number) ? 'minuty' : 'minut');
        case 'h':
            return withoutSuffix  ? 'godzina'  : 'godzinę';
        case 'hh':
            return result + (plural(number) ? 'godziny' : 'godzin');
        case 'MM':
            return result + (plural(number) ? 'miesiące' : 'miesięcy');
        case 'yy':
            return result + (plural(number) ? 'lata' : 'lat');
        }
    }

    var pl = moment.defineLocale('pl', {
        months : function (momentToFormat, format) {
            if (format === '') {
                // Hack: if format empty we know this is used to generate
                // RegExp by moment. Give then back both valid forms of months
                // in RegExp ready format.
                return '(' + monthsSubjective[momentToFormat.month()] + '|' + monthsNominative[momentToFormat.month()] + ')';
            } else if (/D MMMM/.test(format)) {
                return monthsSubjective[momentToFormat.month()];
            } else {
                return monthsNominative[momentToFormat.month()];
            }
        },
        monthsShort : 'sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru'.split('_'),
        weekdays : 'niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota'.split('_'),
        weekdaysShort : 'nie_pon_wt_śr_czw_pt_sb'.split('_'),
        weekdaysMin : 'N_Pn_Wt_Śr_Cz_Pt_So'.split('_'),
        longDateFormat : {
            LT : 'HH:mm',
            LTS : 'HH:mm:ss',
            L : 'DD.MM.YYYY',
            LL : 'D MMMM YYYY',
            LLL : 'D MMMM YYYY HH:mm',
            LLLL : 'dddd, D MMMM YYYY HH:mm'
        },
        calendar : {
            sameDay: '[Dziś o] LT',
            nextDay: '[Jutro o] LT',
            nextWeek: '[W] dddd [o] LT',
            lastDay: '[Wczoraj o] LT',
            lastWeek: function () {
                switch (this.day()) {
                case 0:
                    return '[W zeszłą niedzielę o] LT';
                case 3:
                    return '[W zeszłą środę o] LT';
                case 6:
                    return '[W zeszłą sobotę o] LT';
                default:
                    return '[W zeszły] dddd [o] LT';
                }
            },
            sameElse: 'L'
        },
        relativeTime : {
            future : 'za %s',
            past : '%s temu',
            s : 'kilka sekund',
            m : translate,
            mm : translate,
            h : translate,
            hh : translate,
            d : '1 dzień',
            dd : '%d dni',
            M : 'miesiąc',
            MM : translate,
            y : 'rok',
            yy : translate
        },
        ordinalParse: /\d{1,2}\./,
        ordinal : '%d.',
        week : {
            dow : 1, // Monday is the first day of the week.
            doy : 4  // The week that contains Jan 4th is the first week of the year.
        }
    });

    return pl;

}));

Następnie dodajemy prosty skrypt JavaScript, który podmieni nam po stronie klienta daty i godziny na polskie:

// Daty w języku polskim
			moment.locale('pl');
			$('.post-date').each(function(i, date){
					var $date = $(date);
					$date.html(moment($date.attr('datetime')).format('LL'));
			});

==Uwaga !! Aktualizacja 01.08.2017 == W wersji oficjalnej 1.x (1.0.0 wzwyż) zmieniła sie klasa w której znajdują się daty i godziny wpisu. Poprawna klasa jest to time Poprawny kod to:

// Daty w języku polskim
			moment.locale('pl');
			$('time').each(function(i, date){
					var $date = $(date);
					$date.html(moment($date.attr('datetime')).format('LL'));
			});

Tutaj format daty ustawiłem na LL, ale możemy ustawić również jeden z poniższych:

moment.locale();         // pl
moment().format('LT');   // 13:03
moment().format('LTS');  // 13:03:20
moment().format('L');    // 18.03.2017
moment().format('l');    // 18.3.2017
moment().format('LL');   // 18 marca 2017
moment().format('ll');   // 18 mar 2017
moment().format('LLL');  // 18 marca 2017 13:03
moment().format('lll');  // 18 mar 2017 13:03
moment().format('LLLL'); // sobota, 18 marca 2017 13:03
moment().format('llll'); // sob, 18 mar 2017 13:03

Od teraz możemy cieszyć się polskimi datami i formatem godzin na froncie. Rozwiązanie nie jest może idealne ale działa i póki autorzy Ghost nie przygotują jakiegoś pliku językowego do tłumaczenia trzeba sobie poradzić w taki oto sposób.