1. #1
    Candidat au Club Avatar de Mak-chan
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    août 2017
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : août 2017
    Messages : 4
    Points : 4
    Points
    4

    Par défaut [Materialize/JS] - Timepicker

    Bonjour à tous,
    J'ai pas mal hésité quanta où placer mon sujet, n'hésitez pas à le déplacer dans un sujet éventuellement mieux approprié .
    Comme cela concerne plutôt du script que du design (malgré Materialize), j'imagine qu'il trouvera bien sa place part là .. ^^'

    Je vais essayé d'être bref : j'ai un projet dev' que je monte en PHP, Laravel 5.2 (+Collective) sous le template Materialize.
    Je rencontre là dessus 1 problèmes ch-..ennuyeux avec mes timepickers qui ne sont tout bonnement pas prit en compte sans que je sache pourquoi x-x ..

    Le script étant le même que celui fournit par Materialize (au code prêt !), et l'appel de fonction semblable aux datepicker (qui eux fonctionnent bien), mon soucis ne viens donc pas de l'appel de mes Scripts...
    Je sais que les Timepickers sont compatibles à Laravel 5.2, cela ne viens pas du Navigateur, ... Je ne sais plus quoi faire ni où chercher !

    J'imagine qu'on va me demander mes codes pour vérifier mes dires et autres éventuelles fautes de frappes alors voici mon problème plus en détails : (les scripts Datepicker et Timepicker étant identiques à ceux fournit par Materialize)

    Je dispose donc d'une page Template qui définit le cadre "graphique" de mon application. Évidement, mon projet hérite de Materialize et de ses fonctions depuis ce même template.
    Jusque-là, rien d'anormal !
    Je précise cette disposition car j'ai des doutes quanta OU placer le script du Timepicker ?!
    (Normalement, si le Template tourne, et que le Script est 100% fidèle au modèle du site, il ne reste que le placement/traitement du script qui peut faire ch# .. Non ?)

    Doit-il être dans le Template et hérité dans la page ? Où bien seulement dans la page ciblée ? Au début, à la fin ? Dans les 2 pages à la fois ?
    Un fond d'conscience me dit que cela ne change rien, un script, où qu'il soit, fonctionne pour la page ?! Et donc il semble mieux de le mettre au Template pour un besoin revenant sur plusieurs des pages qui en héritent ...
    C'est en tout cas ma logique mais j'ai des doutes à force ..
    Le soucis est peut-être même ailleurs ... ?

    Bref,
    J'ai une page de Formulaire (Laravel 5.2, Blade+Collective).
    Dans celle-ci j'ai donc mes champs de saisies, dont des champs "heures" vouluent en Timepicker.
    (Je reprécise en passant avoir aussi des Datepicker, qui eux tournent très bien)

    Le script du Timepicker est appelé au Template don la page hérite bien mais cela ne fait rien !
    Mes champs identifiés comme "timepicker" ont le comportement de champs textes et je ne comprends pas pourquoi !

    Beaucoup de mots pour pas grand-chose alors joignons le Code :

    -> Extrait de la page Formulaire :

    Code HTML : 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
     
    @extends('template') <!--Hérite de TEMPLATE-->
     
    @section('title')
        Accueil V&eacute;hicules - R&eacute;servation
    @endsection
     
    @section('content') <!--Contenu propre à la page-->
     
    <form class="col s12" method="POST" action="{{ url('reservation') }}">
      {!! csrf_field() !!} 
    <div class="row">
        <div class="input-field col s6">
     
          <input  id="dateDepart" type="text" class="datepicker">
          <label for="dateDepart">Date de Départ :</label>
     
        </div>
     
        <div class="input-field col s6">
     
          <input  id="heureDepart" type="text" class="timepicker">
          <label for="heureDepart">Heure de Départ :</label>
     
        </div>
     
        <div class="input-field col s12">
     
            <label class="" for="lunchtime">Lunchtime</label>
            <input id="lunchtime" class="timepicker" tabindex="55" type="text">
     
        </div>
     </div>
     
    <div class="row">
        <div class="input-field col s12">
             <button class="btn waves-effect waves-dark light-blue darken-3" type="submit" name="action">Envoyer<i class="material-icons right">send</i></button>
        </div>
    </div>
    </form>
    @endsection

    J'ai rajouté le "lunchtime", exemple de Materialize, pour un essais à 100% fidèle.
    Bien sûr, la page hérite du Template, don le script du Datepicker et celui du Time... @extends('template')
    Mais seuls les DateTime fonctionnent.

    -> Ma page Template :
    (Dans le body, Contient les Scripts à donner aux autres pages -telles que la page précédente- dont les scripts Datepicker et Timepicker)

    Code HTML : 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
    76
    77
    78
    79
    80
    81
    82
    83
    <!--Import jQuery before materialize.js-->
     
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script&gt;
     
    <script type="text/javascript" src="{{url('js/materialize.min.js')}}"></script>
     
    <!--Other element insitialisations-->
     
    <script type="text/javascript" language="javascript">
     
        $( document ).ready(function()
     
        {
     
            $(".button-collapse").sideNav(); //mobile screen menu init
     
            $('select').material_select(); //Liste
     
                //Champs DATE
     
            $('.datepicker').pickadate({
     
                  selectMonths: true, // Creates a dropdown to control month
     
                  selectYears: 2, // Creates a dropdown of 15 years to control year
     
                  labelMonthNext: 'Mois suivant',
     
                      labelMonthPrev: 'Mois précédent',
     
                            labelMonthSelect: 'Selectionner le mois',
     
                            labelYearSelect: 'Selectionner une année',
     
                            monthsFull: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
     
                            monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
     
                            weekdaysFull: [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ],
     
                            weekdaysShort: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
     
                            weekdaysLetter: [ 'D', 'L', 'M', 'M', 'J', 'V', 'S' ],
     
                            today: 'Ajd',
     
                            clear: 'Effacer',
     
                            close: 'OK',
     
                            format: 'dd/mm/yyyy'
     
            });
     
        }
     
        ); //Fin de document.ready
     
    //Champs HEURE
     
    $('.timepicker').pickatime({
     
       default: 'now', // Set default time
     
       fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
     
       twelvehour: false, // Use AM/PM or 24-hour format
     
       donetext: 'OK', // text for done-button
     
       cleartext: 'Clear', // text for clear-button
     
       canceltext: 'Cancel', // Text for cancel-button
     
       autoclose: false, // automatic close timepicker
     
       ampmclickable: true, // make AM PM clickable
     
       aftershow: function(){} //Function for after opening timepicker
     
     });
     
    </script>

    Mes essais m'ont fait placer le script du Time partout où il était possible ...
    A travers des balises script à part, sur la page du formulaire ou bien du Template voir les deux, ...
    Mais aussi et surtout DANS et HORS de la fonction document.ready ?!
    Rien à faire, la seule différence c'est qu'avec le script du Time à l'intérieur du "document.ready" mes labels bouffent mes champs text au rafraichissement de la page (tous mes labels)...
    Le DateTime lui ne fonctionne pas hors du document.ready, il y à donc certainement un problème dans tout ça mais mes essais tournent en ronds et mes champs de class="timepicker" ne restent que des champs textes dans tous les cas...

    + : Je précise que la console JS me déclare que "pickatime n'est pas une fonction" alors que, si ! Elle est pareille au code Materialize alors à moins qu'il ne soit faussé et moi stupide ...

    Quelqu'un aurait-il une idée du pourquoi du comment corriger mon soucis ?!

  2. #2
    Rédacteur/Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    4 072
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 4 072
    Points : 8 077
    Points
    8 077

    Par défaut

    Salut

    Mauvais copier/coller? fin de ligne 3 du 2éme code </script&gt;

  3. #3
    Candidat au Club Avatar de Mak-chan
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    août 2017
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : août 2017
    Messages : 4
    Points : 4
    Points
    4

    Par défaut

    Oui, my bads ^^"
    La balise est bien fermée d'un " > " dans mon Template !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <!--MATERIALIZE-->
        <!--Import jQuery before materialize.js-->
            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
            <script type="text/javascript" src="{{url('js/materialize.min.js')}}"></script>

Discussions similaires

  1. Materialized view + Indexs + Contraintes
    Par hair_peace dans le forum Oracle
    Réponses: 4
    Dernier message: 05/09/2006, 17h57
  2. DirectX : Problème Material.
    Par OpenGG dans le forum DirectX
    Réponses: 3
    Dernier message: 20/06/2006, 19h07
  3. snapshot or materialized view
    Par sygale dans le forum Administration
    Réponses: 11
    Dernier message: 12/10/2004, 17h07
  4. MATERIALIZED VIEW <> SNAPSHOT
    Par sygale dans le forum Administration
    Réponses: 3
    Dernier message: 18/06/2004, 11h14
  5. SQL Dynamique - Materialized view
    Par Simeans2004 dans le forum SQL
    Réponses: 15
    Dernier message: 10/06/2004, 17h56

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