web-dev-qa-db-fra.com

Conversion de l'heure 24 heures en heure 12 h PM utiliser Javascript

Quel est le meilleur moyen de convertir la valeur renvoyée JSON suivante du format 24 heures au format 12 heures avec AM/PM? La date doit rester la même - l'heure est la seule chose qui a besoin d'être formatée.

February 04, 2011 19:00:00

P.S. Utiliser jQuery si cela facilite les choses! Préférerait également une fonction/code simple et ne pas utiliser Date.js.

javascriptdatetimetimeformatting
52
Slythic

UPDATE 2: option sans secondes

UPDATE: AM après midi corrigé, testé: http://jsfiddle.net/aorcsik/xbtjF/

J'ai créé cette fonction pour faire ceci:

function formatDate(date) {
  var d = new Date(date);
  var hh = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
  var dd = "AM";
  var h = hh;
  if (h >= 12) {
    h = hh - 12;
    dd = "PM";
  }
  if (h == 0) {
    h = 12;
  }
  m = m < 10 ? "0" + m : m;

  s = s < 10 ? "0" + s : s;

  /* if you want 2 digit hours:
  h = h<10?"0"+h:h; */

  var pattern = new RegExp("0?" + hh + ":" + m + ":" + s);

  var replacement = h + ":" + m;
  /* if you want to add seconds
  replacement += ":"+s;  */
  replacement += " " + dd;

  return date.replace(pattern, replacement);
}

alert(formatDate("February 04, 2011 12:00:00"));

62
aorcsik

Voici comment vous pouvez changer les heures sans déclaration if:

hours = ((hours + 11) % 12 + 1);
87
TomTom
    //it is pm if hours from 12 onwards
    suffix = (hours >= 12)? 'pm' : 'am';

    //only -12 from hours if it is greater than 12 (if not back at mid night)
    hours = (hours > 12)? hours -12 : hours;

    //if 00 then it is 12 am
    hours = (hours == '00')? 12 : hours;
34
user1365977

Pour tous ceux qui lisent qui veulent UNIQUEMENT l'heure dans la sortie, vous pouvez passer des options à la méthode JavaScript :: Date :: toLocaleString (). Exemple:

var date = new Date("February 04, 2011 19:00:00");
var options = {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
};
var timeString = date.toLocaleString('en-US', options);
console.log(timeString);

timeString sera défini sur:

8h00

Ajoutez "seconde: 'numérique" "à vos options si vous voulez aussi des secondes. Pour toutes les options, voir this .

14
Vern Jensen

Voici une manière assez succincte de le faire en utilisant un prototype:

 Date.prototype.getFormattedTime = function () {
 var heures = this.getHours () == 0? "12": this.getHours ()> 12? this.getHours () - 12: this.getHours (); 
 var minutes = (this.getMinutes () <10? "0": "") + this.getMinutes (); 
 var ampm = this.getHours () <12? "MATIN APRÈS-MIDI";
 var formatedTime = heures + ":" + minutes + "" + ampm; 
 renvoyer formatéTime; 
}

Ensuite, tout ce que vous avez à faire est de convertir la valeur de votre chaîne en date et d’utiliser la nouvelle méthode:

 var stringValue = "4 février 2011 19:00:00; 
 var dateValue = new Date (stringValue); 
 var formatedTime = dateValue.getFormattedTime ();

Ou en une seule ligne:

 var formattedTime = new Date ("04 février 2011 19:00:00"). getFormattedTime ();
6
wloescher

Gardez les choses simples et propres

var d = new Date();
var n = d.toLocaleString();

https://jsfiddle.net/rinu6200/3dkdxaad/#base

4
rinu mv

function pad(num) {return ("0" + num).slice(-2);}
function time1() {
  var today = new Date(),
    h = today.getHours(),
    m = today.getMinutes(),
    s = today.getSeconds();
    
  h = h % 12;
  h = h ? h : 12; // the hour '0' should be '12'
  clk.innerHTML = h + ':' + 
    pad(m) + ':' + 
    pad(s) + ' ' + 
    (h >= 12 ? 'PM' : 'AM');
}
window.onload = function() {
  var clk = document.getElementById('clk');
  t = setInterval(time1, 500);
}
<span id="clk"></span>

4
Prafulla

jQuery ne dispose d'aucun utilitaire Date. Si vous n'utilisez aucune bibliothèque supplémentaire, la méthode habituelle consiste à créer un objet JavaScript Date, puis à en extraire les données et à les formater vous-même.

Pour créer l'objet Date, vous pouvez soit vous assurer que votre chaîne de date dans le JSON est sous une forme que Date comprend, qui est la norme IETF (qui est fondamentalement RFC 822 section 5 ). Donc, si vous avez la possibilité de changer votre JSON, ce serait plus simple. (EDIT: Votre format peut réellement fonctionner comme il est.)

Si vous ne pouvez pas modifier votre JSON, vous devrez alors analyser la chaîne vous-même et obtenir le jour, la bouche, l'année, les heures, les minutes et les secondes sous forme d'entiers et créer l'objet Date avec celui-ci.

Une fois que vous avez votre objet Date, vous devez extraire les données dont vous avez besoin et les formater:

   var myDate = new Date("4 Feb 2011, 19:00:00");
   var hours = myDate.getHours();
   var am = true;
   if (hours > 12) {
      am = false;
      hours -= 12;
   } else (hours == 12) {
      am = false;
   } else (hours == 0) {
      hours = 12;
   }

   var minutes = myDate.getMinutes();
   alert("It is " + hours + " " + (am ? "a.m." : "p.m.") + " and " + minutes + " minutes".);
3
RoToRa

1) "Squared" instructions pour faire 24 heures sont devenues 12 heures:

var hours24 = new Date().getHours(); // retrieve current hours (in 24 mode)
var dayMode = hours24 < 12 ? "am" : "pm"; // if it's less than 12 then "am"
var hours12 = hours24 <= 12 ? (hours24 == 0 ? 12 : hours24) : hours24 - 12;
// "0" in 24-mode now becames "12 am" in 12-mode – thanks to user @Cristian
document.write(hours12 + " " + dayMode); // printing out the result of code

2) En une seule ligne (même résultat avec un algorithme légèrement différent):

var str12 = (h24 = new Date().getHours()) && (h24 - ((h24 == 0)? -12 : (h24 <= 12)? 0 : 12)) + (h24 < 12 ? " am" : " pm");

Les deux options renvoient une chaîne, telle que "5 pm" ou "10 am" etc.

2
Dmitry Parzhitsky
date = date.replace(/[0-9]{1,2}(:[0-9]{2}){2}/, function (time) {
    var hms = time.split(':'),
        h = +hms[0],
        suffix = (h < 12) ? 'am' : 'pm';
    hms[0] = h % 12 || 12;        
    return hms.join(':') + suffix
});

edit: J'ai oublié de traiter avec 12 heures am/pm. Fixé.

2
user123444555621

Vous pouvez jeter un oeil à this . Un des exemples dit:

var d = new Date(dateString);

Une fois que vous avez un objet Date, vous pouvez jouer assez facilement avec lui. Vous pouvez appeler toLocaleDateString, toLocaleTimeString ou vérifier si getHours est supérieur à 12, puis calculer simplement l'heure AM/PM.

2
MeanEYE
 function GetTime(date) {
        var currentTime = (new Date(date))
        var hours = currentTime.getHours()
        //Note: before converting into 12 hour format
        var suffix = '';
        if (hours > 11) {
            suffix += "PM";
        } else {
            suffix += "AM";
        }
        var minutes = currentTime.getMinutes()
        if (minutes < 10) {
            minutes = "0" + minutes
        }
        if (hours > 12) {
            hours -= 12;
        } else if (hours === 0) {
            hours = 12;
        }
        var time = hours + ":" + minutes + " " + suffix;
        return time;
    }
1
aamir sajjad

Je suis un débutant relatif, mais voici ce que j'ai proposé pour l'un de mes propres projets, et cela semble fonctionner. Il peut y avoir des moyens plus simples de le faire.

function getTime() {
    var nowTimeDate = new Date();
    var nowHour = nowTimeDate.getHours();
    var nowMinutes = nowTimeDate.getMinutes();
    var suffix = nowHour >= 12 ? "pm" : "am";
    nowHour = (suffix == "pm" & (nowHour > 12 & nowHour < 24)) ? (nowHour - 12) : nowHour;
    nowHour = nowHour == 0 ? 12 : nowHour;
    nowMinutes = nowMinutes < 10 ? "0" + nowMinutes : nowMinutes;
    var currentTime = nowHour + ":" + nowMinutes + suffix;
    document.getElementById("currentTime").innerHTML = currentTime;
}
1
Dave Irwin
var dt = new Date();
    var h =  dt.getHours(), m = dt.getMinutes();
    var thistime = (h > 12) ? (h-12 + ':' + m +' PM') : (h + ':' + m +' AM');
console.log(thistime);

Voici le Demo

1
Muhammad Tahir

Veuillez essayer avec le code ci-dessous

var s = "15 Feb 2015 11.30 a.m";
        var times = s.match("((([0-9])|([0-2][0-9])).([0-9][0-9])[\t ]?((a.m|p.m)|(A.M|P.M)))");            
        var time = "";

        if(times != null){                          
            var hour = times[2];
            if((times[6] == "p.m" || times[6] == "P.M")){
                if(hour < 12){
                    hour = parseInt(hour) + parseInt(12);
                }else if(hour == 12){
                    hour = "00";
                }
            }
            time = [hour, times[5], "00"].join(":");

        }

Merci

1
Rahul Radhakrishnan

Cela a fonctionné pour moi!

function main() {
  var time = readLine();
  var formattedTime = time.replace('AM', ' AM').replace('PM', ' PM');
  var separators = [':', ' M'];
  var hms = formattedTime.split(new RegExp('[' + separators.join('') + ']'));
  if (parseInt(hms[0]) < 12 && hms[3] == 'P')
      hms[0] = parseInt(hms[0]) + 12;
  else if (parseInt(hms[0]) == 12 && hms[3] == 'A')
      hms[0] = '00';
  console.log(hms[0] + ':' + hms[1] + ':' + hms[2]);

}
1
Ishu nanda

c'est votre code html où vous appelez la fonction pour convertir le format horaire 24 heures en 12 heures avec am/pm 

<pre id="tests" onClick="tConvert('18:00:00')">
  test on click 18:00:00
</pre>
<span id="rzlt"></span>

maintenant dans le code js écrire cette fonction tConvert telle quelle 

 function tConvert (time)
  {
     
   // Check correct time format and split into components
   time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

    if (time.length > 1) 
    { // If time format correct
        
      time = time.slice (1);  // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    //return time; // return adjusted time or original string
      var tel = document.getElementById ('rzlt');
      
      tel.innerHTML= time.join ('');
  }

convertir 18:00:00 à 18:00:00 travailler pour moi 

1
Mohsin Shoukat

Cette fonction convertira dans les deux sens: 12 à 24 heures ou 24 à 12 heures 

function toggle24hr(time, onoff){
    if(onoff==undefined) onoff = isNaN(time.replace(':',''))//auto-detect format
    var pm = time.toString().toLowerCase().indexOf('pm')>-1 //check if 'pm' exists in the time string
    time = time.toString().toLowerCase().replace(/[ap]m/,'').split(':') //convert time to an array of numbers
    time[0] = Number(time[0])
    if(onoff){//convert to 24 hour:
        if((pm && time[0]!=12)) time[0] += 12
        else if(!pm && time[0]==12) time[0] = '00'  //handle midnight
        if(String(time[0]).length==1) time[0] = '0'+time[0] //add leading zeros if needed
    }else{ //convert to 12 hour:
        pm = time[0]>=12
        if(!time[0]) time[0]=12 //handle midnight
        else if(pm && time[0]!=12) time[0] -= 12
    }
    return onoff ? time.join(':') : time.join(':')+(pm ? 'pm' : 'am')
}

Voici quelques exemples:

//convert to 24 hour:
toggle24hr('12:00am')   //returns 00:00
toggle24hr('2:00pm')    //returns 14:00
toggle24hr('8:00am')    //returns 08:00
toggle24hr('12:00pm')   //returns 12:00

//convert to 12 hour:
toggle24hr('14:00')    //returns 2:00pm
toggle24hr('08:00')    //returns 8:00am
toggle24hr('12:00')    //returns 12:00pm
toggle24hr('00:00')    //returns 12:00am

//you can also force a specific format like this:
toggle24hr('14:00',1)    //returns 14:00
toggle24hr('14:00',0)    //returns 2:00pm
0
cronoklee

De toute façon, vous allez finir par faire beaucoup de manipulation de chaîne, alors pourquoi ne pas simplement manipuler la chaîne de date elle-même?

Les navigateurs formulent la chaîne de date différemment.

Netscape ::: ven. Mai 11 2012 20:15:49 GMT-0600 (heure avancée des Rocheuses)

IE ::: ven 11 mai 20:17:33 HAR 2012 

vous devrez donc vérifier cela. 

var D = new Date().toString().split(' ')[(document.all)?3:4];

Cela établira D égal à la chaîne HH: MM: SS de 24 heures. Divisez cela sur les deux points, et le premier élément sera les heures.

var H = new Date().toString().split(' ')[(document.all)?3:4].split(':')[0];

Vous pouvez convertir des heures de 24 heures en 12 heures, mais cela n’a pas été mentionné. Probablement parce que c'est assez CRAZ Ce que vous faites réellement mathématiquement lorsque vous convertissez des heures En horloges. En fait, vous ajoutez 23, modifiez celapar 12, et ajoutez 1

twelveHour = ((twentyfourHour+23)%12)+1;

Ainsi, par exemple, vous pouvez saisir tout le temps de la chaîne de date, mod Les heures, et afficher tout cela avec les nouvelles heures.

var T = new Date().toString().split(' ')[(document.all)?3:4].split(':');
T[0] = (((T[0])+23)%12)+1;
alert(T.join(':'));

Avec certaines expressions rationnelles intelligentes, vous pouvez probablement extraire les heures de la partie HH: MM: SS De la chaîne de date et les modifier toutes dans la même ligne. Ce serait Une ligne ridicule parce que la référence arrière $ 1 ne pourrait pas être utilisée dans des calculs sans une fonction dans le remplacement.

Voici à quoi cela ressemblerait:

var T = new Date().toString().split(' ')[(document.all)?3:4].replace(/(^\d\d)/,function(){return ((parseInt(RegExp.$1)+23)%12)+1} );

Ce qui, comme je le dis, est ridicule. Si vous utilisez une bibliothèque qui PEUT effectuer des calculs Sur des références arrière, la ligne devient:

var T = new Date().toString().split(' ')[(document.all)?3:4].replace(/(^\d\d)/, (($1+23)%12)+1);

Et ce n’est pas vraiment hors de question en tant que code utilisable, si vous le documentez bien…. Cette ligne dit:

Créez une chaîne de date, séparez-la sur les espaces, obtenez la partie navigateur à propos, et remplacez le premier nombre à deux chiffres par ce nombre modé.

Le point essentiel de l'histoire est le moyen de convertir les heures sur 24 heures en heures sur 12 heures. C'est un calcul mathématique non évident:

Vous ajoutez 23, mod par 12, puis ajoutez un de plus.

0
2strokeMotor

Voici une petite fonction sympa qui a fonctionné pour moi.

function getDisplayDatetime() {
    var d = new Date(); var hh = d.getHours(); var mm = d.getMinutes(); var dd = "AM"; var h = hh;

    if (mm.toString().length == 1) {
        mm = "0" + mm;
    }

    if (h >= 12) {
        h = hh - 12;
        dd = "PM";
    }

    if (h == 0) {
        h = 12;
    }
    var Datetime = "Datetime: " + d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getUTCDate() + " " + h + ":" + mm;
    return Datetime + " " + dd;
}
0
Steven

Voici

var myDate = new Date("February 04, 2011 19:00:00");
var hr = myDate.getHours(); 
var convHrs = "";
var ampmSwitch = "";
ampmSwitch = (hr > 12)? "PM":"AM"; 
convHrs = (hr >12)? hr-12:hr;
// Build back the Date / time using getMonth/ getFullYear and getDate and other functions on the myDate object. Enclose it inside a func and there you got the working 12 hrs converter ;)

Et voici le convertisseur func pour yas;) Happy coding !!

function convertTo12Hrs(yourDateTime){
    var myDate = new Date(yourDateTime);
    var dtObject = new Object();
    var monthsCollection = {0:"January", 1:"February",2:"March",3:"April",4:"May",5:"June",6:"July",7:"August",8:"September",9:"October",10:"November",11:"December"};
    dtObject.year = myDate.getFullYear();
    dtObject.month = monthsCollection[myDate.getMonth()];
    dtObject.day = (myDate.getDate()<10)?"0"+myDate.getDate():myDate.getDate();
    dtObject.minutes = (myDate.getMinutes() < 10)? "0"+myDate.getMinutes():myDate.getMinutes();
    dtObject.seconds = (myDate.getSeconds() < 10)? "0"+myDate.getSeconds():myDate.getSeconds();
    // Check if hours are greater than 12? Its PM
    dtObject.ampmSwitch = (myDate.getHours() > 12)? "PM":"AM";
    // Convert the hours
    dtObject.hour = (myDate.getHours() > 12)?myDate.getHours()-12:myDate.getHours();
    // Add the 0 as prefix if its less than 10
    dtObject.hour = (dtObject.hour < 10)? "0"+dtObject.hour:dtObject.hour;

    // Format back the string as it was or return the dtObject object or however you like. I am returning the object here
    return dtObject;
}

invoquez-le comme convertTo12Hrs ("04 février 2011 19:00:00"); il vous renverra l'objet, que vous pourrez utiliser pour reformater votre chaîne de date/heure à votre guise ... 

0
A Malik

Vous pouvez essayer cette fonction plus générique:

function to12HourFormat(date = (new Date)) {
  return {
    hours: ((date.getHours() + 11) % 12 + 1),
    minutes: date.getMinutes(),
    meridian: (date.getHours() >= 12) ? 'PM' : 'AM',
  };
}

Retourne un format d'objet flexible.

https://jsbin.com/vexejanovo/edit

0
AndrewMcLagan

J'ai remarqué qu'il y avait déjà une réponse, mais je voulais partager ma propre solution en utilisant du JavaScript pur:

function curTime(pm) {
  var dt = new Date();
  var hr = dt.getHours(), min = dt.getMinutes(), sec = dt.getSeconds();
  var time = (pm ? ((hr+11)%12+1) : (hr<10?'0':'')+hr)+":"+(min<10?'0':'')+min+":"+(sec<10?'0':'')+sec+(pm ? (hr>12 ? " PM" : " AM") : ""); 
  return time;
}

Vous pouvez le voir en action sur https://jsfiddle.net/j2xk312m/3/ en utilisant le bloc de code suivant:

(function() {

  function curTime(pm) {
    var dt = new Date();
    var hr = dt.getHours(), min = dt.getMinutes(), sec = dt.getSeconds();
    var time = (pm ? ((hr+11)%12+1) : (hr<10?'0':'')+hr)+":"+(min<10?'0':'')+min+":"+(sec<10?'0':'')+sec+(pm ? (hr>12 ? " PM" : " AM") : ""); 
    return time;
  }

  alert("12-hour Format:    "+curTime(true)+"\n24-hour Format:    "+curTime(false));

})();
0
Leviscus Tempris