Comment affichez-vous la date et l'heure JavaScript au format 12 heures AM / PM?

306

Comment afficher un objet datetime JavaScript au format 12 heures (AM / PM)?

javascript datetime date time format bbrame
la source
3
Ne perdez pas votre temps stackoverflow.com/a/17538193/3541385 son fonctionnement ..
Ritesh
2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.Mesurez deux fois, coupez une fois.
Panier abandonné
@AbandonedCart est-ce vraiment un dicton?
gilbert-v
1
@ gilbert-v One should double-check one's measurements for accuracy before cutting a piece of wood; otherwise it may be necessary to cut again, wasting time and material.Cette question est probablement mieux posée sur Google, cependant.
Panier abandonné
Je ne m'habituerai jamais à la foutue complication qu'il essaie de travailler avec des dates simples en JavaScript. 😠
ashleedawg

Réponses:

545 

function formatAMPM(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
}

console.log(formatAMPM(new Date));
Développer l'extrait

bbrame
la source
3
Vous avez également déclaré la variable "heures" deux fois, mais avez fait de "strTime" un global accidentel. Ce n'est pas extrêmement élégant, mais cela semble être la bonne technique en utilisant des méthodes natives.
Jon z
Salut, pouvez-vous m'expliquer ce que vous faites avec ça: minutes = minutes <10? '0' + minutes: minutes;
Balz
2
@Balz Si les minutes sont inférieures à 10 (par exemple 16:04), alors cette instruction ajoute la chaîne "0" de sorte que la sortie formatée soit "4:04 PM" au lieu de "4: 4 PM". Notez que dans le processus, les minutes passent d'un nombre à une chaîne.
Caleb Bell
7
Je préfère cela minutes = ('0'+minutes).slice(-2);plutôt que minutes = minutes < 10 ? '0'+minutes : minutes;
Vignesh
1
La solution @Vignesh pour les minutes est meilleure car si vous faites celle suggérée, 21:00:00 devient 9: 000. Vignesh's vous donne les bonnes minutes comme: 00. Si vous deviez utiliser la solution ci-dessus, vous devrez également prendre en compte le 00. (minutes> 0 && minutes <10)? '0' + minutes: minutes;
Robbie Smith
201

Si vous voulez juste montrer les heures alors ..

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', hour12: true })
);
Développer l'extrait

Sortie: 7 h

Si vous souhaitez également afficher les minutes, alors ...

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
);
Développer l'extrait

Sortie: 7h23

Abhay Kumar
la source
Qu'en est-il de l'heure, des minutes et de AM / PM?
reutsey
3
toLocaleStringn'est pris en charge que sur IE11 +.
Neolisk
En février 2018, son fonctionnement était très bien sur Chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lfender6445
il devrait revenir 07:23, OMI
Humble Dolt
@HumbleDolt Vous pourriez être source de confusion 'numeric'avec '2-digit'.
hon2a
55

Vous pouvez également envisager d'utiliser quelque chose comme date.js :

<html>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>

<script>
   (function ()
   {
      document.write(new Date().toString("hh:mm tt"));
   })();
</script>
</html>
Développer l'extrait

Mike Christensen
la source
45

Voici une façon d'utiliser regex:

console.log(new Date('7/10/2013 20:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))
console.log(new Date('7/10/2013 01:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))
Développer l'extrait

Cela crée 3 groupes correspondants:

  • ([\d]+:[\d]{2}) - Heure: minute
  • (:[\d]{2}) - Secondes
  • (.*) - l'espace et la période (la période est le nom officiel pour AM / PM)

Il affiche ensuite les 1er et 3e groupes.

AVERTISSEMENT: toLocaleTimeString () peut se comporter différemment selon la région / l'emplacement.

Steve Tauber
la source
3
Les gens n'utilisent pas assez Regex. Cela a fonctionné pour moi sans ajouter les suggestions de bibliothèque jquery / microsoftajax ci-dessus.
uadrive
Quelle serait l'expression rationnelle d'avoir un zéro de fin au début de l'heure si c'était un seul chiffre. Disons que dans votre premier exemple de 20h12, il serait 20h12?
RADXack
1
@ 404 c'est la même chose, ([\d]+:[\d]{2})c'est la partie qui nous intéresse. Utilisez les deux points (:) comme séparateur et nous voyons que la première partie est [\d]+. Le plus signifie un ou plusieurs. Il recherche donc un ou plusieurs chiffres (y compris zéro. Si vous deviez garantir qu'un zéro est là, ce serait (0[\d]:[\d]{2}). Cela se lit maintenant, recherchez 0 plus un autre chiffre, puis deux-points, puis le reste.
Steve Tauber
1
console.log (new Date (). toLocaleTimeString (). replace (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Pour obtenir l'heure actuelle
mujaffars
35

Si vous n'avez pas besoin d'imprimer le matin / après-midi, j'ai trouvé ce qui suit agréable et concis: 

var now = new Date();
var hours = now.getHours() % 12 || 12;  // 12h instead of 24h, with 12 instead of 0.

Ceci est basé sur la réponse de @ bbrame.

rattray
la source
3
@koolinc pour minuit, il affiche 12. Je ne sais pas quel serait le comportement souhaité.
rattray
Je me suis trompé. Dans mon pays, l'horloge de 24 heures est utilisée, donc je ne connais pas très bien l'horloge de 12 heures. En effet, minuit est 00h00.
KooiInc le
16

Pour autant que je sache, la meilleure façon d'y parvenir sans extensions et codage complexe est la suivante:

     date.toLocaleString([], { hour12: true});

Format Javascript AM / PM

<!DOCTYPE html>
<html>
<body>
    <p>Click the button to display the date and time as a string.</p>

    <button onclick="myFunction()">Try it</button>
    <button onclick="fullDateTime()">Try it2</button>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        function myFunction() {
            var d = new Date();
            var n = d.toLocaleString([], { hour: '2-digit', minute: '2-digit' });
            document.getElementById("demo").innerHTML = n;
        }
        function fullDateTime() {
            var d = new Date();          
            var n = d.toLocaleString([], { hour12: true});
            document.getElementById("demo2").innerHTML = n;
        }
    </script>
</body>
</html>
Développer l'extrait

J'ai trouvé cette vérification de cette question.

Comment utiliser .toLocaleTimeString () sans afficher les secondes?

Edwin Mendez
la source
12

Veuillez trouver la solution ci-dessous

var d = new Date();
var amOrPm = (d.getHours() < 12) ? "AM" : "PM";
var hour = (d.getHours() < 12) ? d.getHours() : d.getHours() - 12;
return   d.getDate() + ' / ' + d.getMonth() + ' / ' + d.getFullYear() + ' ' + hour + ':' + d.getMinutes() + ' ' + amOrPm;
Krishnamoorthy Acharya
la source
Doit être inférieur ou égal à pour le calcul des heures, sinon midi apparaît comme 0. Donc: var hour = (d.getHours () <= 12). Il y a toujours un problème avec minuit, vous devez donc vérifier si zéro, puis régler à 12 également.
Ryan
11

utilisation dateObj.toLocaleString([locales[, options]])

Option 1 - Utilisation des paramètres régionaux

var date = new Date();
console.log(date.toLocaleString('en-US'));

Option 2 - Utilisation des options

var options = { hour12: true };
console.log(date.toLocaleString('en-GB', options));

Remarque: pris en charge sur tous les navigateurs, mais safari atm

LiranBo
la source
1
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
mimo
9

RegExp court pour en-US:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
Géo
la source
cela ne fonctionne pas sur les derniers navigateurs safari et firefox, l'heure utilise toujours le format 24 heures
euther
1
les réponses deviennent obsolètes au fil du temps. N'hésitez pas à éditer et mettre à jour!
Geo
En fait, cela ressemblera à la chaîne 1:54 PM CDT. Pour supprimer la CDTmodification de votre regex aux éléments suivants .replace(/:\d+ |\CDT/g, ' '). Bien que, CDT soit juste mon fuseau horaire. Si vous avez un fuseau horaire différent, je suppose que vous devrez modifier ce code de zone.
sadmicrowave
La sortie de toLocaleTimeString dépend de l'implémentation, donc pas de manière fiable le même format partout.
RobG
9

Dans les navigateurs modernes, utilisez Intl.DateTimeFormatet forcez le format 12 heures avec des options:

    let now = new Date();

    new Intl.DateTimeFormat('default',
        {
            hour12: true,
            hour: 'numeric',
            minute: 'numeric'
        }).format(now);

    // 6:30 AM

L'utilisation defaulthonorera les paramètres régionaux par défaut du navigateur si vous ajoutez plus d'options, mais affichera toujours le format 12 heures.

mtm
la source
pour l'utiliser, affectez la nouvelle chaîne à une variable, par exemple: let result = new Intl.DateTi .... alert (result);
Scot Nery
7

Utilisez Moment.js pour cela

Utilisez les codes ci-dessous en JavaScript lors de l'utilisation de moment.js

H, HH       24 hour time
h, or hh    12 hour time (use in conjunction with a or A)

La format()méthode renvoie la date dans un format spécifique.

moment(new Date()).format("YYYY-MM-DD HH:mm"); // 24H clock
moment(new Date()).format("YYYY-MM-DD hh:mm A"); // 12H clock (AM/PM)
moment(new Date()).format("YYYY-MM-DD hh:mm a"); // 12H clock (am/pm)
Ankur Mahajan
la source
5

Découvrez Datejs . Leurs formateurs intégrés peuvent le faire: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

C'est une bibliothèque très pratique, surtout si vous prévoyez de faire d'autres choses avec des objets de date.

Chris Laplante
la source
Les réponses comme « utiliser la bibliothèque X » ne sont pas utiles. Cependant, ils peuvent être bons comme commentaires.
RobG
1
@RobG: Comme vous pouvez le voir, cela fait un bon moment que j'ai écrit cette réponse. Je m'en rends compte maintenant.
Chris Laplante
4

Je trouve que c'est ici que ça fonctionne bien.

var date_format = '12'; /* FORMAT CAN BE 12 hour (12) OR 24 hour (24)*/


var d       = new Date();
var hour    = d.getHours();  /* Returns the hour (from 0-23) */
var minutes     = d.getMinutes();  /* Returns the minutes (from 0-59) */
var result  = hour;
var ext     = '';

if(date_format == '12'){
    if(hour > 12){
        ext = 'PM';
        hour = (hour - 12);

        if(hour < 10){
            result = "0" + hour;
        }else if(hour == 12){
            hour = "00";
            ext = 'AM';
        }
    }
    else if(hour < 12){
        result = ((hour < 10) ? "0" + hour : hour);
        ext = 'AM';
    }else if(hour == 12){
        ext = 'PM';
    }
}

if(minutes < 10){
    minutes = "0" + minutes; 
}

result = result + ":" + minutes + ' ' + ext; 

console.log(result);

et exemple de plongeur ici

vamsikrishnamannem
la source
4 
<script>
var todayDate = new Date();
var getTodayDate = todayDate.getDate();
var getTodayMonth =  todayDate.getMonth()+1;
var getTodayFullYear = todayDate.getFullYear();
var getCurrentHours = todayDate.getHours();
var getCurrentMinutes = todayDate.getMinutes();
var getCurrentAmPm = getCurrentHours >= 12 ? 'PM' : 'AM';
getCurrentHours = getCurrentHours % 12;
getCurrentHours = getCurrentHours ? getCurrentHours : 12; 
getCurrentMinutes = getCurrentMinutes < 10 ? '0'+getCurrentMinutes : getCurrentMinutes;
var getCurrentDateTime = getTodayDate + '-' + getTodayMonth + '-' + getTodayFullYear + ' ' + getCurrentHours + ':' + getCurrentMinutes + ' ' + getCurrentAmPm;
alert(getCurrentDateTime);
</script>
Pankaj Upadhyay
la source
2
Obtenir le module de l'heure avec 12 est excellent! Cela empêche d'obtenir zéro quand il est 12h ou 12h
Lynnell Emmanuel Neri
3

Voici une autre façon simple et très efficace:

        var d = new Date();

        var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var month = new Array(11);
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";

        var t = d.toLocaleTimeString().replace(/:\d+ /, ' ');

        document.write(weekday[d.getDay()] + ',' + " " + month[d.getMonth()] + " " + d.getDate() + ',' + " " + d.getFullYear() + '<br>' + d.toLocaleTimeString());

    </script></div><!-- #time -->
user3059774
la source
1

vous pouvez déterminer am ou pm avec ce code simple

var today=new Date();
var noon=new Date(today.getFullYear(),today.getMonth(),today.getDate(),12,0,0);
var ampm = (today.getTime()<noon.getTime())?'am':'pm';
sarkiroka
la source
0 

var d = new Date();
var hours = d.getHours() % 12;
  hours = hours ? hours : 12;
    var test = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][(d.getMonth() + 1)] + " " + 
    ("00" + d.getDate()).slice(-2) + " " + 
    d.getFullYear() + " " + 
    ("00" + hours).slice(-2) + ":" + 
    ("00" + d.getMinutes()).slice(-2) + ":" + 
    ("00" + d.getSeconds()).slice(-2) + ' ' + (d.getHours() >= 12 ? 'PM' : 'AM'); 
    
document.getElementById("demo").innerHTML = test;
<p id="demo" ></p>
Développer l'extrait

Sujith S
la source
0 
<h1 id="clock_display" class="text-center" style="font-size:40px; color:#ffffff">[CLOCK TIME DISPLAYS HERE]</h1>



<script>
            var AM_or_PM = "AM";

            function startTime(){

                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();

                h = twelve_hour_time(h);
                m = checkTime(m);
                s = checkTime(s);



                document.getElementById('clock_display').innerHTML =
                    h + ":" + m + ":" + s +" "+AM_or_PM;
                var t = setTimeout(startTime, 1000);

            }

            function checkTime(i){

                if(i < 10){
                    i = "0" + i;// add zero in front of numbers < 10
                }
                return i;
            }

            // CONVERT TO 12 HOUR TIME. SET AM OR PM
            function twelve_hour_time(h){

                if(h > 12){
                    h = h - 12;
                    AM_or_PM = " PM";
                }
                return h;

            }

            startTime();

        </script>
Stnfordly
la source
0 
function getDateTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();

  if (month.toString().length == 1) {
    month = '0' + month;
  }
  if (day.toString().length == 1) {
    day = '0' + day;
  }

  var hours = now.getHours();
  var minutes = now.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var timewithampm = hours + ':' + minutes + ' ' + ampm;

  var dateTime = monthNames[parseInt(month) - 1] + ' ' + day + ' ' + year + ' ' + timewithampm;
  return dateTime;
}
Vik2696
la source
0

Voici ma solution

function getTime() {
var systemDate = new Date();
var hours = systemDate.getHours();
var minutes = systemDate.getMinutes();
var strampm;
if (hours >= 12) {
    strampm= "PM";
} else {
    strampm= "AM";
}
hours = hours % 12;
if (hours == 0) {
    hours = 12;
}
_hours = checkTimeAddZero(hours);
_minutes = checkTimeAddZero(minutes);
console.log(_hours + ":" + _minutes + " " + strampm);
}

function checkTimeAddZero(i) {
if (i < 10) {
    i = "0" + i
}
return i;
}
Prathamesh Plus
la source
-1

Ou faites simplement le code suivant:

    <script>
        time = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt_clock').innerHTML = h + ":" + m + ":" + s;     
            var t = setTimeout(function(){time()}, 0);
        }

        time2 = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            if (h>12) {
                document.getElementById('txt_clock_stan').innerHTML = h-12 + ":" + m + ":" + s;
            }               
            var t = setTimeout(function(){time2()}, 0);
        }

        time3 = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            if (h>12) {
                document.getElementById('hour_line').style.width = h-12 + 'em'; 
            }
            document.getElementById('minute_line').style.width = m + 'em';  
            document.getElementById('second_line').style.width = s + 'em';  
            var t = setTimeout(function(){time3()}, 0);
        }

        checkTime = function(i) {
            if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
            return i;
        }           
    </script>

Zyan Jacob
la source
-1

Une mise en œuvre courte et douce:

// returns date object in 12hr (AM/PM) format
var formatAMPM = function formatAMPM(d) {
    var h = d.getHours();
    return (h % 12 || 12)
        + ':' + d.getMinutes().toString().padStart(2, '0')
        + ' ' + (h < 12 ? 'A' : 'P') + 'M';
};
johnchinjew
la source
-1

essaye ça

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";
Md Juyel Rana
la source
Ceci est une erreur. Les heures pourraient être supérieures à 12.
Utsav T
A 12h00, la var ampm sera "pm". Par conséquent, de 12 h 00 à 23 h 00, les heures seront de 12 h à 23 h et stockeront la valeur «pm» et pour les autres, var ampm stockera la valeur «am». J'espère que tu as compris.
Md Juyel Rana
Salut Juyel! En effet lorsque les heures sont supérieures à 12, la valeur serait PM. Mais la question est "Comment affichez-vous le datetime JavaScript au format 12 heures AM / PM?" - vous devez aider OP à convertir tout le temps au format AM / PM. Par exemple, 14h30 serait 14h30.
Utsav T