Besoin d'aide ?

Materialize - Problème avec Datepicker

  • Avatar de MakChan
    Membre depuis :
    24/05/2017
    Messages :
    6

    Bonjour à tous,
    J’espère qu'un sujet sur Materialize ne sera pas malvenu ici, mais rencontrant un problème avec sur un Projet Laravel, et ne trouvant pas de bon forum dédié je me permet d'essayer ^^"

    Je n'arrive pas à faire fonctionner un Timepicker de Materialize,
    et je ne comprends résolument pas pourquoi ._."

    C'est après différent essais infructueux que je me tourne vers vous, peut-être ai-je fait une erreur bête ..
    Et que mon stupide cervelas l'occulte, dans tous les cas : mon TimePicker ne fonctionne pas et j'aurais bien besoin d'éclairage ^^ !

    Je dispose donc d'une page Template qui définit le cadre "graphique" de mon application.
    Mes pages en héritent sans exception ni problème apparent et le contenu de la page change suivant celle-ci.
    Jusque-là, rien d'anormal !
    Je précise cette disposition car j'émet 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 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 de ces pages ...
    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" voulut en Timepicker.
    (Je pré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 :D :

    -> Extrait de la page Formulaire :

    <div class="row">

    <div class="input-field col s6">
    <input id="dateDepart" type="text" class="datepicker">
    <label for="dateDepart">Date de D&eacute;part Souhait&eacute;e :</label>
    </div>

    <div class="input-field col s6">
    <input id="heureDepart" type="text" class="timepicker">
    <label for="heureDepart">Heure de D&eacute;part Envisag&eacute;e :</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 class="row">

    <div class="input-field col s12">
    <input disabled id="lieuDepart" type="text" class="text" class="validate" value="BESANCON">
    <label for="lieuDepart">Lieu de D&eacute;part :</label>
    </div>

    </div>

    </div>

    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 Time fonctionnent.

    -> Ma page Template :
    (Dans le body, après l'import Jquery)

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

    [...]

    <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

    $('.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 "ready" mes labels bouffent mes champs text au rafraichissement de la page (tous mes labels)...
    Mais mes champs de class="timepicker" ne restent que des champs textes...

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

Vous ne pouvez pas répondre à ce sujet.