[JQuery плагин] Вывод времени как у вк

[viiprogrammer 179]

Вот нашёл хорошее решение на JQuery с обновлением как у вк!

И так создадим файл time.js в папке js с таким содержимым:

(function ($, moment) {

    $.dateFormat = function (timestamp) {
        if (timestamp instanceof Date) {
            return $.dateFormat.format(timestamp);
        } else if (typeof timestamp === "string") {
            return $.dateFormat.format($.dateFormat.parse(timestamp));
        } else if (typeof timestamp === "number") {
            return $.dateFormat.format(new Date(timestamp));
        } else {
            return $.dateFormat.format($.dateFormat.datetime(timestamp));
        }
    };

    var $t = $.dateFormat;

    $.extend($.dateFormat, {
            settings: {
                refreshMillis: 20000,
                todayFormat: '[сегодня в] HH:mm',
                yesterdayFormat: '[вчера в] HH:mm',
                thisYearFormat: 'D MMM в HH:mm',
                defaultFormat: 'D MMM YYYY в HH:mm'
            },
            format: function (date) {
                var $s = $t.settings;
                if (!moment(date).isValid()) {
                    return "неверное время";
                }

                if ($t.isInThisHour(date)) {
                    return moment(date).fromNow();
                }
                if ($t.isToday(date)) {
                    return moment(date).format($s.todayFormat);
                }
                if ($t.isYesterday(date)) {
                    return moment(date).format($s.yesterdayFormat);
                }
                if ($t.isInThisYear(date)) {
                    return moment(date).format($s.thisYearFormat);
                }
                return moment(date).format($s.defaultFormat);
            },
            isInThisHour: function (date) {
                return (new Date().getTime() - date.getTime()) < 1000 * 60 * 60;
            },
            isToday: function (date) {
                var today = new Date();
                return date.getFullYear() == today.getFullYear()
                    && date.getMonth() == today.getMonth()
                    && date.getDate() == today.getDate();
            },
            isYesterday: function (date) {
                var yday = new Date();
                yday.setHours(0);
                yday.setMinutes(0);
                yday.setDate(yday.getDate() - 1);

                if (!$t.isToday(date) && date.getTime() > yday.getTime()) {
                    return true;
                }

                return false;
            },
            isInThisYear: function (date) {
                return date.getFullYear() == new Date().getFullYear()
            },
            datetime: function (elem) {
                var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
                return $t.parse(iso8601);
            },
            isTime: function (elem) {
                return $(elem).get(0).tagName.toLowerCase() === "time";
            },
            parse: function (iso8601) {
                var s = $.trim(iso8601);
                s = s.replace(/\.\d+/, "");
                s = s.replace(/-/, "/").replace(/-/, "/");
                s = s.replace(/T/, " ").replace(/Z/, " UTC");
                s = s.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
                return new Date(s);
            }
        }
    );

    var refreshElements = [];
    var intervalId = null;

    function startTimer(){

        for(var i = 0; i < refreshElements.length; i++){
            var el = refreshElements[i];
            var data = el.data("dateFormat");
            el.text($t(data.datetime));
        }
    };

    $.fn.dateFormat = function (action, options) {
        this.each(function () {
            var el = $(this);

            var data = el.data("dateFormat");

            if (!data) {
                data = { datetime: $t.datetime(el) };
                el.data("dateFormat", data);

                if (!$t.isTime(el)) {
                    el.attr('datetime', $(el).attr("title"));
                }

                el.attr('title', data.datetime.toLocaleString());

                if ($t.isInThisHour(data.datetime)){
                    refreshElements.push(el);
                }
            }

            var data = el.data("dateFormat");

            el.text($t(data.datetime));

            if ($t.settings.refreshMillis > 0) {
                if ($t.isInThisHour(data.datetime)) {
                    if(!intervalId){
                        intervalId = setInterval(startTimer, $t.settings.refreshMillis);
                    }
                }
            }
        });
    };
})(jQuery, moment);
$(document).ready ( function(){
 $('time').dateFormat();
});

В <head> подключим:
 

	<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/lang/ru.min.js"></script>
        <script src="{theme}/js/time.js" type="text/javascript" charset="utf-8"></script>

В modules/functions.php вставим это:

 function _fTime($time)
 {
     return date('d.m.Y H:m', strtotime($time));
 }

Теперь давайте научимся его использовать:

 

В том месте где мы выводим время вставляем

 

{time}

 

а в php делаем так:

$mytime = date('c', $timeformat);
$tpl->set('{time}', '<time datetime="'.$mytime.'">'._fTime($mytime).'</time>');   

Где $timeformat переменная с временем в формате 1438543024

 

Все!

 

 

[GreenMonster 1]

Пользовательское время что ли?

[Why Not 35]

про php подробнее распиши, а то не все поймут)

[viiprogrammer 179]

про php подробнее распиши, а то не все поймут)

да я  хз как подробнее

[viiprogrammer 179]

Пользовательское время что ли?

нет вывод в стиле "заходил 15 мин назад"

[api 23]

нет вывод в стиле "заходил 15 мин назад"

а можеш видео гайд зделать по этай фиче ато про php не понятна 

[wenjiro 33]

а можеш видео гайд зделать по этай фиче ато про php не понятна 

Отлично придумал.

[viiprogrammer 179]

а можеш видео гайд зделать по этай фиче ато про php не понятна

Попозже я выложу готовый пример

[currt 0]

Попозже я выложу готовый пример

выложи готовый пример плиз 

[alexivanov a.k.a proxxamma 19]

нет вывод в стиле "заходил 15 мин назад"

Зачем такие трудности? Можно без js

[kolyan22region 82]

Зачем такие трудности? Можно без js

А как ты предлагаешь? В PHP всё обрабатывать? По моему лучше сделать всё в js

[viiprogrammer 179]

А как ты предлагаешь? В PHP всё обрабатывать? По моему лучше сделать всё в js

вот именно сам плагин сделан с обновлением времени в онлайн режиме, если это делать на пхп то будет туча запросов не для чего

[JacksScripts 59]

Зачем такие трудности? Можно без js

Типичный Junior