Comment formater une date JavaScript

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

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

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:

• toLocaleString()

• toLocaleDateString()

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/

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

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.

• Exemple: http://jsfiddle.net/simo/sapuhzmm/
• Date.toISOString
• Date.toJSON
• String.slice

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

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 .

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:

• tolocaleformat
• strftime

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

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 .

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/

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.

@ 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

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 .

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

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.

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
 * 
 ************************************/

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)

new Date().toLocaleDateString()

// "3/21/2018"

Plus de documentation sur developer.mozilla.org

Si vous utilisez jQuery UI dans votre code, il existe une fonction intégrée appelée formatDate(). Je l'utilise de cette façon pour formater la date d'aujourd'hui:

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

Vous pouvez voir de nombreux autres exemples de mise en forme de la date dans la documentation jQuery UI .

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>

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

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

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

var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();

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

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

À 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

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>

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 .