Jump to content
viiprogrammer

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

Recommended Posts

Вот нашёл хорошее решение на 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

 

Все!

 

 

  • Upvote 2

Share this post


Link to post
Share on other sites

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

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

  • Upvote 1

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×