Discussion :

[Mak-chan]

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 ?!

[ProgElecT]

Salut

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

[Mak-chan]

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>