Comment formater une date JavaScript

2222

En JavaScript, comment formater un objet de date pour l'imprimer 10-Aug-2010?

leora
la source
205
Comme d'habitude: attention LE MOIS EST INDEXÉ ZÉRO! Donc janvier n'est pas un ...
Christophe Roussy
12
Attention également, myDate.getDay()ne renvoie pas le jour de la semaine, mais l' emplacement du jour de la semaine lié à la semaine. myDate.getDate()renvoie le jour de la semaine en cours .
Jimenemex
3
Pour formater DateTimes en javascript, utilisez l' Intl.DateTimeFormatobjet. Je le décris dans mon post: Post . Je crée une solution en ligne pour votre réponse par Intl.DateTimeFormat Check Online
Iman Bahrampour
5
Vous pouvez utilisertoLocaleDateString
onmyway133
12
Il a fallu tellement de temps à javascript pour obtenir l'URL en tant qu'objet normalisé, où vous pouvez extraire une clé de paramètre de requête, récupérer le protocole, récupérer le domaine de premier niveau, etc. formateur / analyseur de temps en 2019? C'est comme s'ils pensaient "hmmm oui ... qui sur terre en utilisant javascript aurait besoin de gérer régulièrement les heures et les dates ...."
ahnbizcad

Réponses:

1292

Pour les formats de date délimités personnalisés, vous devez retirer les composants de date (ou d'heure) d'un DateTimeFormatobjet (qui fait partie de l' API d'internationalisation ECMAScript ), puis créer manuellement une chaîne avec les délimiteurs de votre choix.

Pour ce faire, vous pouvez utiliser 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

Vous pouvez également extraire les parties d'une utilisation DateTimeFormatun par un DateTimeFormat#format, mais notez que lors de l'utilisation de cette méthode, à partir de mars 2020, il y a un bogue dans l'implémentation ECMAScript lorsqu'il s'agit de mener des zéros en minutes et secondes (ce bogue est contourné par l'approche ci-dessus).

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}`)

Lorsque vous travaillez avec des dates et des heures, cela vaut généralement la peine d'utiliser une bibliothèque (par exemple , moment.js , luxon ) en raison des nombreuses complexités cachées du champ.

Notez que l'API d'internationalisation ECMAScript, utilisée dans les solutions ci-dessus n'est pas prise en charge dans IE10 ( 0,03% de part de marché mondiale des navigateurs en février 2020).

Marko
la source
370
Envisagez vraiment d'utiliser une bibliothèque comme Moment.js ou Date.js à la place. Ce problème a été résolu à plusieurs reprises.
Benjamin Oakes
242
Pourquoi n'incluent-ils pas une fonction dans Dateobject pour ce faire?
Nayan
68
Un point important est que la méthode getMonth () retourne un index de mois basé sur 0 donc par exemple janvier retournera 0 février retournera 1, etc ...
Marko
628
moment.js 2.9.0 est 11,6 Ko compressé, cet exemple est 211 octets compressé.
mrzmyr
26
Il convient de noter que vous ne devez jamais, jamais, utiliser document.write (). D'énormes problèmes de sécurité et de performances.
Matt Jensen
2009

Si vous avez besoin d'un contrôle légèrement inférieur sur la mise en forme que la réponse actuellement acceptée, vous Date#toLocaleDateStringpouvez utiliser pour créer des rendus standard spécifiques aux paramètres régionaux. Les arguments localeet optionspermettent aux applications de spécifier la langue dont les conventions de formatage doivent être utilisées et permettent une certaine personnalisation du rendu.

Exemples d'options clés:

  1. jour:
    La représentation du jour.
    Les valeurs possibles sont "numérique", "à 2 chiffres".
  2. jour de la semaine:
    représentation du jour de la semaine.
    Les valeurs possibles sont "étroit", "court", "long".
  3. year:
    la représentation de l'année.
    Les valeurs possibles sont "numérique", "à 2 chiffres".
  4. month:
    La représentation du mois.
    Les valeurs possibles sont "numérique", "à 2 chiffres", "étroit", "court", "long".
  5. hour:
    la représentation de l'heure.
    Les valeurs possibles sont "numérique", "à 2 chiffres".
  6. minute: La représentation de la minute.
    Les valeurs possibles sont "numérique", "à 2 chiffres".
  7. second:
    La représentation du second.
    Les valeurs possibles sont "numériques", à 2 chiffres ".

Toutes ces clés sont facultatives. Vous pouvez modifier le nombre de valeurs d'options en fonction de vos besoins, et cela reflétera également la présence de chaque terme de date et d'heure.

Remarque: Si vous souhaitez uniquement configurer les options de contenu, mais utilisez toujours les paramètres régionaux actuels, le passage nulldu premier paramètre provoquera une erreur. Utilisez undefinedplutôt.

Pour différentes langues:

  1. "en-US": pour l'anglais
  2. "hi-IN": Pour l'hindi
  3. "ja-JP": pour le japonais

Vous pouvez utiliser plus d'options linguistiques.

Par exemple

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

Vous pouvez également utiliser la toLocaleString()méthode dans le même but. La seule différence est que cette fonction fournit l'heure à laquelle vous ne passez aucune option.

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

Références:

ajeet kanojia
la source
45
Était presque sur le point d'utiliser moment.jspour un format simple. Heureusement, nous avons effectué une recherche Google supplémentaire et constaté qu'il existe déjà une API native pour ce faire. Sauvegarde d'une dépendance externe. Impressionnant!
LeOn - Han Li
21
Il semble que cette réponse devrait être la meilleure réponse "actuelle". Également utilisé l'option "hour12: true" pour utiliser le format 12 heures vs 24 heures. Peut-être devrait être ajouté à votre liste récapitulative dans la réponse.
Doug Knudsen
14
Je ne reçois pas les votes positifs sur cette réponse. Cela ne résout pas le problème de la question. (c'est-à-dire, donnez-moi une date qui ressemble au 10 août 2010). L'utilisation de toLocaleDateString () est assez difficile. La bibliothèque date.format semble être la meilleure solution (au moins pour les utilisateurs de Node)
Iarwa1n
3
Si le passage undefinedcomme premier paramètre de paramètres régionaux semble arbitraire, vous pouvez plutôt transmettre la valeur "default"pour utiliser les paramètres régionaux du navigateur, selon MDN docs developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
wbharding
3
@ Iarwa1n Cette réponse n'a pas été mentionnée, mais vous pouvez utiliser toLocaleDateString pour renvoyer uniquement certaines parties que vous pouvez ensuite joindre comme vous le souhaitez. Vérifiez ma réponse ci-dessous. date.toLocaleDateString("en-US", { day: 'numeric' }) + "-"+ date.toLocaleDateString("en-US", { month: 'short' }) + "-" + date.toLocaleDateString("en-US", { year: 'numeric' })devrait donner16-Nov-2019
K Vij
609

Utilisez la bibliothèque date.format :

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

Retour:

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

format de date sur npm

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

RobertPitt
la source
4
cela pourrait sembler être la solution la plus longue mais compressée et utilisée sur un site qui utilise un peu les dates serait la meilleure solution!
RobertPitt
5
Cette solution est également disponible en tant que package npm: npmjs.com/package/dateformat
David
19
Il y a 14 problèmes ouverts avec le plugin ci-dessus. Même moi j'en ai trouvé un :(
Amit Kumar Gupta
6
Je reçoisrequire is not defined
Hooli
16
OP a demandé une solution JS
Luke Pring
524

Si vous devez formater rapidement votre date en utilisant JavaScript, utilisation simple getDate, getMonth + 1, getFullYear, getHourset getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

Ou, si vous en avez besoin pour être rempli de zéros:

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
la source
Pouvez-vous dire comment obtenir un format comme le lundi 23 mars 2018 ??
Sachin HR
@SachinHR, voir la réponse précédente: stackoverflow.com/a/34015511/4161032 . Le toLocaleDateString()peut formater la date en utilisant des noms de mois / jour localisés.
sebastian.i
12
vous pouvez également .toString().padStart(2, '0')
ajouter des
1
@DmitryoN, si nécessaire, l'année peut être complétée de la même manière:("000" + d.getFullYear()).slice(-4)
sebastian.i
4
@BennyJobigan Il convient de mentionner qu'il String.padStart()est uniquement disponible à partir d'ECMAScript 2017.
JHH
413

Eh bien, ce que je voulais, c'était convertir la date d'aujourd'hui en une chaîne de date conviviale MySQL comme 2012-06-23 et utiliser cette chaîne comme paramètre dans l'une de mes requêtes. La solution simple que j'ai trouvée est la suivante:

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

Gardez à l'esprit que la solution ci-dessus ne prend pas en compte le décalage de votre fuseau horaire.

Vous pourriez envisager d'utiliser cette fonction à la place:

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

Cela vous donnera la date correcte au cas où vous exécuteriez ce code vers le début / la fin de la journée.

simo
la source
9
Vous pouvez faire new Date(date + " UTC")pour tromper le fuseau horaire et vous pouvez éliminer la ligne setMinutes. Mec, javascript est sale
Vajk Hermecz
23
Version compatible Y10K: var today = new Date().toISOString().slice(0,-14):)
Alex Shaffer
23
Ou comme çanew Date().toISOString().split('T')[0]
rofrol
4
new Date().toISOString().slice(0, 16).replace('T',' ')pour inclure le temps
Gerrie van Wyk
3
Je commente simplement que le manque de fuseau horaire n'est pas un inconvénient mineur "autour du début / de la fin de la journée". En Australie, par exemple, la date peut être erronée jusqu'à environ 11 heures - près de la moitié de la journée!
Steve Bennett
230

Fonction de formatage personnalisé:

Pour les formats fixes, une fonction simple fait l'affaire. L'exemple suivant génère le format international AAAA-MM-JJ:

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

Le format OP peut être généré comme:

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

Remarque: Cependant, ce n'est généralement pas une bonne idée d'étendre les bibliothèques standard JavaScript (par exemple en ajoutant cette fonction au prototype de Date).

Une fonction plus avancée pourrait générer une sortie configurable basée sur un paramètre de format.

Si écrire une fonction de formatage est trop long, il y a beaucoup de bibliothèques autour desquelles cela se fait. Quelques autres réponses les énumèrent déjà. Mais l'augmentation des dépendances a également sa contrepartie.

Fonctions de formatage ECMAScript standard:

Depuis les versions plus récentes d'ECMAScript, la Dateclasse a des fonctions de formatage spécifiques:

toDateString : dépend de l'implémentation, affiche uniquement la date.

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 : affiche la date et l'heure 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 pour 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 : dépend de l'implémentation, une date au format local.

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

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

toLocaleString : dépend de l'implémentation, une date et une heure au format local.

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 : dépend de l'implémentation, une heure au format local.

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 : toString générique pour la date.

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)"

Remarque: il est possible de générer une sortie personnalisée à partir de ces formats>

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

Exemples d'extraits:

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));

Adrian Maire
la source
3
Merci pour le dernier. Utile pour définir la valeur de date des entrées HTML Date.
daCoda
new Date().toLocaleDateString()vous donne mm/dd/yyyypas dd/mm/yyyys'il vous plaît corriger celui-là.
Aarvy
1
@RajanVerma: toLocaleDateString fournit vos paramètres régionaux, qui sont probablement mm / jj / aaaa parce que vous êtes aux États-Unis. Ici, le paramètre régional pour la date est jj / mm / aaaa (c'est exactement le point de "paramètre régional"). J'ai écrit "par exemple" car ce n'est pas la spécification, mais un exemple de sortie.
Adrian Maire
177

Si vous utilisez déjà jQuery UI dans votre projet, vous pouvez le faire de cette façon:

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

// formatted will be 'Jul 8, 2014'

Certaines options de format de date de datepicker avec lesquelles jouer sont disponibles ici .

Dmitry Pavlov
la source
13
Comme je l'ai dit - si jQueryUI est déjà utilisé dans le projet - pourquoi ne pas réutiliser la fonction de formatage de date datepicker? Hé les gars, je ne comprends pas pourquoi je reçois un vote négatif sur ma réponse? S'il vous plaît, expliquez.
Dmitry Pavlov
7
Cela peut être dû au fait que quelqu'un pourrait inclure l'interface utilisateur de jQuery uniquement pour la fonction de format de date, ou cela peut être dû au fait que le sélecteur de date est une partie facultative de la bibliothèque, mais c'est probablement parce que la haine de jQuery est à la mode.
sennett
12
Je ne pense pas qu'il soit possible d'éviter complètement toutes les décisions étranges que quelqu'un pourrait prendre par erreur ou par manque de sens.
Dmitry Pavlov
7
@sennett: Détester jQuery est à la mode? Il en va de même avec votre pantalon à mi-hauteur de vos jambes, je suppose ... ce qui correspond à peu près à ce qu'essayer de coder sans jQuery était pour la plupart de l'histoire de JavaScript ...
Michael Scheper
5
Dans tous les cas, c'est une réponse utile et tout à fait raisonnable - encore une fois, 70% des sites Web utilisent jQuery. Il ne devrait pas y avoir de vote négatif en raison des croyances religieuses des développeurs.
Michael Scheper
133

Je pense que vous pouvez simplement utiliser la méthode Date non standardtoLocaleFormat(formatString)

formatString: une chaîne de format au même format attendu par la strftime()fonction en C.

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

Références:

Sébastien
la source
160
toLocaleFormat () semble fonctionner uniquement dans Firefox. IE et Chrome échouent pour moi.
fitzgeraldsteele
16
Chrome a la méthode .toLocaleString ('en'). Comme il semble que le nouveau navigateur supporte ce developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
apocalypz
8
Lisez l'avertissement ici: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Carson Reinke
6
ce serait la meilleure solution si tout le monde pouvait le f * implémenter. damn you ie / chrome
santa
6
@santa: En effet. Il y avait peut-être une bonne raison de ne pas suivre l'exemple de Mozilla à ce sujet, mais le fait que même ES6 n'ait pas de fonction standard pour cela montre qu'il s'agit toujours d'un langage de pirate, pas d'un langage de développeur.
Michael Scheper
105

JavaScript simple est le meilleur choix pour les petits onetimers.

D'un autre côté, si vous avez besoin de plus de données sur les dates, MomentJS est une excellente solution.

Par exemple:

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
Mite Mitreski
la source
2
important de mentionner: ne pas utiliser YYYYsauf si vous connaissez la différence entre YYYYet yyyy: stackoverflow.com/questions/15133549/…
Domin
@Domin qui est spécifique à NSDateFormatter dans iOS, utilisé par exemple depuis Objective-C ou Swift. Cette question concerne Javascript dans le navigateur, et cette réponse utilise MomentJS, dans laquelle YYYY(non yyyy) est l'année standard et GGGG(non YYYY) est l'année ISO basée sur la semaine.
Mark Reed
2
Le moment n'est pas obsolète à 100% @Gerry
Liam
97

Dans les navigateurs modernes (*) , vous pouvez simplement faire ceci:

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

Sortie si exécutée aujourd'hui (24 janvier 2016):

'24-Jan-2016'

(*) Selon MDN , "navigateurs modernes" signifie Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ et Safari tous les soirs .

John Slegers
la source
Existe-t-il un moyen de vérifier si cette fonction est prise en charge et sinon, par défaut une solution plus simple?
James Wierzba
@JamesWierzba: Vous pouvez utiliser ce polyfill !
John Slegers
Ce n'est même pas répertorié sur caniuse.com: /
Charles Wood
51

Vous devriez jeter un oeil à date.js . Il ajoute de nombreux assistants pratiques pour travailler avec des dates, par exemple, dans votre cas:

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

Démarrage: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

NiKo
la source
Merci. Il s'agit d'une bibliothèque très complète et complète, avec un faible encombrement.
mitcheljh
Je pense que je reçois actuellement un numéro de Date.parse tandis que let date = new Date (fromString) a plus de fonctions. Malheureusement, à ma grande surprise, ToString semble également afficher simplement un défaut sans interpréter l'argument passé pour le formater. L'utilisation de NodeJS 11+ toDateString est une sortie plus courte mais ne prend pas le formatage. Tout ce que je vois est un très compliqué toLocaleDateString
Master James
38

Je peux obtenir le format demandé sur une seule ligne sans aucune bibliothèque ni méthode Date, juste 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()')

Dans mes tests, cela fonctionne de manière fiable dans les principaux navigateurs (Chrome, Safari, Firefox et IE.) Comme l'a souligné @RobG, la sortie de Date.prototype.toString () dépend de l'implémentation, il suffit donc de tester la sortie pour être sûr cela fonctionne directement dans votre moteur JavaScript. Vous pouvez même ajouter du code pour tester la sortie de la chaîne et vous assurer qu'elle correspond à ce que vous attendez avant de remplacer l'expression régulière.

JD Smith
la source
console.log(new Date().toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3'));
John
@ André - Je suis d'accord. Si c'était mon code, j'inclurais très certainement un commentaire à côté de lui qui explique l'expression régulière et donne un exemple de l'entrée et de la sortie correspondante.
JD Smith
que diriez-vous partie de temps (HH: mm: ss)?
unruledboy
@unruledboy var d = (new Date ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * / , «2 $ - 1 $ - 3 $ 4 $»); - ou pour obtenir uniquement la partie heure sans la date elle-même, utilisez: var d = (new Date ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * /, '$ 4');
JD Smith
37

@ Sébastien - alternative à tous les navigateurs

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

Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

user956584
la source
5
Au lieu de faire .replace (), vous pouvez simplement utiliser 'en-GB' comme locale. :)
Roberto14
1
C'est vraiment sympa, par exemple new Date().toLocaleDateString("en-EN", {month: "short", weekday: "short", day: "2-digit", year: "numeric"})retourne"Wed, Sep 06, 2017"
Peter T.
37

OK , nous avons quelque chose appelé Intl qui est très utile pour formater une date en JavaScript ces jours-ci:

Votre date comme ci-dessous:

var date = '10/8/2010';

Et vous passez à Date en utilisant une nouvelle date () comme ci-dessous:

date = new Date(date);

Et maintenant, vous pouvez le formater comme vous le souhaitez en utilisant une liste de paramètres régionaux comme ci-dessous:

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: "٨‏/١٠‏/٢٠١٠"

Si vous voulez exactement le format que vous avez mentionné ci-dessus, vous pouvez faire:

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, '-');

Et le résultat va être:

"10-Aug-2010"

Pour plus d'informations, consultez la documentation de l' API Intl et Intl.DateTimeFormat .

Alireza
la source
Non pris en charge par IE
Pants
Ce n'est que par IE11, IE10- ont été hors de vie bien avant que cela n'existe donc c'est compréhensible. 92% de caniuse, ce qui est assez bon caniuse.com/#search=datetimeformat
Tofandel
32

Utilisation d'un modèle de chaîne ECMAScript Edition 6 (ES6 / ES2015):

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

Si vous devez modifier les délimiteurs:

const delimiter = '/';
let formatted = [d.getFullYear(), d.getMonth() + 1, d.getDate()].join(delimiter);
vdegenne
la source
30

Solution emballée: Luxon

Si vous souhaitez utiliser une solution unique pour tous, je vous recommande fortement d'utiliser Luxon (une version modernisée de Moment.js ) qui effectue également le formatage dans de nombreux paramètres régionaux / langues et des tonnes d'autres fonctionnalités.

Luxon est hébergé sur le site Web Moment.js et développé par un développeur Moment.js parce que Moment.js a des limites que le développeur voulait résoudre mais ne pouvait pas.

À installer:

npm install luxon ou yarn add luxon (visitez le lien pour d'autres méthodes d'installation)

Exemple:

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

Rendements:

10 août 2010

Solution manuelle

En utilisant un formatage similaire à Moment.js, Class DateTimeFormatter (Java) et Class SimpleDateFormat (Java) , j'ai implémenté une solution complèteformatDate(date, patternStr) où le code est facile à lire et à modifier. Vous pouvez afficher la date, l'heure, AM / PM, etc. Voir le code pour plus d'exemples.

Exemple:

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

(formatDate est implémenté dans l'extrait de code ci-dessous)

Rendements:

Vendredi 12 octobre 2018 18: 11: 23: 445

Essayez le code en cliquant sur "Exécuter l'extrait de code".

Modèles de date et d'heure

yy= Année à 2 chiffres; yyyy= année complète

M= mois numérique; MM= Mois à 2 chiffres; MMM= nom du mois court; MMMM= nom complet du mois

EEEE= nom complet du jour de la semaine; EEE= nom de semaine court

d= jour du chiffre; dd= Jour à 2 chiffres

h= heures am / pm; hh= Heures à 2 chiffres am / pm; H= heures; HH= Heures à 2 chiffres

m= minutes; mm= Minutes à 2 chiffres; aaa= AM / PM

s= secondes; ss= Secondes à 2 chiffres

S = millisecondes

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'));

Merci @Gerry d'avoir évoqué Luxon.

lewdev
la source
1
À propos, la SimpleDateFormatclasse gênante a été supplantée il y a des années par la java.time.format.DateTimeFormatterclasse.
Basil Bourque
1
@BasilBourque, a noté. Ils utilisent tous les deux les mêmes motifs. J'étais sur un projet pré-Java8 pendant 5 ans, donc je n'ai jamais été exposé aux nouveautés. Merci!
lewdev
Voir le projet ThreeTen-Backport pour Java 6 et 7, pour obtenir la plupart des fonctionnalités de java.time avec une API presque identique.
Basil Bourque
@BasilBourque merci pour la référence, mais je ne travaille plus sur ce projet mais je vais certainement garder cela à l'esprit quand il arrivera.
lewdev
2
moment est obsolète, utilisez luxon
Gerry
19

Voici un code que je viens d'écrire pour gérer la mise en forme de la date d'un projet sur lequel je travaille. Il imite la fonctionnalité de formatage de date PHP pour répondre à mes besoins. N'hésitez pas à l'utiliser, il s'agit simplement d'étendre l'objet Date () déjà existant. Ce n'est peut-être pas la solution la plus élégante, mais cela fonctionne pour mes besoins.

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
la source
18

Une solution JavaScript sans utiliser de bibliothèques externes:

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)
Prasad DLV
la source
16

new Date().toLocaleDateString()

// "3/21/2018"

Plus de documentation sur developer.mozilla.org

Kirk Strobeck
la source
1
Il convient de noter que vous ne devez jamais, jamais, utiliser document.write (). D'énormes problèmes de sécurité et de performances
Eugene Fidelin
15

Nous avons beaucoup de solutions pour cela, mais je pense que la meilleure d'entre elles est Moment.js. Je suggère donc personnellement d'utiliser Moment.js pour les opérations de date et d'heure.

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

Vijay Maheriya
la source
pourquoi incluez-vous jquery?
Ced
1
Ohh désolé ce n'est pas nécessaire. Merci @Ced
Vijay Maheriya
comment fournir la date à laquelle je dois moment.js? Je pense qu'il faut toujours du temps.
Dave Ranjan
1
@DaveRanjan je pense que vous devez convertir votre date personnalisée. Utilisez donc ceci: console.log (moment ('2016-08-10'). Format ('DD-MMM-YYYY'));
Vijay Maheriya
Ouais, je l'ai compris plus tard. Merci :)
Dave Ranjan
15

Un moyen utile et flexible pour formater les DateTimes en JavaScript est 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,'-'));

Le résultat est: "12-Oct-2017"

Les formats de date et d'heure peuvent être personnalisés à l'aide de l'argument options.

L' Intl.DateTimeFormatobjet est un constructeur d'objets qui permettent le formatage de la date et de l'heure en fonction de la langue.

Syntaxe

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

Paramètres

locales

Optionnel. Une chaîne avec une balise de langue BCP 47 ou un tableau de ces chaînes. Pour la forme générale et l'interprétation de l'argument locales, consultez la page Intl. Les clés d'extension Unicode suivantes sont autorisées:

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".

Les options

Optionnel. Un objet avec tout ou partie des propriétés suivantes:

localeMatcher

L'algorithme de correspondance des paramètres régionaux à utiliser. Les valeurs possibles sont "lookup"et "best fit"; la valeur par défaut est "best fit". Pour plus d'informations sur cette option, consultez la page Intl.

fuseau horaire

Le fuseau horaire à utiliser. La seule valeur que les implémentations doivent reconnaître est "UTC"; la valeur par défaut est le fuseau horaire par défaut de l'exécution. Implémentations peuvent également reconnaître les noms de fuseau horaire de la base de données de fuseau horaire de l' IANA, tels que "Asia/Shanghai", "Asia/Kolkata", "America/New_York".

heure12

Indique s'il faut utiliser l'heure de 12 heures (par opposition à l'heure de 24 heures). Les valeurs possibles sont trueet false; la valeur par défaut dépend des paramètres régionaux.

formatMatcher

L'algorithme de correspondance de format à utiliser. Les valeurs possibles sont "basic"et "best fit"; la valeur par défaut est "best fit". Consultez les paragraphes suivants pour plus d'informations sur l'utilisation de cette propriété.

Les propriétés suivantes décrivent les composants date-heure à utiliser dans la sortie formatée et leurs représentations souhaitées. Les implémentations sont requises pour prendre en charge au moins les sous-ensembles suivants:

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

Les implémentations peuvent prendre en charge d'autres sous-ensembles, et les demandes seront négociées par rapport à toutes les combinaisons de représentation de sous-ensemble disponibles pour trouver la meilleure correspondance. Deux algorithmes sont disponibles pour cette négociation et sélectionnés par la propriété formatMatcher: Un entièrement spécifié"basic" algorithme et un algorithme "best fit" dépendant de l'implémentation.

jour de la semaine

La représentation du jour de la semaine. Les valeurs possibles sont "narrow", "short", "long".

ère

La représentation de l'époque. Les valeurs possibles sont "narrow", "short", "long".

an

La représentation de l'année. Les valeurs possibles sont "numeric", "2-digit".

mois

La représentation du mois. Les valeurs possibles sont "numeric", "2-digit", "narrow", "short", "long".

journée

La représentation du jour. Les valeurs possibles sont "numeric", "2-digit".

heure

La représentation de l'heure. Les valeurs possibles sont "numeric", "2-digit".

minute

La représentation de la minute. Les valeurs possibles sont "numeric", "2-digit".

seconde

La représentation du second. Les valeurs possibles sont "numeric", "2-digit".

timeZoneName

La représentation du nom du fuseau horaire. Les valeurs possibles sont "short", "long". La valeur par défaut de chaque propriété de composant date-heure n'est pas définie, mais si toutes les propriétés de composant ne sont pas définies, l'année, le mois et le jour sont supposés être "numeric".

Vérifiez en ligne

Plus de détails

Iman Bahrampour
la source
15

Cela peut aider à résoudre le problème:

var d = new Date();

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

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

Date de localisation du format

Monsieur Nsubuga
la source
2
ou d.toLocaleDateString('en-US', options);si vous êtes aux États-Unis.
BishopZ
C'était ma solution. Je vous remercie.
Steven Rogers
13

Voici comment j'ai implémenté mes plugins 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;
}
Amit Kumar Gupta
la source
De quel paquet parlez-vous?
lbrahim
Cela a un bug: les noms de mois sont d'abord remplacés, puis le nom du mois sera également remplacé. Par exemple Marchdeviendra 3archavec ce code.
ntaso
1
Changez la ligne pour 'M'en format = format.replace("M(?!M)", (dt.getMonth()+1).toString());et mettez-la au-dessus de la ligne avec'MMMM'
ntaso
9
var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();
Gennadiy Ryabkin
la source
8

Sugar.js a d'excellentes extensions à l'objet Date, y compris un Date.format méthode .

Exemples tirés de la documentation:

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

Date.create().format('{12hr}:{mm}{tt}')
hasen
la source
8

Pour tous ceux qui recherchent une solution ES6 vraiment simple à copier, coller et adopter:

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
la source
8

À partir de 2019, il semble que vous pouvez accéder àLocaleDateString pour renvoyer uniquement certaines parties, puis vous pouvez les rejoindre comme vous le souhaitez:

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
K Vij
la source
8

Vous devriez jeter un œil à DayJs C'est un remake de momentJs mais une architecture modulaire orientée de manière plus légère.

Alternative rapide de 2 Ko à Moment.js avec la même API moderne

Day.js est une bibliothèque JavaScript minimaliste qui analyse, valide, manipule et affiche les dates et heures des navigateurs modernes avec une API largement compatible avec Moment.js. Si vous utilisez Moment.js, vous savez déjà comment utiliser 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
la source
7

Pour obtenir le "10 août 2010", essayez:

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'})

Pour la prise en charge du navigateur, voir toLocaleDateString .

site
la source
Je n'avais pas besoin d'un "-", voici une version plus courte avec heure, date et fuseau horaire! date = nouvelle date (); date.toLocaleDateString (non défini, {jour: '2 chiffres', mois: 'court', année: 'numérique', heure: 'numérique', minute: 'numérique', timeZoneName: 'court'}); :)
varun