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

jQuery Discussion :

Calcul de date et affichage resultat


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    informatique de gestion
    Inscrit en
    Janvier 2011
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : informatique de gestion

    Informations forums :
    Inscription : Janvier 2011
    Messages : 92
    Points : 67
    Points
    67
    Par défaut Calcul de date et affichage resultat
    Bonjour
    Je suis débutant en javascript et Jquery.
    Je me doute que ce n'est pas bien difficile à réaliser mais je ne sais pas par ou commencer ....
    Voici mon problème ...
    J'ai dans ma page 2 datepicker et j'aimerais calculer le nombre de jours qu'il y a entre les 2.
    Je m'explique je suis en train de coder un page de réservation, le premier datepicker me donne la date de départ et le second la date de fin.
    J'aimerais avoir la différence entre ces 2 dates et l'afficher dans ma page. Et bien sur que le nombre de jours se mettent à jour lors de la modification de la date de fin.
    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
    <div class="row">
                                <div style="display: none" id="Reservation-alert" class="alert alert-danger col-sm-12">
                                    @ViewBag.Reservation
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-1">Debut</div>
                                    <div class="col-md-5   date">
                                        <input type="text" class="form-control" id="datepicker1" name="startDateR"/>
                                    </div>
                                    <div class="col-md-1">Fin</div>
                                    <div class="col-md-5   date">
                                        <input type="text" class="form-control" id="datepicker2" name="endDate"/>
                                    </div>
                                </div>
     
                            </div>
    Voici le code de mes datepickers mais malheureusement pour le javascript je bloque complétement
    Merci à tous et à toutes

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Je te suggère de regarder du coté de la lib moment.js
    https://momentjs.com/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre du Club
    Homme Profil pro
    informatique de gestion
    Inscrit en
    Janvier 2011
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : informatique de gestion

    Informations forums :
    Inscription : Janvier 2011
    Messages : 92
    Points : 67
    Points
    67
    Par défaut
    Voilà en gros ce que fait le code..
    J'ai 2 datepicker, un pour le début de la réservation et un pour la fin.
    A l'arrivée sur la page, il définit d'entrée la date du jour dans le datepicker1 et la date du lendemain dans le datepicker2.
    Quand je sélectionne une nouvelle date de fin, il ajoute dans un élément de ma page la différence entre les 2 dates.
    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
     $("#datepicker1").datepicker({
     
            startDate: "getdate",
            startView: 1,
            maxViewMode: "month",
            language: 'fr',
            orientation: "bottom left",
            autoclose: true,
            todayHighlight: true,
            toggleActive: true,
            dateFormat: "dd/mm/yy",
            enabledHours: false,
            defaultDate: "getdate",
            minDate:"dateToday",
            onClose: function(selectedDate) {
                var myDate = $(this).datepicker('getDate');
                myDate.setDate(myDate.getDate() + 1);
                $('#datepicker2').datepicker('setDate', myDate);
            }
        });
        function afficherNbreDeJourDate() {
     
            var start = $('#datepicker1').datepicker('getDate');
            var end = $('#datepicker2').datepicker('getDate');
            var diff = 0;
            if (start && end) {
                diff = Math.floor((end.getTime() - start.getTime()) / 86400000); // ms per day
            }
            //var nbDay = Math.floor((end - start) / 1000 / 3600 / 24) + 1;
            $('#nbJour').text(diff);
        }
     
        $("#datepicker2").datepicker({
            startDate: "+2d",
            startView: 1,
            maxViewMode: "month",
            language: 'fr',
            orientation: "bottom left",
            autoclose: true,
            todayHighlight: true,
            toggleActive: true,
            dateFormat: "dd/mm/yy",
            enabledHours: false,
            minDate: "dateToday",
            onSelect : function(selectedDate) {
                afficherNbreDeJourDate();
            }
     
        });
     
        $("#datepicker1").datepicker("setDate", "0");
        $("#datepicker2").datepicker("setDate", "1");
     
    });
    Maintenant j'aimerais que lors de mon arrivé sur la page, il m'indique déjà 1 car il y a d'office un jour entre la date de départ et la date de fin.
    Merci d'avance

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    ne te suffit-il pas d’appeler ta fonction afficherNbreDeJourDate() au chargement !?!

Discussions similaires

  1. resultat faux sur calcul de date
    Par debdba dans le forum SQL
    Réponses: 2
    Dernier message: 07/02/2008, 08h47
  2. Resutlat de calcul sur date formaté
    Par neness dans le forum SQL
    Réponses: 6
    Dernier message: 16/06/2004, 15h34
  3. [C#] Affichage resultat de requete dans 2 Labels
    Par kenzo080 dans le forum ASP.NET
    Réponses: 8
    Dernier message: 02/06/2004, 20h07
  4. SCRIPT CALCULANT LA DATE
    Par Redouane dans le forum ASP
    Réponses: 3
    Dernier message: 17/03/2004, 09h10
  5. Calcul sur date
    Par Thomad dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 17/09/2003, 08h55

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