Форматирование текущего времени с помощью Javascript

102

Я хочу получить текущее время в определенном формате с помощью javascript.

С помощью приведенной ниже функции и ее вызова я получу Fri Feb 01 2013 13:56:40 GMT + 1300 (новозеландское летнее время), но я хочу отформатировать его, как в пятницу, 14:00, 1 февраля 2013 г.

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = d;

Конечно, в приведенном выше коде нет никакой логики форматирования, но я еще не встречал никаких «работающих» форматеров.

Сеонг Ли
источник
По аналогичному вопросу для Node.js см. Stackoverflow.com/questions/10645994/…
Охад Шнайдер

Ответы:

163

У даты JavaScript есть несколько методов, позволяющих извлекать ее части:

getFullYear()- Возвращает 4-значный год.
getMonth()- Возвращает целое число с отсчетом от нуля (0-11), представляющее месяц в году.
getDate()- Возвращает день месяца (1-31).
getDay()- Возвращает день недели (0-6). 0 - воскресенье, 6 - суббота.
getHours()- Возвращает час дня (0–23).
getMinutes()- Возвращает минуты (0-59).
getSeconds()- Возвращает второе (0-59).
getMilliseconds()- Возвращает миллисекунды (0-999).
getTimezoneOffset()- Возвращает количество минут между местным временем машины и UTC.

Не существует встроенных методов, позволяющих получить локализованные строки, такие как «Пятница», «Февраль» или «PM». Вы должны сами это кодировать. Чтобы получить нужную строку, вам, по крайней мере, нужно хранить строковые представления дней и месяцев:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

Затем соберите его, используя описанные выше методы:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var d = new Date();
var day = days[d.getDay()];
var hr = d.getHours();
var min = d.getMinutes();
if (min < 10) {
    min = "0" + min;
}
var ampm = "am";
if( hr > 12 ) {
    hr -= 12;
    ampm = "pm";
}
var date = d.getDate();
var month = months[d.getMonth()];
var year = d.getFullYear();
var x = document.getElementById("time");
x.innerHTML = day + " " + hr + ":" + min + ampm + " " + date + " " + month + " " + year;
<span id="time"></span>

У меня есть функция формата даты, которую я хотел бы включить в свою стандартную библиотеку. Он принимает параметр строки формата, который определяет желаемый результат. Строки формата свободно основаны на строках настраиваемого формата даты и времени .Net . Для формата вы указали следующую строку формата будет работать: "dddd h:mmtt d MMM yyyy".

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = formatDate(d, "dddd h:mmtt d MMM yyyy");

Демо: jsfiddle.net/BNkkB/1

Вот моя полная функция форматирования даты:

function formatDate(date, format, utc) {
    var MMMM = ["\x00", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var MMM = ["\x01", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dddd = ["\x02", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var ddd = ["\x03", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    function ii(i, len) {
        var s = i + "";
        len = len || 2;
        while (s.length < len) s = "0" + s;
        return s;
    }

    var y = utc ? date.getUTCFullYear() : date.getFullYear();
    format = format.replace(/(^|[^\\])yyyy+/g, "$1" + y);
    format = format.replace(/(^|[^\\])yy/g, "$1" + y.toString().substr(2, 2));
    format = format.replace(/(^|[^\\])y/g, "$1" + y);

    var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1;
    format = format.replace(/(^|[^\\])MMMM+/g, "$1" + MMMM[0]);
    format = format.replace(/(^|[^\\])MMM/g, "$1" + MMM[0]);
    format = format.replace(/(^|[^\\])MM/g, "$1" + ii(M));
    format = format.replace(/(^|[^\\])M/g, "$1" + M);

    var d = utc ? date.getUTCDate() : date.getDate();
    format = format.replace(/(^|[^\\])dddd+/g, "$1" + dddd[0]);
    format = format.replace(/(^|[^\\])ddd/g, "$1" + ddd[0]);
    format = format.replace(/(^|[^\\])dd/g, "$1" + ii(d));
    format = format.replace(/(^|[^\\])d/g, "$1" + d);

    var H = utc ? date.getUTCHours() : date.getHours();
    format = format.replace(/(^|[^\\])HH+/g, "$1" + ii(H));
    format = format.replace(/(^|[^\\])H/g, "$1" + H);

    var h = H > 12 ? H - 12 : H == 0 ? 12 : H;
    format = format.replace(/(^|[^\\])hh+/g, "$1" + ii(h));
    format = format.replace(/(^|[^\\])h/g, "$1" + h);

    var m = utc ? date.getUTCMinutes() : date.getMinutes();
    format = format.replace(/(^|[^\\])mm+/g, "$1" + ii(m));
    format = format.replace(/(^|[^\\])m/g, "$1" + m);

    var s = utc ? date.getUTCSeconds() : date.getSeconds();
    format = format.replace(/(^|[^\\])ss+/g, "$1" + ii(s));
    format = format.replace(/(^|[^\\])s/g, "$1" + s);

    var f = utc ? date.getUTCMilliseconds() : date.getMilliseconds();
    format = format.replace(/(^|[^\\])fff+/g, "$1" + ii(f, 3));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])ff/g, "$1" + ii(f));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])f/g, "$1" + f);

    var T = H < 12 ? "AM" : "PM";
    format = format.replace(/(^|[^\\])TT+/g, "$1" + T);
    format = format.replace(/(^|[^\\])T/g, "$1" + T.charAt(0));

    var t = T.toLowerCase();
    format = format.replace(/(^|[^\\])tt+/g, "$1" + t);
    format = format.replace(/(^|[^\\])t/g, "$1" + t.charAt(0));

    var tz = -date.getTimezoneOffset();
    var K = utc || !tz ? "Z" : tz > 0 ? "+" : "-";
    if (!utc) {
        tz = Math.abs(tz);
        var tzHrs = Math.floor(tz / 60);
        var tzMin = tz % 60;
        K += ii(tzHrs) + ":" + ii(tzMin);
    }
    format = format.replace(/(^|[^\\])K/g, "$1" + K);

    var day = (utc ? date.getUTCDay() : date.getDay()) + 1;
    format = format.replace(new RegExp(dddd[0], "g"), dddd[day]);
    format = format.replace(new RegExp(ddd[0], "g"), ddd[day]);

    format = format.replace(new RegExp(MMMM[0], "g"), MMMM[M]);
    format = format.replace(new RegExp(MMM[0], "g"), MMM[M]);

    format = format.replace(/\\(.)/g, "$1");

    return format;
};
gilly3
источник
Большое спасибо. Хотя мой последний код нужно было немного подправить, ваше понимание помогло.
Сеонг Ли
Как мне отформатировать дату = "2016/03/01 11:00" до date = "Сб, 1 марта 2016 г., 11:00:00 GMT + 0530 (IST)"
Вишал Сингх
Как MMMM[0]вернуть правильное название месяца вместо непечатаемого символа в индексе 0? Не должно быть MMMM[M]? Я просто тупой? (Nevermind. Он устанавливает его на непечатаемый символ, который он заменяет позже, чтобы избежать конфликтов)
Danegraphics
192

Вы можете попробовать

var d = new Date();
d.toLocaleString();       // -> "2/1/2013 7:37:08 AM"
d.toLocaleDateString();   // -> "2/1/2013"
d.toLocaleTimeString();  // -> "7:38:05 AM"

Документация

Е Лин Аунг
источник
1
почему твой метод у меня не работает? d.toLocaleTimeString()и d.toLocaleTimeString()не работают.
afzalex
@afzalex, ты имеешь в виду, что не получаешь прибыли?
Е Лин Аунг
да. Я не нашел ни одного метода toLocaleTimeString()иtoLocaleTimeString()
afzalex
afzalex попробуйте это: new Date (). toLocaleString ();
blueberry0xff
console.log (новая дата (). toLocaleString ()); // 27.09.2015, 14:52:18
blueberry0xff,
37

Обновление 2017 : используйте toLocaleDateString и toLocaleTimeString для форматирования даты и времени. Первым параметром, передаваемым этим методам, является значение локали, например en-us . Второй параметр, если он присутствует, указывает параметры форматирования, такие как полная форма для дня недели.

let date = new Date();  
let options = {  
    weekday: "long", year: "numeric", month: "short",  
    day: "numeric", hour: "2-digit", minute: "2-digit"  
};  

console.log(date.toLocaleTimeString("en-us", options)); 

Выход: среда, 25 октября 2017 г., 20:19.

Пожалуйста, обратитесь к ссылке ниже для получения более подробной информации.

Строки даты и времени (JavaScript)

Joomler
источник
2
На данный момент - через четыре года после первых ответов на этот вопрос - это сейчас наиболее удобное и гибкое решение и ответ на этот вопрос. Его следует продвигать выше как пример текущей практики (AD 2018) :-)
Jochem Schulenklopper
Порванный. Порт strftime от @thdoan выглядит более гибким. Например, toLocalTimeStringпредлагает 4 стиля даты full long medium short, и, возможно, где-то определено значение этих терминов. Между тем, strftime может (вероятно) соответствовать любому из них и многим другим. С другой стороны, toLocalTimeStringподдерживает часовые пояса. Я надеюсь, что
сюда
15

Вы можете использовать мой порт strftime :

/* Port of strftime(). Compatibility notes:
 *
 * %c - formatted string is slightly different
 * %D - not implemented (use "%m/%d/%y" or "%d/%m/%y")
 * %e - space is not added
 * %E - not implemented
 * %h - not implemented (use "%b")
 * %k - space is not added
 * %n - not implemented (use "\n")
 * %O - not implemented
 * %r - not implemented (use "%I:%M:%S %p")
 * %R - not implemented (use "%H:%M")
 * %t - not implemented (use "\t")
 * %T - not implemented (use "%H:%M:%S")
 * %U - not implemented
 * %W - not implemented
 * %+ - not implemented
 * %% - not implemented (use "%")
 *
 * strftime() reference:
 * http://man7.org/linux/man-pages/man3/strftime.3.html
 *
 * Day of year (%j) code based on Joe Orost's answer:
 * http://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366
 *
 * Week number (%V) code based on Taco van den Broek's prototype:
 * http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
 */
function strftime(sFormat, date) {
  if (!(date instanceof Date)) date = new Date();
  var nDay = date.getDay(),
    nDate = date.getDate(),
    nMonth = date.getMonth(),
    nYear = date.getFullYear(),
    nHour = date.getHours(),
    aDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    aMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    aDayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
    isLeapYear = function() {
      if ((nYear&3)!==0) return false;
      return nYear%100!==0 || nYear%400===0;
    },
    getThursday = function() {
      var target = new Date(date);
      target.setDate(nDate - ((nDay+6)%7) + 3);
      return target;
    },
    zeroPad = function(nNum, nPad) {
      return ('' + (Math.pow(10, nPad) + nNum)).slice(1);
    };
  return sFormat.replace(/%[a-z]/gi, function(sMatch) {
    return {
      '%a': aDays[nDay].slice(0,3),
      '%A': aDays[nDay],
      '%b': aMonths[nMonth].slice(0,3),
      '%B': aMonths[nMonth],
      '%c': date.toUTCString(),
      '%C': Math.floor(nYear/100),
      '%d': zeroPad(nDate, 2),
      '%e': nDate,
      '%F': date.toISOString().slice(0,10),
      '%G': getThursday().getFullYear(),
      '%g': ('' + getThursday().getFullYear()).slice(2),
      '%H': zeroPad(nHour, 2),
      '%I': zeroPad((nHour+11)%12 + 1, 2),
      '%j': zeroPad(aDayCount[nMonth] + nDate + ((nMonth>1 && isLeapYear()) ? 1 : 0), 3),
      '%k': '' + nHour,
      '%l': (nHour+11)%12 + 1,
      '%m': zeroPad(nMonth + 1, 2),
      '%M': zeroPad(date.getMinutes(), 2),
      '%p': (nHour<12) ? 'AM' : 'PM',
      '%P': (nHour<12) ? 'am' : 'pm',
      '%s': Math.round(date.getTime()/1000),
      '%S': zeroPad(date.getSeconds(), 2),
      '%u': nDay || 7,
      '%V': (function() {
              var target = getThursday(),
                n1stThu = target.valueOf();
              target.setMonth(0, 1);
              var nJan1 = target.getDay();
              if (nJan1!==4) target.setMonth(0, 1 + ((4-nJan1)+7)%7);
              return zeroPad(1 + Math.ceil((n1stThu-target)/604800000), 2);
            })(),
      '%w': '' + nDay,
      '%x': date.toLocaleDateString(),
      '%X': date.toLocaleTimeString(),
      '%y': ('' + nYear).slice(2),
      '%Y': nYear,
      '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
      '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
    }[sMatch] || sMatch;
  });
}

Пример использования:

// Returns "Thursday 4:45pm 15 Sep 2016"
strftime('%A %l:%M%P %e %b %Y');

// You can optionally pass it a Date object
// Returns "Friday 2:00pm 1 Feb 2013"
strftime('%A %l:%M%P %e %b %Y', new Date('Feb 1, 2013 2:00 PM'));

Последний код доступен здесь: https://github.com/thdoan/strftime

thdoan
источник
Это круто. Огромное спасибо.
PerpetualStudent
6

Посмотрите на внутреннее устройство класса Date, и вы увидите, что вы можете извлечь все биты (дату, месяц, год, час и т. Д.).

http://www.w3schools.com/jsref/jsref_obj_date.asp

Для чего-то вроде Fri 23:00 1 Feb 2013кода:

date = new Date();

weekdayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dateString = weekdayNames[date.getDay()] + " " 
    + date.getHours() + ":" + ("00" + date.getMinutes()).slice(-2) + " " 
    + date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear();

console.log(dateString);

**** Изменено 2019-05-29, чтобы 3 человека против

Ли Мидор
источник
10
w3schools не очень хорош. См. W3fools . Лучшие справочные источники включают MDN и MSDN .
gilly3 01
Date # getDay возвращает целое число, а не название дня недели. Кроме того, imho MDN хуже справляется с быстрым пониманием объекта Date, поэтому я не понимаю, почему должно иметь место пренебрежение.
Ninjaxor
Проблема в date.getMinutes()том, что он возвращает одну цифру, когда минуты меньше 10, что приводит к временам типа «10: 4 утра» вместо более распространенного «10:04 утра».
Йохем Шуленклоппер
@JochemSchulenklopper Добавлен код без даты для отображения начального нуля в минутах
Ли
@Ninjaxor Добавлен код, не связанный с датой, для преобразования числа в строку. Это должно сработать, если вам нужны английские имена.
Ли
4

Есть много отличных библиотек для заинтересованных

В наши дни действительно не должно быть необходимости изобретать собственные спецификаторы форматирования.

slf
источник
Просто хочу упомянуть, что по состоянию на октябрь 2017 года momentэто текущий стандарт для связанных со временем вещей в Javascript.
shawon191 01
спасибо @ shawon191 за обновление :) да, молодцы moment. d3также добавил немного времени, поэтому, если вы уже используете его, вы можете сохранить импорт библиотеки github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format
slf 02
1

2,39 КБ уменьшено. Один файл. https://github.com/rhroyston/clock-js

Текущее время

var str = clock.month;
var m = str.charAt(0).toUpperCase() + str.slice(1,3); //gets you abbreviated month
clock.weekday + ' ' + clock.time + ' ' + clock.day + ' ' + m + ' ' + clock.year; //"tuesday 5:50 PM 3 May 2016"
Ронни Ройстон
источник
1

d = Date.now();
d = new Date(d);
d = (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear()+' '+(d.getHours() > 12 ? d.getHours() - 12 : d.getHours())+':'+d.getMinutes()+' '+(d.getHours() >= 12 ? "PM" : "AM");

console.log(d);

Крис
источник
0

Для работы с базовым классом Date вы можете посмотреть его методы в MDN (по этой причине вместо W3Schools ). Там вы можете найти хорошее описание каждого метода, полезного для доступа к каждому отдельному компоненту даты / времени, и информацию о том, является ли метод устаревшим или нет.

В противном случае вы можете посмотреть Moment.js, который является хорошей библиотекой для обработки даты и времени. Вы можете использовать его для управления датой и временем (например, синтаксический анализ, форматирование, i18n и т. Д.).

Рагнароккр
источник
0
function formatTime(date){

  d = new Date(date);
  var h=d.getHours(),m=d.getMinutes(),l="AM";
  if(h > 12){
    h = h - 12;
  }
  if(h < 10){
    h = '0'+h;
  }
  if(m < 10){
    m = '0'+m;
  }
  if(d.getHours() >= 12){
    l="PM"
  }else{
    l="AM"
  }

  return h+':'+m+' '+l;

}

Использование и результат:

var formattedTime=formatTime(new Date('2020 15:00'));
// Output: "03:00 PM"
Саймон
источник
0

Для этого истинного стиля mysql используйте эту функцию ниже: 2019/02/28 15:33:12

  • Если вы щелкните
  • Кнопка "Запустить фрагмент кода" ниже
  • Он покажет вам простой пример цифровых часов в реальном времени. Демонстрация появится под фрагментом кода.

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) {
             month = '0'+month;
        }
        if(day.toString().length == 1) {
             day = '0'+day;
        }   
        if(hour.toString().length == 1) {
             hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
             minute = '0'+minute;
        }
        if(second.toString().length == 1) {
             second = '0'+second;
        }   
        var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;   
         return dateTime;
    }

    // example usage: realtime clock
    setInterval(function(){
        currentTime = getDateTime();
        document.getElementById("digital-clock").innerHTML = currentTime;
    }, 1000);
<div id="digital-clock"></div>

Дэниел Ли
источник
-1

ISO8601 (например: ЧЧ: ММ: СС, 07:55:55 или 18:50:30) на хром:

новая дата (Date.now ()). toTimeString (). substr (0,8);

раздраженный :

новая дата (Date.now ()). toLocaleTimeString ();

Ваэль Чорфан
источник
-3
function startTime() {
    var today = new Date(),
        h = checkTime(((today.getHours() + 11) % 12 + 1)),
        m = checkTime(today.getMinutes()),
        s = checkTime(today.getSeconds());
    document.getElementById('demo').innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function () {
        startTime()
    }, 500);
}
startTime();

}) ();

05:12:00

Умашанкар Чаудхари
источник
Ваш ответ никоим образом не отвечает OP.
Sнаđошƒаӽ 02
Что такое функция checkTime?
Weijing Jay Lin
-5

let date = new Date();
let time = date.format("hh:ss")

Владимир Олейников
источник
3
Выполнение кода дает ошибку: Uncaught TypeError: date.format не является функцией
Alex Leo