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>