IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Manipulation de Date


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de Goltar
    Homme Profil pro
    Eternel Etudiant Curieux
    Inscrit en
    Mars 2011
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Eternel Etudiant Curieux
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mars 2011
    Messages : 216
    Par défaut Manipulation de Date
    Bonjour à tous,

    P'tit souci de Date:

    Je développe une appli pour mobile.

    J'ai un formulaire pour prise de rendez-vous avec notamment 3 inputs

    le premier récupérant une date
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="Date" id="InpRdv_Date" value=""/>
    les deux autres pour récupérer l'heure 'de' et 'à'
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="time" id="InpRdv_Heure1" value=""/>
    <input type="time" id="InpRdv_Heure2" value=""/>
    le input "InpRdv_Date" récupère une valeur générée par le sélecteur du mobile sous le format : (14 mai 2016)
    les inputs heures sous le format: 10:00 et 11:00

    je récupère ces valeurs dans une autre fonction afin de les transformer avant de les stocker dans ma db par:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        var DateRdv = $("#InpRdv_Date").val();
        var Heure1 = $("#InpRdv_Heure1").val();
        var Heure2 = $("#InpRdv_Heure2").val();
    par contre avant de les stocker il faut que je les transforment en une date au format (2016,05,14,10,00) et (2016,05,14,11,00)
    j'ai essayé en faisant:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    var s_date = DateRdv.split(" ");
        var MoisLW = s_date[1].toLowerCase();
        var s_heure1 = Heure1.split(":");
        var s_heure2 = Heure2.split(":");
        jour = s_date[0];
        annee = s_date[2];
        switch (true)
        {
            case ((MoisLW === "janvier")||(MoisLW === "january")):
                {
                    mois = "01";
                }
                break;
            case ((MoisLW === "février")||(MoisLW === "february")):
                {
                    mois = "02";
                }
                break;
            case ((MoisLW === "mars")||(MoisLW === "march")):
                {
                    mois = "03";
                }
                break;
            case ((MoisLW === "avril")||(MoisLW === "april")):
                {
                    mois = "04";
                }
                break;
            case ((MoisLW === "mai")||(MoisLW === "may")):
                {
                    mois = "05";
                }
                break;
            case ((MoisLW === "juin")||(MoisLW === "june")):
                {
                    mois = "06";
                }
                break;
            case ((MoisLW === "juillet")||(MoisLW === "july")):
                {
                    mois = "07";
                }
                break;
            case ((MoisLW === "août")||(MoisLW === "august")):
                {
                    mois = "08";
                }
                break;
            case ((MoisLW === "septembre")||(MoisLW === "september")):
                {
                    mois = "09";
                }
                break;
            case ((MoisLW === "octobre")||(MoisLW === "october")):
                {
                    mois = "10";
                }
                break;
            case ((MoisLW === "novembre")||(MoisLW === "november")):
                {
                    mois = "11";
                }
                break;
            case ((MoisLW === "décembre")||(MoisLW === "december")):
                {
                    mois = "12";
                }
                break;
        }
        Hour1 = s_heure1[0];
        Min1 = s_heure1[1];
        Hour2 = s_heure2[0];
        Min2 = s_heure2[1];
        fullDate1 = annee + "," + mois + "," + jour + "," + Hour1 + "," + Min1;    
        fullDate2 = annee + "," + mois + "," + jour + "," + Hour2 + "," + Min2;
    pour tester je fais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
       var testDate = new Date(fullDate1);
        console.log("TestDate = " + testDate);
    qui me donne: TestDate = Invalid Date

    quelqu'un pourrait-il me mettre sur la voie?

    D'avance merci

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    compte tenu du mauvais support actuel des type="date" et type="time" je ne saurais t'encourager à utiliser un plugin type Timepicker, Datepicker, ta gestion n'en sera que plus facile.

  3. #3
    Membre chevronné Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Par défaut
    Perso, je te conseillerais d'éviter à tout prix les évaluations d'opérateurs comparatifs au sein des switch case.

    ça ne fonctionne pas à mon souvenir.
    plutôt remplacer par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
     switch (MoisLW)
        {
            case "janvier":
                {
                    mois = "01";
                    break;
                }
            case "january":
                {
                     mois = "01";
                     break;
                }
        }
    encore mieux, utiliser un dictionnaire:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    function padMonth(number) {
           number=number.toString();
           if (number.length===1) {
                   return "0"+number;
           }
           return number;
    }
    var dictionnaireMois={ fr:["janvier","février","mars","avril","mai"/*etc*/], en:["january","february","march","april","may"/*etc*/]};
    mois =(dictionnaireMois.fr.indexOf(MoisLW)!==-1
                    ?padMonth(dictionnaireMois[dictionnaireMois.fr.indexOf(MoisLW)]+1)
                    :(months.en.indexOf(MoisLW)!==-1
                             ?padMonth(dictionnaireMois[dictionnaireMois.en.indexOf(MoisLW)]+1)
                             :undefined
                    )
               );

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Perso, je te conseillerais d'éviter à tout prix les évaluations d'opérateurs comparatifs au sein des switch case.
    effectivement, je n’ai pas été plus loin dans l'analyse du code mais l'on peut faire avantageusement également
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    switch (MoisLW)
        {
        case 'janvier':
        case 'january':
                mois = '01';
                break;
        // la suite
      }
    plus d'info sur la page d'exercices :
    [Facile][Indispensable] Exercice 1.2.2 : Les structures conditionnelles avec l'instruction "switch".

    Allez je cite la librairie http://momentjs.com/ dont on a déjà parlé dans ce forum.

  5. #5
    Membre éclairé Avatar de Goltar
    Homme Profil pro
    Eternel Etudiant Curieux
    Inscrit en
    Mars 2011
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Eternel Etudiant Curieux
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mars 2011
    Messages : 216
    Par défaut
    Merci NoSmoking pour ta réponse.
    Entièrement d'accord avec toi, pour une utilisation sur PC.
    Mais l'avantage de l'utilisation du type="date" et type="time" pour une appli pour mobile est qu'ils utilisent les fonctionnalités du mobile, ce qui est pour l'utilisateur plus confortable.
    Comme mon appli s'adresse à IOS (supporté) et Android (supporté) je me demande s'il est nécessaire d'ajouter le poids d'un plugin ?

    Nom : Ptcalender.png
Affichages : 490
Taille : 26,7 Ko

    par contre je viens de m'apercevoir que bien que la date soit affichée sous format " 15 mai 2016 " la valeur du champ est au format "15-05-2016" mais je suppose qu'une conversion est nécessaire car telquelle cette date n'est pas utilisable comme date.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    testDate = new Date(DateRdv);
    me donne : testDate = Invalid Date

    Merci 01001111 pour ta proposition, en effet beaucoup plus élégante, je m'empresse d'appliquer ! (si encore nécessaire vu qu'il semblerais que je n'aie plus à transformer vu le format réel du champ)

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Il te faut regarder du coté de la propriété valueAsDate ou valueAsNumber et non value dans ce cas.

  7. #7
    Membre éclairé Avatar de Goltar
    Homme Profil pro
    Eternel Etudiant Curieux
    Inscrit en
    Mars 2011
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Eternel Etudiant Curieux
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mars 2011
    Messages : 216
    Par défaut
    Problème résolu en remplaçant les séparateurs:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
        var DateRdv = $("#InpRdv_Date").val();    
        var ddd = DateRdv.replace("-", "/");
        var d = new Date(ddd);
           alert("DateRDV =" + d);
    me donne bien une date "DateRDV =Fri Oct 05 -2016 00:00:00 GMT+0200 (CEST)", par contre 10 mai 2016 soit 10/05/2016 les deux premiers digits sont considérés comme étant le mois !

    je dois donc passer par le split pour rectifier ou existe-t'il une autre solution?

  8. #8
    Membre chevronné Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Par défaut
    Je crois que cela, NoSmoking te l'a déjà dit:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var DateRdv = $("#InpRdv_Date")[0].valueAsDate;
           alert("DateRDV =" + DateRdv);

  9. #9
    Membre éclairé Avatar de Goltar
    Homme Profil pro
    Eternel Etudiant Curieux
    Inscrit en
    Mars 2011
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Eternel Etudiant Curieux
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mars 2011
    Messages : 216
    Par défaut
    Oooups !! En effet !
    Problème résolu !
    Merci et bonne journée

  10. #10
    Membre éclairé Avatar de Goltar
    Homme Profil pro
    Eternel Etudiant Curieux
    Inscrit en
    Mars 2011
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Eternel Etudiant Curieux
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mars 2011
    Messages : 216
    Par défaut
    Bonjour à tous

    Après pas mal de tripatouillage, je suis arrivé à une solution fonctionnant aussi bien sur pc que sur mobile.
    Elle n'est peut-être pas très pro (optimisée) mais elle à le mérite de fonctionner.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
     
    var DateRdv = $("#InpRdv_Date").val(); // Récupération de la date au format aaaa-mm-jj du formulaire
    //    var DateRdv = $("#InpRdv_Date")[0].valueAsDate;  me posait quelques problème  
        var Heure1 = $("#InpRdv_Heure1").val(); // Récupération de l'heure 'de' au format hh:mm du formulaire
        if (Heure1 === "") // Si l'heure n'est pas introduite 
        {
            alert("Heure du rendez-vous manquante!"); // On averti
            $('#InpRdv_Heure1').focus(); // et on rend le focus au champs
            return;
        }
        var Heure2 = $("#InpRdv_Heure2").val(); // // Récupération de l'heure 'à' au format hh:mm du formulaire
     
        var s_date = DateRdv.split("-"); // Split de la date
        var Annee = s_date[0];           // valeur de l'année   
        var Mois = s_date[1];            // valeur du mois 
        var Jour = s_date[2];            // valeur du jour
        var s_heure1 = Heure1.split(":"); // Split de l'heure de début du rdv
        var Hour1 = s_heure1[0];          // valeur de l'heure de début
        var Min1 = s_heure1[1];           // valeur des minutes de début
        var sec = "00";                   // valeur des secondes de début et de fin
        var s_heure2 = Heure2.split(":"); // Split de l'heure de fin du rdv
        var Hour2 = s_heure2[0];          // valeur de l'heure de fin
        var Min2 = s_heure2[1];           // valeur des minutes de fin
        // Concaténation des date de début et de fin au format (aaaa/mm/jj hh:mm:ss)
        var DateComp1 = Annee + "/" + Mois + "/" + Jour + " " + Hour1 + ":" + Min1 + ":" + sec;
        // la deuxième heure n'étant pas obligatoire check si quelque chose à été introduit
        if (Heure2 === "") // si rien d'introduit la date courte (aaaa/mm/jj)
        {
            var DateComp2 = Annee + "/" + Mois + "/" + Jour;
        }
        else               // sinon date complete (aaaa/mm/jj hh:mm:ss)
        {    
        var DateComp2 = Annee + "/" + Mois + "/" + Jour + " " + Hour2 + ":" + Min2 + ":" + sec;
        }
        // Création des deux dates 
        var fullDate1 = new Date(DateComp1);
        var fullDate2 = new Date(DateComp2);
        // Tableau des jours pour la traduction
        var d_names = new Array("Dimanche", "Lundi", "Mardi",
                "Mercredi", "Jeudi", "Vendredi", "Samedi");
        // Tableau des mois pour la traduction
        var m_names = new Array("Janvier", "Février", "Mars",
                "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre",
                "Octobre", "Novembre", "Décembre");
        var strDate = fullDate1;
        var d = new Date(strDate);
        var curr_day = d.getDay();
        var curr_date = d.getDate();
        var curr_month = d.getMonth();
        var real_month = curr_month + 1;
        var curr_year = d.getFullYear();
        // date au format (Dimanche, 15 mai 2016) 
        var DateComplete = d_names[curr_day] + ", " + curr_date + "  " + m_names[curr_month] + " " + curr_year; 
        var y = d.getFullYear();
        var m = d.getMonth() + 1;
        var j = d.getDate();
        var DDay = String(y + "/" + m + "/" + j); // Date au format court (aaaa/mm/jj)
        var FRDate = String(j + "/" + m + "/" + y); // Date au format français (jj/mm/aaaa)
        alert("Date1 = " + fullDate1);
        alert ("Date FR Complete = " + DateComplete );
        alert("DDay = " + DDay);
        alert("FRDate = " + FRDate);
    si ça peut aider quelqu'un, c'est avec plaisir.

    Bonne journée à tous

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    // var DateRdv = $("#InpRdv_Date")[0].valueAsDate; me posait quelques problème
    pourrait-on savoir lequel ?

  12. #12
    Membre éclairé Avatar de Goltar
    Homme Profil pro
    Eternel Etudiant Curieux
    Inscrit en
    Mars 2011
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Eternel Etudiant Curieux
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mars 2011
    Messages : 216
    Par défaut
    Fonctionnait parfaitement sur pc (safari), par contre la date retournée sur mobile était incorrecte.

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Merci du retour, mais as tu essayé avec valueAsNumber ?

  14. #14
    Membre chevronné Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Par défaut
    Comme disait NoSmoking, je pense qu'il est préférable encore de faire un champ custom, de mon côté par exemple firefox mac affiche un champ similaire à un champ texte, au lieu d'un champ date.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Manipulations de dates et heures
    Par benj63 dans le forum C++
    Réponses: 5
    Dernier message: 16/12/2004, 15h09
  2. [JDBC] manipulation des dates/heures en Java
    Par kurkLord dans le forum JDBC
    Réponses: 6
    Dernier message: 09/08/2004, 12h49
  3. Manipulations des Dates
    Par kurtc dans le forum Langage SQL
    Réponses: 11
    Dernier message: 13/04/2004, 14h39
  4. [IB6][BCB5]Manipulation des dates.
    Par Sitting Bull dans le forum SQL
    Réponses: 4
    Dernier message: 09/04/2004, 15h33
  5. Manipuler des dates...
    Par Ti Jen-tsie dans le forum Langage
    Réponses: 4
    Dernier message: 26/06/2003, 11h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo