[RESOLU] Horloge en php

Eléphant du PHP | 59 Messages

20 juil. 2021, 00:06

Bonsoir à tous,

Je me permet de venir vous demander votre aide.
Je travail sur un projet de fin d'année, en php css et un peu de js, j’essaie d'intégrer un input de type horloge mais impossible.
J'utilise bootstrap V5.0 comme framework.
Ma feuille CSS est bien reliée, mais cela ne fonctionne pas.
Voici le lien de l'horloge que je souhaite intégrer :

https://mdbootstrap.com/docs/b4/jque.../time-picker1/

En scrollant l'horloge que je souhaite intégrer est "now".
Je vous remercie par avance de votre aide.

@+ Filou

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9037 Messages

20 juil. 2021, 08:04

mais cela ne fonctionne pas.
Il va falloir être plus précis et que tu avances davantage dans ton debugage pour nous indiquer à quel endroit ça ne marche pas et quels sont les messages d'erreur rencontrés que tu ne comprends pas.

Ton horloge est probablement en full javascript, donc il faut que tu regardes dans la console de développement de ton navigateur (Ctrl+Shift+k sous Firefox et probablement Chrome)
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphant du PHP | 59 Messages

20 juil. 2021, 09:38

Bonjour,

Oui j’ai pas été très explicite.
J'ai recopier le HTML et le JS mais rien ne se passe, ma feuille JS est bien rattacher portant.
Merci par avance pour votre aide.

@+ Filou

ynx
Eléphant du PHP | 323 Messages

20 juil. 2021, 11:16

Bonjour,

As-tu regardé si tu as des erreurs dans la console de développement comme suggéré par @rthur ?
Peux-tu nous montrer ton code stp ?

Bonne journée,

Eléphant du PHP | 59 Messages

20 juil. 2021, 11:37

Voici mon php :
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Lien CSS Bootstrap V5 -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- Fin lien CSS Bootstrap V5 -->
<!-- Lien CSS Perso -->
<link rel="stylesheet" href="/assets/css/media.css">

<!-- Fin lien CSS Perso -->
<!-- Lien JS Perso -->

<!-- Fin lien JS Perso -->
<!-- Meta Perso -->
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- Meta Perso -->
<title>vierge</title>
</head>

<body>

<div class="md-form">
<input type="text" id="manual-operations-input" class="form-control" placeholder="Now">
<label for="form1" class="">Check the minutes</label>
</div>




<!-- Script Bootstrap V5 -->
<script src="/assets/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/assets/js/jspersoludo.js"></script>
<!-- Fin script Bootstrap V5 -->
</body>

</html>
et voici mon js
var input = $('#manual-operations-input').pickatime({
autoclose: true,
'default': 'now'
});

// Manually toggle to the minutes view
$('#check-minutes').click(function(e){
e.stopPropagation();
input.pickatime('show').pickatime('toggleView', 'minutes');
});

Avatar du membre
Eléphant du PHP | 70 Messages

20 juil. 2021, 11:49

Salut,

tu ne répond toujours pas à la question :
As-tu regardé si tu as des erreurs dans la console de développement comme suggéré par @rthur ?
" La révolution informatique fait gagner un temps fou aux Hommes, mais ils le passent avec leur ordinateur ! " by Khalil Assala

ynx
Eléphant du PHP | 323 Messages

20 juil. 2021, 12:45

Concernant l'exemple de l'horloge précisé sur ton premier post, celui-ci utilise Bootstrap 4. Une nouvelle version de MDB utilisant Bootstrap 5 est disponible, il faudrait plutôt utiliser cette version si tu souhaites utiliser Bootstrap 5.

Il manque les fichiers css et js requis par MDB dans ta page : tu peux utiliser les CDN indiqués sur la page d'installation de MDB pour les ajouter facilement dans ton document html :
https://mdbootstrap.com/docs/standard/g ... ection-cdn

Néanmoins le composant MDB DatePicker que tu souhaites utiliser requiert MDB Pro Essential qui est une licence payante :
https://mdbootstrap.com/docs/standard/forms/datepicker/
https://mdbootstrap.com/docs/standard/pro/

Si tu ne veux pas payer pour ce composant, il faudra se tourner vers un autre script pour réaliser cette horloge.

Eléphant du PHP | 59 Messages

20 juil. 2021, 13:05

Merci ynx,

Sauriez-vous si il existe quelque chose du même genre sans passer par une version pro ?

Merci au forum et à vous pour votre aide.
De se fait je vais le passer en résolu sans qu'il ne le sois vraiment.
Car j'avais vu dans le MDB la version pro payante, je pensé qu'il y avait moyen de contourner le probleme.

@+ Filou

ynx
Eléphant du PHP | 323 Messages

20 juil. 2021, 13:46

Je n'ai pas vraiment de script à recommander, en faisant une recherche je suis tombé sur ce composant : https://github.com/djibe/clockpicker
Exemple : https://jsfiddle.net/djibe89/9wj67d5u/
Il est indiqué qu'il fonctionne pour Bootstrap 3 et 4, mais il semble également fonctionner sans soucis avec Bootstrap 5.

Eléphant du PHP | 59 Messages

20 juil. 2021, 15:55

Ah cool merci je fait regarder cela de plus prés, je reveins vers vous prochainement.
Merci pour votre aide .
@+ Filou

Eléphant du PHP | 59 Messages

23 juil. 2021, 16:35

Bonjour à tous,
Je reviens, cela fonctionne.
Merci à tous pour votre aide.
@+ Filou