Простые решения JavaScript - дата и время (русский и iso формат)

Категория: Код

– Автор: Игорь (Администратор)

Дата и время в стандартном JavaScript ограничены по своим возможностям вывода. Особенно, это касается всего, что связано с локализацией. В классе Date существуют такие функции, как toLocaleDateString. Но, они завязываются на глобальные настройки, поэтому использовать их попросту неудобно. Вы не можете гарантированно получить тот вывод, который вам нужен. В связи с этим, достаточно часто возникают задачи преобразования дат в нужный формат. Обычно, это русский для вывода на странице и iso-формат для передачи в параметрах.

Примечание: Огромное количество небольших и средних проектов, предназначенных для российских пользователей, попросту не нуждаются в сложных и больших механизмах локализации. Конечно, если речь не идет о системах, завязанных на особенностях представления чисел и дат в других странах (финансы, валюты, переводы и т.д.). Обычно, все сводится к созданию прослойки с двумя функциям: вывести в русском формате и преобразовать в параметры (по сути в iso-формат). 

Сегодня существует уйма различных фреймворков, реализованных на JavaScript. В большинстве из них уже заложена функциональность для локализации различных элементов. И это не только дата и время. Цифры, денежные знаки и так далее. Поддержка всевозможных разделителей, функции для форматированного вывода, парсинг на основе шаблонов и многое другое. Единственное, что от вас потребуется - это время на изучение глобальной концепции и правильного (с точки зрения фреймворка) способа подключения и использования функций.

Конечно, фреймворки - это здорово. Они позволяют решить большинство задач. Включают в себя уйму полезных инструментов. Однако, подключать фреймворк только ради двух функций - это как стрелять из пушки по воробьям. Бессмысленно и неудобно. Подключите нужный язык. Инициализируйте нужные переменные. Составьте правильные параметры. А еще вам нужно узнать о временных зонах. Как правильно сдвигать время. Как учитывать разницу между временем на БД, сервере и клиентской стороне. И обязательно разберитесь в том, как это все делает фреймворк. И все ради вставки и чтения одного поля из таблицы на простом сайте с небольшой услугой или в небольшой внутренней корпоративной системе?

Примечание: Конечно, стоит знать и понимать как учитывать влияние временных зон и разницу времени между слоями приложения. Эта информация может вам пригодится. Хотя бы в ситуациях, когда БД находится на одном сервере, а web-сервер/сайт на другом. Вопросов в стиле "почему время расходится" попросту не возникнет.

Примечание: Не стоит делать вывод, что большие и сложные решения не нужны. Просто они нужны там, где нужно решать сложные задачи и где действительно можно рассчитывать на частое расширение круга задач.

В реальности же, все сводится к тому, что открывается описание функций класса Date и вручную составляется нужный код. И как бы это не показалось странным, но в большинстве случаев - это будет самое простое, легкое, быстрое и гибкое решение из всех возможных. Вы всегда сможете подправить или добавить нужную функциональность. При этом, код будет завязан только на базовых функциях JavaScript, что значит отсутствие проблем со совместимостью.

Примечание: Если вы разделяли задачи преобразования и вывода, то добавление еще одной или нескольких локализаций не будет сложным делом. Возможно, рутинным, но не сложным. 

Вы можете самостоятельно разобраться с устройством Date или использовать следующий код:

(function($) {
    var _extend = function(_to, _from) {
       for(i in _from)
          _to[i] = _from[i];
    };
    _extend($, {
        // Парсим различные представления.
        parse: function(date) {
            // Если нечего парсить
            if (!date) return null;
            // Если код изначально был в формате C#
            if (typeof(date) === 'string' && date.indexOf('/Date(') === 0) return new Date(parseInt(date.substring(6)));
            // Если мы взяли iso формат
            else if (typeof(date) === 'string' && date.replace('-', '').length != date.length) {
                return new Date(date.replace(/(\d+)-(\d+)-(\d+)/, '$2/$3/$1'));
            }
            // Если мы взяли русский формат
            else if (typeof(date) === 'string' && date.replace('.', '').length != date.length) {
                return new Date(date.replace(/(\d+)\.(\d+)\.(\d+)/, '$2/$1/$3'));
            }
            // Если передан готовый объект
            else if (typeof(date) === 'object' && date.constructor === Date) return date;
            // Пришел некорректный параметр отдаем пустой объект
            return null;
        },
        // Обработка iso
        iso: {
            // Вывод даты
            date: function(_date) {
                var date;
                // Если входной формат не корректен,
                // то возвращаем пустую строку
                if (!(date = $.parse(_date))) return '';
                return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : '' + (date.getMonth() + 1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate());
            },
            // Вывод времени
            time: function(_date) {
                var date;
                // Если входной формат не корректен,
                // то возвращаем пустую строку
                if (!(date = $.parse(_date))) return '';
                return (date.getHours() < 10 ? '0' + date.getHours() : '' + date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : '' + date.getMinutes());
            },
            // Вывод даты и времени
            datetime: function(_date) {
                var date;
                // Если входной формат не корректен,
                // то возвращаем пустую строку
                if (!(date = $.parse(_date))) return '';
                return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : '' + (date.getMonth() + 1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate()) + ' ' + (date.getHours() < 10 ? '0' + date.getHours() : '' + date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : '' + date.getMinutes());
            }
        },
        // Обработка на русского формата
        ru: {
            // Вывод даты
            date: function(_date) {
                var date;
                // Если входной формат не корректен,
                // то возвращаем пустую строку
                if (!(date = $.parse(_date))) return '';
                return (date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate()) + '.' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : '' + (date.getMonth() + 1)) + '.' + date.getFullYear();
            },
            // Вывод времени
            time: function(_date) {
                var date;
                // Если входной формат не корректен,
                // то возвращаем пустую строку
                if (!(date = $.parse(_date))) return '';
                return (date.getHours() < 10 ? '0' + date.getHours() : '' + date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : '' + date.getMinutes());
            },
            // Вывод даты и времени    
            datetime: function(_date) {
                var date;
                // Если входной формат не корректен,
                // то возвращаем пустую строку
                if (!(date = $.parse(_date))) return '';
                return (date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate()) + '.' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : '' + (date.getMonth() + 1)) + '.' + date.getFullYear() + ' ' + (date.getHours() < 10 ? '0' + date.getHours() : '' + date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : '' + date.getMinutes());
            }
        }
    });
})
// Называем переменную dt,
// чтобы не пересекаться с другими фреймворками, 
// часто использующими date и datetime
(window.dt = {});

Чтобы не быть голословным, вот пример обработки и вывода результатов (Осторожно: используется функция eval): 

// Вывод результата var result = document.getElementById("resultOper"); result.innerHTML = ''; // ---------------------------------------------------- result.innerHTML += 'ISO дата: '; result.innerHTML += dt.iso.date(new Date()); result.innerHTML += '<br />'; // ---------------------------------------------------- result.innerHTML += 'ISO время: '; result.innerHTML += dt.iso.time(new Date()); result.innerHTML += '<br />'; // ---------------------------------------------------- result.innerHTML += 'ISO дата и время: '; result.innerHTML += dt.iso.datetime(new Date()); result.innerHTML += '<br />'; // ---------------------------------------------------- result.innerHTML += 'RU дата: '; result.innerHTML += dt.ru.date(new Date()); result.innerHTML += '<br />'; // ---------------------------------------------------- result.innerHTML += 'RU время: '; result.innerHTML += dt.ru.time(new Date()); result.innerHTML += '<br />'; // ---------------------------------------------------- result.innerHTML += 'RU дата и время: '; result.innerHTML += dt.ru.datetime(new Date()); result.innerHTML += '<br />'; // ---------------------------------------------------- // Конвертирование ISO формата // и вывод в RU дата и время result.innerHTML += 'RU на основе ISO дата и время: '; result.innerHTML += dt.ru.datetime(dt.iso.datetime(new Date())); result.innerHTML += '<br />';

Выполнить

Результат выполнения