11521 sujets

JavaScript, DOM et API Web HTML5

Heure UTC

Bonsoir,

voila j'ai 2 scripts qui me permet de récupérer des infos XML ( textes, date/heure debut, date/heure fin, images, date courante) pour les afficher en fonction de la date et de l'heure LOCAL...Mais les information doivent s'afficher en fontion de l'heure UTC. Apres plusieurs essai je suis parvenu a afficher "l'heure courante" en utc mais les infos récupérés sont toujours en fonction de l'heure locale...
upload/1504635748-67304-image1.png

J'ai chercher un peu partout et pour l'instant ça rien donné, j'ai tj lheure du system (local)...
Un petit coup de pouce serai la bien venu. Pouvez-vous m'aider ?
Par avance merci

<script>

$(document).ready(function () {
$.ajax({
type: "GET",
url: "news.xml",
dataType: "xml",
success: xmlParser
});
});


function xmlParser(xml) {

$(xml).find("message").each(function () {

var fDate = "dd/MM/yyyy HH:mm";
var dateCourante = new Date();



dateCourante = formatDate(dateCourante,fDate)

var dateDebut = new Date(getDateFromFormat($(this).find("dateDebut").text(),fDate));
dateDebut= formatDate(dateDebut,fDate)

var dateFin = new Date(getDateFromFormat($(this).find("dateFin").text(),fDate));
dateFin= formatDate(dateFin,fDate)

if(((compareDates(dateCourante,fDate,dateDebut,fDate))== 1)&&((compareDates(dateCourante,fDate,dateFin,fDate))== 0))
{
$(".main").append('<div class="message"><div class="heure">' + $(this).find("debut").text() + '<br>' /* + $(this).find("texte").text() */
+ '</div><div class="channel"><img class="vignette" src="' + $(this).find("image").text() + '" style="margin-bottom: 10px; /><div class="texte">' + '<br>' + '<h1>' + $(this).find("emission").text() + '</h1>' + '<p>' + $(this).find("texte").text()
+ '</div><div class="dateCourante">' + dateCourante
+ '</div><div class="dateDebut">' /* + dateDebut */
+ '</div><div class="dateFin">' /* + dateFin */
+ '</div><div class="image">' );


}
});

}

</script> 


var MONTH_NAMES=new Array('January','February','March','April','May','June','July','August','September','October','November','December','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
var DAY_NAMES=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sun','Mon','Tue','Wed','Thu','Fri','Sat');
function LZ(x) {return(x<0||x>9?"":"0")+x}
 
// ------------------------------------------------------------------
 
// ------------------------------------------------------------------
function isDate(val,format) {
    var date=getDateFromFormat(val,format);
    if (date==0) { return false; }
    return true;
    }
 
// -------------------------------------------------------------------
 
// -------------------------------------------------------------------
function compareDates(date1,dateformat1,date2,dateformat2) {
    var d1=getDateFromFormat(date1,dateformat1);
    var d2=getDateFromFormat(date2,dateformat2);
    if (d1==0 || d2==0) {
        return -1;
        }
    else if (d1 >= d2) {
        return 1;
        }
    else if (d1 <= d2) {
    return 0;
    }
    }
 
// ------------------------------------------------------------------
// formatDate (date_object, format)
//
 // getDateFromFormat()
// ------------------------------------------------------------------
function formatDate(date,format) {
    format=format+"";
    var result="";
    var i_format=0;
    var c="";
    var token="";
    var y=date.getYear()+"";
    var M=date.getMonth()+1;
    var d=date.getDate();
    var E=date.getDay();
    var H=date.getUTCHours();
    var m=date.getUTCMinutes();
    var s=date.getUTCSeconds();
    var yyyy,yy,MMM,MM,dd,hh,h,mm,ss,ampm,HH,H,KK,K,kk,k;
    // Convert real date parts into formatted versions
    var value=new Object();
    if (y.length < 4) {y=""+(y-0+1900);}
    value["y"]=""+y;
    value["yyyy"]=y;
    value["yy"]=y.substring(2,4);
    value["M"]=M;
    value["MM"]=LZ(M);
    value["MMM"]=MONTH_NAMES[M-1];
    value["NNN"]=MONTH_NAMES[M+11];
    value["d"]=d;
    value["dd"]=LZ(d);
    value["E"]=DAY_NAMES[E+7];
    value["EE"]=DAY_NAMES[E];
    value["H"]=H;
    value["HH"]=LZ(H);
    if (H==0){value["h"]=12;}
    else if (H>12){value["h"]=H-12;}
    else {value["h"]=H;}
    value["hh"]=LZ(value["h"]);
    if (H>11){value["K"]=H-12;} else {value["K"]=H;}
    value["k"]=H+1;
    value["KK"]=LZ(value["K"]);
    value["kk"]=LZ(value["k"]);
    if (H > 11) { value["a"]="PM"; }
    else { value["a"]="AM"; }
    value["m"]=m;
    value["mm"]=LZ(m);
    value["s"]=s;
    value["ss"]=LZ(s);
    while (i_format < format.length) {
        c=format.charAt(i_format);
        token="";
        while ((format.charAt(i_format)==c) && (i_format < format.length)) {
            token += format.charAt(i_format++);
            }
        if (value[token] != null) { result=result + value[token]; }
        else { result=result + token; }
        }
    return result;
    }
     
// ------------------------------------------------------------------
// getDateFromFormat()
// ------------------------------------------------------------------
function _isInteger(val) {
    var digits="1234567890";
    for (var i=0; i < val.length; i++) {
        if (digits.indexOf(val.charAt(i))==-1) { return false; }
        }
    return true;
    }
function _getInt(str,i,minlength,maxlength) {
    for (var x=maxlength; x>=minlength; x--) {
        var token=str.substring(i,i+x);
        if (token.length < minlength) { return null; }
        if (_isInteger(token)) { return token; }
        }
    return null;
    }
     
// ------------------------------------------------------------------
// getDateFromFormat( date_string , format_string )
 
// ------------------------------------------------------------------
function getDateFromFormat(val,format) {
    val=val+"";
    format=format+"";
    var i_val=0;
    var i_format=0;
    var c="";
    var token="";
    var token2="";
    var x,y;
    var now=new Date();
    var year=now.getYear();
    var month=now.getMonth()+1;
    var date=1;
    var hh=now.getUTCHours();
    var mm=now.getUTCMinutes();
    var ss=now.getUTCSeconds();
    var ampm="";
     
    while (i_format < format.length) {
         
        c=format.charAt(i_format);
        token="";
        while ((format.charAt(i_format)==c) && (i_format < format.length)) {
            token += format.charAt(i_format++);
            }
        if (token=="yyyy" || token=="yy" || token=="y") {
            if (token=="yyyy") { x=4;y=4; }
            if (token=="yy")   { x=2;y=2; }
            if (token=="y")    { x=2;y=4; }
            year=_getInt(val,i_val,x,y);
            if (year==null) { return 0; }
            i_val += year.length;
            if (year.length==2) {
                if (year > 70) { year=1900+(year-0); }
                else { year=2000+(year-0); }
                }
            }
        else if (token=="MMM"||token=="NNN"){
            month=0;
            for (var i=0; i<MONTH_NAMES.length; i++) {
                var month_name=MONTH_NAMES[i];
                if (val.substring(i_val,i_val+month_name.length).toLowerCase()==month_name.toLowerCase()) {
                    if (token=="MMM"||(token=="NNN"&&i>11)) {
                        month=i+1;
                        if (month>12) { month -= 12; }
                        i_val += month_name.length;
                        break;
                        }
                    }
                }
            if ((month < 1)||(month>12)){return 0;}
            }
        else if (token=="EE"||token=="E"){
            for (var i=0; i<DAY_NAMES.length; i++) {
                var day_name=DAY_NAMES[i];
                if (val.substring(i_val,i_val+day_name.length).toLowerCase()==day_name.toLowerCase()) {
                    i_val += day_name.length;
                    break;
                    }
                }
            }
        else if (token=="MM"||token=="M") {
            month=_getInt(val,i_val,token.length,2);
            if(month==null||(month<1)||(month>12)){return 0;}
            i_val+=month.length;}
        else if (token=="dd"||token=="d") {
            date=_getInt(val,i_val,token.length,2);
            if(date==null||(date<1)||(date>31)){return 0;}
            i_val+=date.length;}
        else if (token=="hh"||token=="h") {
            hh=_getInt(val,i_val,token.length,2);
            if(hh==null||(hh<1)||(hh>12)){return 0;}
            i_val+=hh.length;}
        else if (token=="HH"||token=="H") {
            hh=_getInt(val,i_val,token.length,2);
            if(hh==null||(hh<0)||(hh>23)){return 0;}
            i_val+=hh.length;}
        else if (token=="KK"||token=="K") {
            hh=_getInt(val,i_val,token.length,2);
            if(hh==null||(hh<0)||(hh>11)){return 0;}
            i_val+=hh.length;}
        else if (token=="kk"||token=="k") {
            hh=_getInt(val,i_val,token.length,2);
            if(hh==null||(hh<1)||(hh>24)){return 0;}
            i_val+=hh.length;hh--;}
        else if (token=="mm"||token=="m") {
            mm=_getInt(val,i_val,token.length,2);
            if(mm==null||(mm<0)||(mm>59)){return 0;}
            i_val+=mm.length;}
        else if (token=="ss"||token=="s") {
            ss=_getInt(val,i_val,token.length,2);
            if(ss==null||(ss<0)||(ss>59)){return 0;}
            i_val+=ss.length;}
        else if (token=="a") {
            if (val.substring(i_val,i_val+2).toLowerCase()=="am") {ampm="AM";}
            else if (val.substring(i_val,i_val+2).toLowerCase()=="pm") {ampm="PM";}
            else {return 0;}
            i_val+=2;}
        else {
            if (val.substring(i_val,i_val+token.length)!=token) {return 0;}
            else {i_val+=token.length;}
            }
        }
    // If there are any trailing characters left in the value, it doesn't match
    if (i_val != val.length) { return 0; }
    // Is date valid for month?
    if (month==2) {
        // Check for leap year
        if ( ( (year%4==0)&&(year%100 != 0) ) || (year%400==0) ) { // leap year
            if (date > 29){ return 0; }
            }
        else { if (date > 28) { return 0; } }
        }
    if ((month==4)||(month==6)||(month==9)||(month==11)) {
        if (date > 30) { return 0; }
        }
    // Correct hours value
    if (hh<12 && ampm=="PM") { hh=hh-0+12; }
    else if (hh>11 && ampm=="AM") { hh-=12; }
    var newdate=new Date(year,month-1,date,hh,mm,ss);
    return newdate.getTime();
    }
 
// ------------------------------------------------------------------
// parseDate( date_string [, prefer_euro_format] )
//
//
// y-M-d   MMM d, y   MMM d,y   y-MMM-d   d-MMM-y  MMM d
// M/d/y   M-d-y      M.d.y     MMM-d     M/d      M-d
// d/M/y   d-M-y      d.M.y     d-MMM     d/M      d-M
//
// ------------------------------------------------------------------
function parseDate(val) {
    var preferEuro=(arguments.length==2)?arguments[1]:false;
    generalFormats=new Array('y-M-d','MMM d, y','MMM d,y','y-MMM-d','d-MMM-y','MMM d');
    monthFirst=new Array('M/d/y','M-d-y','M.d.y','MMM-d','M/d','M-d');
    dateFirst =new Array('d/M/y','d-M-y','d.M.y','d-MMM','d/M','d-M');
    var checkList=new Array('generalFormats',preferEuro?'dateFirst':'monthFirst',preferEuro?'monthFirst':'dateFirst');
    var d=null;
    for (var i=0; i<checkList.length; i++) {
        var l=window[checkList[i]];
        for (var j=0; j<l.length; j++) {
            d=getDateFromFormat(val,l[j]);
            if (d!=0) { return new Date(d); }
            }
        }
    return null;
    }

Modifié par 2ki2koi1 (05 Sep 2017 - 20:27)
Modérateur
deux questions:

- Le xml est en local, le format de la date est-il géré par toi-même ou doit-il rester ainsi?
- La date dans le XML est en UTC ou en date locale?
bonjour,
j'avoue tu me pause une colle...je savais pas que un xml pouvait etre en local ou utc. Le format de la date est defini dans le premier script ( var fDate = "dd/MM/yyyy HH:mm"; ) mais celui-ci peut changer...
Voici une partie de mon XLM:


<?xml version="1.0" encoding="utf-8" ?> 
<?xml-stylesheet type="text/css" href="----------------/style.css" ?>   
<actu>     

<message logo="urban">
 <dateDebut >05/09/2017 00:00</dateDebut> 
 <dateFin>05/09/2017 00:30</dateFin> 
<debut>00:00</debut> 
<image>-----------------/GBsedAmX-720.jpg</image> 
<emission>Urban</emission> 
<texte>  Texte emission en cours </texte> 
</message> 
-
-
-
-
Modérateur
Re,

alors non ce que je voulais savoir c'est comment les dates étaient formatées dans le xml.
Car dans ton code il y a beaucoup de conversions et c'est assez sale, difficile de s'y retrouver.

Le plus simple est de mettre dans le xml un format de date ISO compatible javascript qui contient le fuseau horaire. Il suffira ensuite de faire:


var dateDebut = new Date($(this).find("dateDebut").text());
alert(dateDebut.getUTCHours());

et plop tu auras heure en UTC en virant 400 lignes de code Smiley smile

Sinon pour le format (et le reste d'ailleurs) considère d'utiliser moment.js qui t'aidera bien.

Par ailleurs si le xml n'est pas modifiable moment.js peut aussi t'aider en créant ta date ainsi:


var dateDebut = '05/09/2017 00:00'; //provenant du xml
var date = moment(dateDebut + ' +01:00', "DD/MM/YYYY HH:mm ZZ"); //ajout manuel du fuseau de la date pour avoir une heure cohérente.

Modifié par kustolovic (07 Sep 2017 - 18:57)
Sujet clos
Aller à