Как отформатировать дату в JavaScript

2223

В JavaScript, как я могу отформатировать объект даты для печати как 10-Aug-2010?

Лиора
источник
205
Как обычно: остерегайтесь МЕСЯЦ - НУЛЕВОЙ ИНДЕКС! Итак, январь ноль, а не один ...
Кристоф Русси
12
Также будьте осторожны, myDate.getDay()не возвращает день недели, но местоположение дня недели, связанного с неделей. myDate.getDate()возвращает текущий день недели .
Jimenemex
3
Для форматирования DateTimes в javascript используйте Intl.DateTimeFormatобъект. Я опишу это в своем посте: Пост . Я создаю онлайн решение для вашего ответа от Intl.DateTimeFormat Check Online
Иман Бахрампур
5
Вы можете использоватьtoLocaleDateString
onmyway133
12
Javascript потребовалось так много времени, чтобы получить URL как стандартизированный объект, где вы можете извлечь ключ параметра запроса, получить протокол, получить домен верхнего уровня и т. Д. Они могут сделать ES6 ES7, но все еще не могут просто установить стандартную дату Форматер времени / парсер в 2019 году? Как будто они думают: «Хм, да ... кому на земле, использующему javascript, нужно регулярно работать со временем и датами…»
ahnbizcad

Ответы:

1293

Для пользовательских форматов даты с разделителями необходимо извлечь компоненты даты (или времени) из DateTimeFormatобъекта (который является частью API интернационализации ECMAScript ), а затем вручную создать строку с необходимыми разделителями.

Для этого вы можете использовать DateTimeFormat#formatToParts:

const date = new Date('2010-08-05')
const dateTimeFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' }) 
const [{ value: month },,{ value: day },,{ value: year }] = dateTimeFormat .formatToParts(date ) 

console.log(`${day}-${month}-${year }`)
console.log(`${day}👠${month}👢${year}`) // just for fun

Вы также можете вытащить части DateTimeFormatодин за другим с помощью DateTimeFormat#format, но учтите, что при использовании этого метода, с марта 2020 года, в реализации ECMAScript есть ошибка, когда речь идет о ведущих нулях по минутам и секундам (эта ошибка обходится подходом выше).

const d = new Date('2010-08-05')
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d)
const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d)
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d)

console.log(`${da}-${mo}-${ye}`)

При работе с датами и временем обычно стоит использовать библиотеку (например, moment.js , luxon ) из-за множества скрытых сложностей поля.

Обратите внимание, что Интернационализация API ECMAScript, используемая в вышеупомянутых решениях, не поддерживается в IE10 ( 0,03% глобальной доли рынка браузеров в феврале 2020 года).

Marko
источник
370
Действительно подумайте об использовании библиотеки, такой как Moment.js или Date.js. Эта проблема была решена много раз.
Бенджамин Оукс
242
Почему они не включают функцию в Dateобъект для этого?
Наян
68
Важным моментом является то, что метод getMonth () возвращает индекс месяца на основе 0, поэтому, например, январь вернет 0, февраль вернет 1 и т. Д.
Marko
628
моментом jj 2.9.0 является сжатый 11.6k, этот пример - 211 байтов .
mrzmyr
26
Следует отметить, что вы никогда не должны использовать document.write (). Огромные проблемы с безопасностью и производительностью.
Мэтт Дженсен
2010

Если вам нужно немного меньше контроля над форматированием, чем принятый в настоящее время ответ, Date#toLocaleDateStringего можно использовать для создания стандартных языковых визуализаций. localeИ optionsаргументы позволяют приложениям указывать язык форматирования , чьи конвенции должны быть использованы, и позволяют некоторые настройки отрисовки.

Варианты ключевых примеров:

  1. день:
    представление дня.
    Возможные значения: «числовой», «2-значный».
  2. будний день:
    представление дня недели.
    Возможные значения: «узкий», «короткий», «длинный».
  3. год:
    представление года.
    Возможные значения: «числовой», «2-значный».
  4. месяц:
    представление месяца.
    Возможные значения: «числовой», «2-значный», «узкий», «короткий», «длинный».
  5. час:
    представление часа.
    Возможные значения: «числовой», «2-значный».
  6. минута: представление минуты.
    Возможные значения: «числовой», «2-значный».
  7. второй:
    представление второго.
    Возможные значения: «числовые», 2-значные ».

Все эти ключи являются необязательными. Вы можете изменить количество значений параметров в соответствии с вашими требованиями, и это также будет отражать наличие каждой даты и времени.

Примечание. Если вы хотите настроить только параметры содержимого, но при этом использовать текущую локаль, передача nullпервого параметра вызовет ошибку. использованиеundefined вместо этого.

Для разных языков:

  1. "EN-US": для английского
  2. "Привет-IN": для хинди
  3. "ja-JP": для японцев

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

Например

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

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

// Example
9/17/2016, 1:21:34 PM

Ссылки:

Аджит Каноджа
источник
45
Почти собирался использовать moment.jsдля простого формата. К счастью, сделал дополнительный поиск в Google и обнаружил, что для этого уже существует нативный API. Сохранена внешняя зависимость. Потрясающие!
Леон - Хан Ли
21
Похоже, этот ответ должен быть лучшим «текущим» ответом. Также используется опция «hour12: true», чтобы использовать 12-часовой или 24-часовой формат. Возможно, следует добавить в ваш сводный список в ответе.
Дуг Кнудсен
14
Я не получил возражений по этому ответу. Это не решает проблему в вопросе. (т.е. дай мне дату, которая выглядит как 10 августа 2010 года). Использование toLocaleDateString () довольно сложно. Библиотека date.format, кажется, является лучшим решением (по крайней мере, для пользователей Node)
Iarwa1n
3
Если передача undefinedв качестве первого параметра локали кажется произвольной, вы можете вместо этого передать значение, "default"чтобы использовать настройки локали браузера, согласно документам MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
wbharding
3
@ Iarwa1n Этот ответ не упоминается, но вы можете использовать toLocaleDateString, чтобы вернуть только определенные части, к которым вы можете присоединиться по своему усмотрению. Проверьте мой ответ ниже. date.toLocaleDateString("en-US", { day: 'numeric' }) + "-"+ date.toLocaleDateString("en-US", { month: 'short' }) + "-" + date.toLocaleDateString("en-US", { year: 'numeric' })должен дать16-Nov-2019
К
609

Используйте библиотеку date.format :

var dateFormat = require('dateformat');
var now = new Date();
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

возвращает:

Saturday, June 9th, 2007, 5:46:21 PM 

формат даты на нпм

http://jsfiddle.net/phZr7/1/

RobertPitt
источник
4
может показаться, что это более длинное решение, но сжатое и используемое на сайте, где справедливо используются даты, было бы лучшим решением!
Роберт Питт
5
Это решение также доступно в виде пакета npm: npmjs.com/package/dateformat
Дэвид
19
Есть 14 открытых вопросов с вышеупомянутым плагином. Даже я его нашел :(
Амит Кумар Гупта
6
Я получаюrequire is not defined
Hooli
16
ОП попросил JS решение
Люк Принг
524

Если вам нужно быстро отформатировать дату , используя обычный JavaScript, использование getDate, getMonth + 1, getFullYear, getHoursи getMinutes:

var d = new Date();

var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();

// 16-5-2015 9:50

Или, если вам нужно заполнить нулями:

var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);

// 16-05-2015 09:50
sebastian.i
источник
Можете ли вы рассказать, как получить формат, как понедельник, 23 марта 2018 года?
Сачин
@SachinHR, см. Предыдущий ответ: stackoverflow.com/a/34015511/4161032 . toLocaleDateString()Может отформатировать дату , используя локализованные имена месяц / день.
Себастьян.i
12
Вы также можете .toString().padStart(2, '0')
заполнить
1
@DmitryoN, если необходимо, год можно дополнить аналогичным образом:("000" + d.getFullYear()).slice(-4)
sebastian.i
4
@BennyJobigan Следует отметить , что String.padStart()доступно только ECMAScript 2017.
JHH
414

Ну, я хотел преобразовать сегодняшнюю дату в строку даты, удобную для MySQL, такую ​​как 2012-06-23, и использовать эту строку в качестве параметра в одном из моих запросов. Я нашел простое решение:

var today = new Date().toISOString().slice(0, 10);

Имейте в виду, что вышеприведенное решение не учитывает смещение вашего часового пояса.

Вы можете рассмотреть возможность использования этой функции вместо:

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}

Это даст вам правильную дату в случае, если вы выполняете этот код в начале / конце дня.

Симо
источник
9
Вы можете сделать, new Date(date + " UTC")чтобы обмануть часовой пояс, и вы можете удалить строку setMinutes. Человек, яваскрипт грязный
Вайк Хермеч
23
Y10K-совместимая версия: var today = new Date().toISOString().slice(0,-14):)
Алекс Шаффер
23
Или вот такnew Date().toISOString().split('T')[0]
rofrol
4
new Date().toISOString().slice(0, 16).replace('T',' ')включить время
Gerrie van Wyk
3
Просто комментируя, что отсутствие часового пояса не является небольшим неудобством "в начале / конце дня". В Австралии, например, дата может быть неправильной примерно до 11 утра - почти половина дня!
Стив Беннетт
230

Пользовательская функция форматирования:

Для фиксированных форматов, простая функция сделать работу. В следующем примере генерируется международный формат YYYY-MM-DD:

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

Формат OP может быть сгенерирован как:

function dateToYMD(date) {
    var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var d = date.getDate();
    var m = strArray[date.getMonth()];
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
}
console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

Примечание: однако, как правило, не стоит расширять стандартные библиотеки JavaScript (например, добавляя эту функцию в прототип Date).

Более продвинутая функция может генерировать настраиваемый вывод на основе параметра формата.

Если написать функцию форматирования слишком долго, есть множество библиотек, вокруг которых это делается. Некоторые другие ответы уже перечисляют их. Но у растущих зависимостей есть и противоположность.

Стандартные функции форматирования ECMAScript:

Начиная с более поздних версий ECMAScript, Dateкласс имеет некоторые специфические функции форматирования:

toDateString : зависит от реализации, показывает только дату.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.todatestring

new Date().toDateString(); // e.g. "Fri Nov 11 2016"

toISOString : Показать дату и время ISO 8601.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.toisostring

new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

toJSON : Stringifier для JSON.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tojson

new Date().toJSON(); // e.g. "2016-11-21T08:00:00.000Z"

toLocaleDateString : реализации, дата в формате локали.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaledatestring

new Date().toLocaleDateString(); // e.g. "21/11/2016"

toLocaleString : зависит от реализации, даты и времени в формате локали.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocalestring

new Date().toLocaleString(); // e.g. "21/11/2016, 08:00:00 AM"

toLocaleTimeString : зависит от реализации, время в формате локали.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaletimestring

new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

: универсальный toString для даты.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tostring

new Date().toString(); // e.g. "Fri Nov 21 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

Примечание: из этого форматирования можно генерировать пользовательский вывод>

new Date().toISOString().slice(0,10); //return YYYY-MM-DD

Примеры фрагментов:

console.log("1) "+  new Date().toDateString());
console.log("2) "+  new Date().toISOString());
console.log("3) "+  new Date().toJSON());
console.log("4) "+  new Date().toLocaleDateString());
console.log("5) "+  new Date().toLocaleString());
console.log("6) "+  new Date().toLocaleTimeString());
console.log("7) "+  new Date().toString());
console.log("8) "+  new Date().toISOString().slice(0,10));

Адриан Мэйр
источник
3
Спасибо за последний. Полезно для установки значения даты для ввода даты HTML.
daCoda
new Date().toLocaleDateString()дает вам, пожалуйста, mm/dd/yyyyне dd/mm/yyyyисправить это.
Aarvy
1
@RajanVerma: toLocaleDateString предоставляет ваш язык, который, вероятно, равен mm / dd / yyyy, потому что вы находитесь в США. Здесь локаль для даты - дд / мм / гггг (это точно точка «локали»). Я написал «например», потому что это не спецификация, а пример вывода.
Адриан Мэр
177

Если вы уже используете JQuery UI в своем проекте, вы можете сделать это следующим образом:

var formatted = $.datepicker.formatDate("M d, yy", new Date("2014-07-08T09:02:21.377"));

// formatted will be 'Jul 8, 2014'

Некоторые опции формата даты для выбора даты доступны здесь .

Дмитрий Павлов
источник
13
Как я уже сказал - если jQueryUI уже используется в проекте - почему бы не использовать функцию форматирования даты datepicker? Эй, ребята, я не понимаю, почему я получаю отрицательное голосование по моему ответу? Пожалуйста, объясни.
Дмитрий Павлов
7
Это может быть потому, что кто-то может включить пользовательский интерфейс jQuery только для функции формата даты, или это может быть потому, что средство выбора даты является необязательной частью библиотеки, но, вероятно, это потому, что ненавидеть jQuery модно.
Сеннетт
12
Я не думаю, что возможно полностью избежать всех странных решений, которые кто-то мог сделать по ошибке или из-за отсутствия смысла.
Дмитрий Павлов
7
@sennett: ненавидеть JQuery это модно? Так что ходите с штанами наполовину вниз по ногам, я полагаю ... это почти то же самое, что пытаться кодировать без jQuery для большей части истории JavaScript ...
Майкл Шепер
5
В любом случае, это полезный и вполне разумный ответ - опять же, 70% веб-сайтов используют jQuery. Это не должно быть понижено из-за религиозных убеждений разработчиков.
Майкл Шепер,
133

Я думаю, что вы можете просто использовать нестандартный метод DatetoLocaleFormat(formatString)

formatString: строка формата в том же формате, который ожидается strftime()функцией в C.

var today = new Date();
today.toLocaleFormat('%d-%b-%Y'); // 30-Dec-2011

Ссылки:

Себастьен
источник
160
toLocaleFormat () работает только в Firefox. И IE, и Chrome терпят неудачу для меня.
fitzgeraldsteele
16
В Chrome есть метод .toLocaleString ('en'). Похоже, что новый браузер поддерживает этот developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
apocalypz
8
Прочитайте предупреждение здесь: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Карсон Рейнке,
6
это было бы наилучшим решением, если бы каждый мог реализовать его. блин ты т.е / хром
санта
6
@ Санта: Действительно. Возможно, была веская причина не следовать примеру Mozilla в этом, но тот факт, что даже ES6 не имеет стандартной функции для этого, показывает, что это по-прежнему язык хакера, а не язык разработчика.
Майкл Шепер,
105

Простой JavaScript - лучший выбор для маленьких пользователей.

С другой стороны, если вам нужно больше информации о дате, MomentJS - отличное решение.

Например:

moment().format('YYYY-MM-DD HH:m:s');     // now() -> 2015-03-24 14:32:20
moment("20111031", "YYYYMMDD").fromNow(); // 3 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow();        // 11 hours ago
moment().endOf('day').fromNow();          // in 13 hours
Клещ Митрески
источник
2
важно упомянуть: не используйте, YYYYесли вы не знаете разницу между YYYYи yyyy: stackoverflow.com/questions/15133549/…
Домин
@Domin это специфично для NSDateFormatter в iOS, как используется, например, в Objective-C или Swift. Этот вопрос касается Javascript в браузере, и в этом ответе используется MomentJS, в котором YYYY(не yyyy) это стандартный год, а GGGG(не YYYY) это год в неделях ISO.
Марк Рид
2
Момент на 100% не устарел @ Джерри
Лиам
97

В современных браузерах (*) вы можете просто сделать это:

var today = new Date().toLocaleDateString('en-GB', {
    day : 'numeric',
    month : 'short',
    year : 'numeric'
}).split(' ').join('-');

Выходные данные, если выполнены сегодня (24 января 2016 г.):

'24-Jan-2016'

(*) Согласно MDN , «современные браузеры» означают ночные сборки Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ и Safari .

Джон Слегерс
источник
Есть ли способ проверить, поддерживается ли эта функция, и если нет, по умолчанию для более простого решения?
Джеймс Вежба
@JamesWierzba: Вы можете использовать этот polyfill !
Джон Слегерс
Это даже не перечислено на caniuse.com: /
Чарльз Вуд
51

Вы должны взглянуть на date.js . Он добавляет множество удобных помощников для работы с датами, например, в вашем случае:

var date = Date.parse('2010-08-10');
console.log(date.toString('dd-MMM-yyyy'));

Начало работы: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Niko
источник
Спасибо. Это очень полная и полная библиотека с небольшим размером.
mitcheljh
Я думаю, что в настоящее время я получаю число из Date.parse, в то время как let date = new Date (fromString) имеет больше функций. К сожалению, к моему удивлению, toString, похоже, просто отображает значение по умолчанию, не интерпретируя переданный аргумент для его форматирования. Использование NodeJS 11+ toDateString является более коротким выводом, но не требует форматирования. Все, что я вижу, это очень запутанный toLocaleDateString
Мастер Джеймс
38

Я могу получить ваш запрошенный формат в одну строку без использования библиотек и методов Date, просто regex:

var d = (new Date()).toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3');
// date will be formatted as "14-Oct-2015" (pass any date object in place of 'new Date()')

В моем тестировании это работало надежно в основных браузерах (Chrome, Safari, Firefox и IE.) Как указывало @RobG, выходные данные Date.prototype.toString () зависят от реализации, поэтому просто проверьте выходные данные, чтобы убедиться, что это работает прямо в вашем движке JavaScript. Вы даже можете добавить некоторый код для проверки вывода строки и убедиться, что он соответствует ожидаемому, прежде чем выполнять регулярное выражение.

Джей Смит
источник
console.log(new Date().toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3'));
Джон
@ Андре - я согласен. Если бы это был мой код, я бы наверняка включил в него комментарий, который объясняет регулярное выражение и дает пример ввода и соответствующего вывода.
ДжейДи Смит
как насчет временной части (ЧЧ: мм: сс)?
unruledboy
@unruledboy var d = (new Date ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * / , '$ 2- $ 1- $ 3 $ 4'); - или чтобы получить только часть времени без самой даты, используйте: var d = (new Date ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ S (\ S +) \ S * /, '$ 4').
ДжейДи Смит
37

@ Sébastien - альтернатива всем браузерам

new Date(parseInt(496407600)*1000).toLocaleDateString('de-DE', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).replace(/\./g, '/');

Документация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

user956584
источник
5
Вместо того, чтобы делать .replace (), вы можете просто использовать 'en-GB' в качестве локали. :)
Roberto14
1
Это действительно хорошо, например, new Date().toLocaleDateString("en-EN", {month: "short", weekday: "short", day: "2-digit", year: "numeric"})возвращается"Wed, Sep 06, 2017"
Питер Т.
37

Хорошо , у нас есть нечто, называемое Intl, которое очень полезно для форматирования даты в JavaScript в наши дни:

Ваша дата как ниже:

var date = '10/8/2010';

И вы меняете на Date, используя new Date (), как показано ниже:

date = new Date(date);

И теперь вы можете отформатировать его так, как вам нравится, используя список локалей, как показано ниже:

date = new Intl.DateTimeFormat('en-AU').format(date); // Australian date format: "8/10/2010" 


date = new Intl.DateTimeFormat('en-US').format(date); // USA date format: "10/8/2010" 


date = new Intl.DateTimeFormat('ar-EG').format(date);  // Arabic date format: "٨‏/١٠‏/٢٠١٠"

Если вы точно хотите формат, который вы упомянули выше, вы можете сделать:

date = new Date(Date.UTC(2010, 7, 10, 0, 0, 0));
var options = {year: "numeric", month: "short", day: "numeric"};
date = new Intl.DateTimeFormat("en-AU", options).format(date).replace(/\s/g, '-');

И результат будет:

"10-Aug-2010"

Для получения дополнительной информации см. Документацию Intl API и Intl.DateTimeFormat .

Алиреза
источник
Не поддерживается IE
Штаны
Это всего лишь IE11, IE10 - был изжил до того, как это существовало, так что это понятно. 92% от caniuse, что очень хорошо caniuse.com/#search=datetimeformat
Тофандель
32

Использование строкового шаблона ECMAScript Edition 6 (ES6 / ES2015):

let d = new Date();
let formatted = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;

Если вам нужно изменить разделители:

const delimiter = '/';
let formatted = [d.getFullYear(), d.getMonth() + 1, d.getDate()].join(delimiter);
vdegenne
источник
30

Упакованное решение: Luxon

Если вы хотите использовать одно решение для всех, я настоятельно рекомендую использовать Luxon (модернизированную версию Moment.js). ), который также выполняет форматирование во многих локалях / языках и множестве других функций.

Luxon размещен на веб-сайте Moment.js и разработан разработчиком Moment.js, поскольку Moment.js имеет ограничения, которые разработчик хотел бы устранить, но не смог.

Установить:

npm install luxonили yarn add luxon(посетите ссылку для других методов установки)

Пример:

luxon.DateTime.fromISO('2010-08-10').toFormat('yyyy-LLL-dd');

Урожайность:

10-августа-2010

Ручное решение

Используя форматирование, аналогичное Moment.js, Class DateTimeFormatter (Java) и Class SimpleDateFormat (Java) , я реализовал комплексное решение, в formatDate(date, patternStr)котором код легко читать и изменять. Вы можете отобразить дату, время, AM / PM и т. Д. См. Код для большего количества примеров.

Пример:

formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss:S')

( formatDateреализовано в фрагменте кода ниже)

Урожайность:

Пятница, 12 октября 2018 года 18: 11: 23: 445

Попробуйте ввести код, нажав «Выполнить фрагмент кода».

Шаблоны даты и времени

yy= Двухзначный год; yyyy= полный год

M= цифра месяц; MM= Двухзначный месяц; MMM= короткое название месяца; MMMM= полное название месяца

EEEE= полное название дня недели; EEE= короткое название дня недели

d= цифра день; dd= Двухзначный день

h= часы утра / вечера; hh= Двузначные часы утра / вечера; H= часы; HH= Двухзначные часы

m= минуты; mm= Двузначные минуты; aaa= AM / PM

s= секунды; ss= 2-значные секунды

S = миллисекунды

var monthNames = [
  "January", "February", "March", "April", "May", "June", "July",
  "August", "September", "October", "November", "December"
];
var dayOfWeekNames = [
  "Sunday", "Monday", "Tuesday",
  "Wednesday", "Thursday", "Friday", "Saturday"
];
function formatDate(date, patternStr){
    if (!patternStr) {
        patternStr = 'M/d/yyyy';
    }
    var day = date.getDate(),
        month = date.getMonth(),
        year = date.getFullYear(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds(),
        miliseconds = date.getMilliseconds(),
        h = hour % 12,
        hh = twoDigitPad(h),
        HH = twoDigitPad(hour),
        mm = twoDigitPad(minute),
        ss = twoDigitPad(second),
        aaa = hour < 12 ? 'AM' : 'PM',
        EEEE = dayOfWeekNames[date.getDay()],
        EEE = EEEE.substr(0, 3),
        dd = twoDigitPad(day),
        M = month + 1,
        MM = twoDigitPad(M),
        MMMM = monthNames[month],
        MMM = MMMM.substr(0, 3),
        yyyy = year + "",
        yy = yyyy.substr(2, 2)
    ;
    // checks to see if month name will be used
    patternStr = patternStr
      .replace('hh', hh).replace('h', h)
      .replace('HH', HH).replace('H', hour)
      .replace('mm', mm).replace('m', minute)
      .replace('ss', ss).replace('s', second)
      .replace('S', miliseconds)
      .replace('dd', dd).replace('d', day)
      
      .replace('EEEE', EEEE).replace('EEE', EEE)
      .replace('yyyy', yyyy)
      .replace('yy', yy)
      .replace('aaa', aaa);
    if (patternStr.indexOf('MMM') > -1) {
        patternStr = patternStr
          .replace('MMMM', MMMM)
          .replace('MMM', MMM);
    }
    else {
        patternStr = patternStr
          .replace('MM', MM)
          .replace('M', M);
    }
    return patternStr;
}
function twoDigitPad(num) {
    return num < 10 ? "0" + num : num;
}
console.log(formatDate(new Date()));
console.log(formatDate(new Date(), 'dd-MMM-yyyy')); //OP's request
console.log(formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss.S aaa'));
console.log(formatDate(new Date(), 'EEE, MMM d, yyyy HH:mm'));
console.log(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss.S'));
console.log(formatDate(new Date(), 'M/dd/yyyy h:mmaaa'));

Спасибо, Джерри, за то, что воспитали Люксон.

lewdev
источник
1
Кстати, хлопотный SimpleDateFormatкласс был вытеснен классом много лет назад java.time.format.DateTimeFormatter.
Василий Бурк
1
@BasilBourque, отметил. Они оба используют одни и те же шаблоны. Я был на проекте до Java8 в течение 5 лет, поэтому я никогда не сталкивался с новыми вещами. Спасибо!
августа,
См. Проект ThreeTen-Backport для Java 6 и 7, чтобы получить большую часть функциональности java.time с почти идентичным API.
Василий Бурк
@BasilBourque спасибо за ссылку, но я больше не работаю над этим проектом, но я обязательно учту это, когда он появится.
lewdev
2
момент устарел, используйте Luxon
Джерри
19

Вот код, который я только что написал для обработки форматирования даты для проекта, над которым я работаю. Он имитирует функциональность форматирования даты в PHP в соответствии с моими потребностями. Не стесняйтесь использовать его, он просто расширяет уже существующий объект Date (). Возможно, это не самое элегантное решение, но оно работает для моих нужд.

var d = new Date(); 
d_string = d.format("m/d/Y h:i:s");

/**************************************
 * Date class extension
 * 
 */
    // Provide month names
    Date.prototype.getMonthName = function(){
        var month_names = [
                            'January',
                            'February',
                            'March',
                            'April',
                            'May',
                            'June',
                            'July',
                            'August',
                            'September',
                            'October',
                            'November',
                            'December'
                        ];

        return month_names[this.getMonth()];
    }

    // Provide month abbreviation
    Date.prototype.getMonthAbbr = function(){
        var month_abbrs = [
                            'Jan',
                            'Feb',
                            'Mar',
                            'Apr',
                            'May',
                            'Jun',
                            'Jul',
                            'Aug',
                            'Sep',
                            'Oct',
                            'Nov',
                            'Dec'
                        ];

        return month_abbrs[this.getMonth()];
    }

    // Provide full day of week name
    Date.prototype.getDayFull = function(){
        var days_full = [
                            'Sunday',
                            'Monday',
                            'Tuesday',
                            'Wednesday',
                            'Thursday',
                            'Friday',
                            'Saturday'
                        ];
        return days_full[this.getDay()];
    };

    // Provide full day of week name
    Date.prototype.getDayAbbr = function(){
        var days_abbr = [
                            'Sun',
                            'Mon',
                            'Tue',
                            'Wed',
                            'Thur',
                            'Fri',
                            'Sat'
                        ];
        return days_abbr[this.getDay()];
    };

    // Provide the day of year 1-365
    Date.prototype.getDayOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((this - onejan) / 86400000);
    };

    // Provide the day suffix (st,nd,rd,th)
    Date.prototype.getDaySuffix = function() {
        var d = this.getDate();
        var sfx = ["th","st","nd","rd"];
        var val = d%100;

        return (sfx[(val-20)%10] || sfx[val] || sfx[0]);
    };

    // Provide Week of Year
    Date.prototype.getWeekOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    } 

    // Provide if it is a leap year or not
    Date.prototype.isLeapYear = function(){
        var yr = this.getFullYear();

        if ((parseInt(yr)%4) == 0){
            if (parseInt(yr)%100 == 0){
                if (parseInt(yr)%400 != 0){
                    return false;
                }
                if (parseInt(yr)%400 == 0){
                    return true;
                }
            }
            if (parseInt(yr)%100 != 0){
                return true;
            }
        }
        if ((parseInt(yr)%4) != 0){
            return false;
        } 
    };

    // Provide Number of Days in a given month
    Date.prototype.getMonthDayCount = function() {
        var month_day_counts = [
                                    31,
                                    this.isLeapYear() ? 29 : 28,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31
                                ];

        return month_day_counts[this.getMonth()];
    } 

    // format provided date into this.format format
    Date.prototype.format = function(dateFormat){
        // break apart format string into array of characters
        dateFormat = dateFormat.split("");

        var date = this.getDate(),
            month = this.getMonth(),
            hours = this.getHours(),
            minutes = this.getMinutes(),
            seconds = this.getSeconds();
        // get all date properties ( based on PHP date object functionality )
        var date_props = {
            d: date < 10 ? '0'+date : date,
            D: this.getDayAbbr(),
            j: this.getDate(),
            l: this.getDayFull(),
            S: this.getDaySuffix(),
            w: this.getDay(),
            z: this.getDayOfYear(),
            W: this.getWeekOfYear(),
            F: this.getMonthName(),
            m: month < 10 ? '0'+(month+1) : month+1,
            M: this.getMonthAbbr(),
            n: month+1,
            t: this.getMonthDayCount(),
            L: this.isLeapYear() ? '1' : '0',
            Y: this.getFullYear(),
            y: this.getFullYear()+''.substring(2,4),
            a: hours > 12 ? 'pm' : 'am',
            A: hours > 12 ? 'PM' : 'AM',
            g: hours % 12 > 0 ? hours % 12 : 12,
            G: hours > 0 ? hours : "12",
            h: hours % 12 > 0 ? hours % 12 : 12,
            H: hours,
            i: minutes < 10 ? '0' + minutes : minutes,
            s: seconds < 10 ? '0' + seconds : seconds           
        };

        // loop through format array of characters and add matching data else add the format character (:,/, etc.)
        var date_string = "";
        for(var i=0;i<dateFormat.length;i++){
            var f = dateFormat[i];
            if(f.match(/[a-zA-Z]/g)){
                date_string += date_props[f] ? date_props[f] : '';
            } else {
                date_string += f;
            }
        }

        return date_string;
    };
/*
 *
 * END - Date class extension
 * 
 ************************************/
jmiraglia
источник
18

Решение JavaScript без использования каких-либо внешних библиотек:

var now = new Date()
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
var formattedDate = now.getDate() + "-" + months[now.getMonth()] + "-" + now.getFullYear()
alert(formattedDate)
Прасад DLV
источник
16

new Date().toLocaleDateString()

// "3/21/2018"

Больше документации на developer.mozilla.org

Кирк Стробек
источник
1
Следует отметить, что вы никогда не должны использовать document.write (). Огромные проблемы с безопасностью и производительностью
Евгений Фиделин
15

Если в вашем коде используется пользовательский интерфейс jQuery, существует встроенная функция formatDate(). Я использую его для форматирования сегодняшней даты:

var testdate = Date();
testdate = $.datepicker.formatDate( "d-M-yy",new Date(testdate));
alert(testdate);

Вы можете увидеть много других примеров форматирования даты в документации по jQuery UI .

webzy
источник
15

У нас есть много решений для этого, но я думаю, что лучшим из них является Moment.js. Поэтому я лично предлагаю использовать Moment.js для операций с датой и временем.

console.log(moment().format('DD-MMM-YYYY'));
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

Виджей Махерия
источник
почему ты включаешь jquery?
Ced
1
Ой, извините, его не требуется. Спасибо @Ced
Виджей Махерия
как предоставить дату, которую я должен в момент.js? Я думаю, что это всегда занимает время.
Дэйв Ранджан
1
@DaveRanjan Я думаю, вам нужно преобразовать свою дату. Поэтому используйте это: console.log (moment ('2016-08-10'). Format ('DD-MMM-YYYY'));
Виджей Махерия
Да, разобрался позже. Спасибо :)
Дейв Ранджан
15

Полезный и гибкий способ форматирования DateTimes в JavaScript Intl.DateTimeFormat:

var date = new Date();
var options = { year: 'numeric', month: 'short', day: '2-digit'};
var _resultDate = new Intl.DateTimeFormat('en-GB', options).format(date);
// The _resultDate is: "12 Oct 2017"
// Replace all spaces with - and then log it.
console.log(_resultDate.replace(/ /g,'-'));

Результат "12-Oct-2017"

Форматы даты и времени можно настроить с помощью аргумента параметров.

Intl.DateTimeFormatОбъект является конструктором для объектов , которые позволяют язык чувствительной дату и время форматирования.

Синтаксис

new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])

параметры

локали

Необязательный. Строка с языковым тегом BCP 47 или массив таких строк. Для общей формы и интерпретации аргумента locales см. Страницу Intl. Разрешены следующие ключи расширения Unicode:

nu
Numbering system. Possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
ca
Calendar. Possible values include: "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".

Опции

Необязательный. Объект с некоторыми или всеми из следующих свойств:

localeMatcher

Алгоритм сопоставления локали для использования. Возможные значения "lookup"и "best fit"; по умолчанию это "best fit". Информацию об этой опции смотрите на странице Intl.

часовой пояс

Часовой пояс для использования. Единственное значение, которое реализации должны распознавать, это "UTC"; по умолчанию используется часовой пояс по умолчанию. Реализации могут также распознавать имена часовых поясов базы данных времени IANA зоны, такие как "Asia/Shanghai", "Asia/Kolkata","America/New_York" .

hour12

Использовать ли 12-часовое время (в отличие от 24-часового). Возможные значения trueи false; значение по умолчанию зависит от локали.

formatMatcher

Алгоритм сопоставления формата для использования. Возможные значения "basic"и "best fit"; по умолчанию"best fit" . См. Следующие параграфы для получения информации об использовании этого свойства.

Следующие свойства описывают компоненты даты и времени для использования в форматированном выводе и их требуемые представления. Реализации должны поддерживать как минимум следующие подмножества:

weekday, year, month, day, hour, minute, second
weekday, year, month, day
year, month, day
year, month
month, day
hour, minute, second
hour, minute

Реализации могут поддерживать другие подмножества, и запросы будут согласовываться со всеми доступными комбинациями подмножеств-представлений, чтобы найти наилучшее совпадение. Для этого согласования доступны два алгоритма, которые выбираются свойством formatMatcher."basic" алгоритм и зависящий от реализации алгоритм «наилучшего соответствия».

будний день

Представление дня недели. Возможные значения "narrow", "short", "long".

эпоха

Представление эпохи. Возможные значения "narrow", "short", "long".

год

Представление года. Возможные значения "numeric", "2-digit".

месяц

Представление месяца. Возможные значения "numeric", "2-digit", "narrow", "short", "long".

день

Представление дня. Возможные значения "numeric", "2-digit".

час

Представление часа. Возможные значения "numeric", "2-digit".

минут

Представление о минуте. Возможные значения "numeric", "2-digit".

второй

Представление второе. Возможные значения "numeric", "2-digit".

TimeZoneName

Представление названия часового пояса. Возможные значения "short", "long". Значение по умолчанию для каждого свойства компонента даты и времени не определено, но если все свойства компонента не определены, то предполагается, что год, месяц и день равны "numeric".

Проверить онлайн

Подробнее

Иман Бахрампур
источник
15

Это может помочь с проблемой:

var d = new Date();

var options = {   
    day: 'numeric',
    month: 'long', 
    year: 'numeric'
};

console.log(d.toLocaleDateString('en-ZA', options));

Дата, чтобы найти формат

Мистер Нсубуга
источник
2
или d.toLocaleDateString('en-US', options);если вы находитесь в США.
епископ
Это было мое решение. Спасибо.
Стивен Роджерс
13

Вот как я реализовал для моих плагинов npm

var monthNames = [
  "January", "February", "March",
  "April", "May", "June", "July",
  "August", "September", "October",
  "November", "December"
];

var Days = [
  "Sunday", "Monday", "Tuesday", "Wednesday",
  "Thursday", "Friday", "Saturday"
];

var formatDate = function(dt,format){
  format = format.replace('ss', pad(dt.getSeconds(),2));
  format = format.replace('s', dt.getSeconds());
  format = format.replace('dd', pad(dt.getDate(),2));
  format = format.replace('d', dt.getDate());
  format = format.replace('mm', pad(dt.getMinutes(),2));
  format = format.replace('m', dt.getMinutes());
  format = format.replace('MMMM', monthNames[dt.getMonth()]);
  format = format.replace('MMM', monthNames[dt.getMonth()].substring(0,3));
  format = format.replace('MM', pad(dt.getMonth()+1,2));
  format = format.replace(/M(?![ao])/, dt.getMonth()+1);
  format = format.replace('DD', Days[dt.getDay()]);
  format = format.replace(/D(?!e)/, Days[dt.getDay()].substring(0,3));
  format = format.replace('yyyy', dt.getFullYear());
  format = format.replace('YYYY', dt.getFullYear());
  format = format.replace('yy', (dt.getFullYear()+"").substring(2));
  format = format.replace('YY', (dt.getFullYear()+"").substring(2));
  format = format.replace('HH', pad(dt.getHours(),2));
  format = format.replace('H', dt.getHours());
  return format;
}

pad = function(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
Амит Кумар Гупта
источник
На какую посылку вы ссылаетесь?
Ибрагим
В этом есть ошибка: имена месяцев сначала заменяются, затем также будет заменяться название месяца. Например Marchстанет 3archс этим кодом.
ntaso
1
Измените строку на 'M'на format = format.replace("M(?!M)", (dt.getMonth()+1).toString());и поместите ее выше строки с'MMMM'
ntaso
9
var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();
Геннадий Рябкин
источник
8

Sugar.js имеет отличные расширения для объекта Date, включая Date.format метод .

Примеры из документации:

Date.create().format('{Weekday} {Month} {dd}, {yyyy}');

Date.create().format('{12hr}:{mm}{tt}')
Hasen
источник
8

Любой, кто ищет действительно простое решение ES6 для копирования, вставки и использования:

const dateToString = d => `${d.getFullYear()}-${('00' + (d.getMonth() + 1)).slice(-2)}-${('00' + d.getDate()).slice(-2)}` 

// how to use:
const myDate = new Date(Date.parse('04 Dec 1995 00:12:00 GMT'))
console.log(dateToString(myDate)) // 1995-12-04

Hinrich
источник
8

Начиная с 2019 года, похоже, что вы можете заставить toLocaleDateString возвращать только определенные части, а затем присоединяться к ним по своему усмотрению:

var date = new Date();

console.log(date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + "-"+ date.toLocaleDateString("en-US", { month: 'short' })
            + "-" + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> 16-Nov-2019

console.log(date.toLocaleDateString("en-US", { month: 'long' }) 
            + " " + date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + ", " + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> November 16, 2019
К Видж
источник
8

Вы должны взглянуть на DayJs. Это римейк моментов, но модульная архитектура ориентирована так легко.

Быстрая 2 КБ альтернатива Moment.js с тем же современным API

Day.js - это минималистичная библиотека JavaScript, которая анализирует, проверяет, манипулирует и отображает даты и время для современных браузеров с API, в значительной степени совместимым с Moment.js. Если вы используете Moment.js, вы уже знаете, как использовать Day.js.

var date = Date.now();
const formatedDate = dayjs(date).format("YYYY-MM-DD")
console.log(formatedDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.16/dayjs.min.js" crossorigin="anonymous"></script>

Melchia
источник
7

Чтобы получить «10 августа 2010», попробуйте:

var date = new Date('2010-08-10 00:00:00');
date = date.toLocaleDateString(undefined, {day:'2-digit'}) + '-' + date.toLocaleDateString(undefined, {month:'short'}) + '-' + date.toLocaleDateString(undefined, {year:'numeric'})

Для поддержки браузера, см. ToLocaleDateString .

сайт
источник
Мне не нужно было "-", вот более короткая версия с указанием времени, даты и часового пояса! дата = новая дата (); date.toLocaleDateString (undefined, {день: «2-значный», месяц: «короткий», год: «числовой», час: «числовой», минута: «числовой», timeZoneName: «короткая»}); :)
Варун