Jump to content

[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
Link to comment
Share on other sites

  • 8 months later...
  • 2 weeks later...

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...