Symfony 4 - Affichage de l'heure
chabinot
Messages postés
391
Statut
Membre
-
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je débute avec le framework "Symfony 4",
comment puis-je afficher l'heure d'une façon simple dans un rendu de template Twig ?
Je m'explique :
1 - Script date.js :
2 - Page html :
Le résultat est bon, mais j'aimerais avoir la même chose dans un template twig de symfony.
Voilà ce que j'ai fait dans base.html.twig :
Comment coder en twig natif l'instruction "<span id="time"><script>window.onload=dspTime('time');</script></span>" ?
Cordialement,
Je débute avec le framework "Symfony 4",
comment puis-je afficher l'heure d'une façon simple dans un rendu de template Twig ?
Je m'explique :
1 - Script date.js :
/* Fonction Heure */
function dsptime(id) {
heure = document.getElementById(id);
date = new Date();
h = date.getHours();
m = date.getMinutes();
s = date.getSeconds();
hh = date.getHours();
h = h > 12 ? h % 12 : h;
heure.innerHTML = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s + (hh < 12 ? ' am' : ' pm');
setTimeout('dsptime("' + id + '")', 1000);
return true;
}
2 - Page html :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Time</title>
<script src="js/date.js"></script>
</head>
<body>
<h1><a href="/">Test Time</a></h1>
<p id="time"><script>window.onload=dsptime('time');</script></p>
</body>
</html>
Le résultat est bon, mais j'aimerais avoir la même chose dans un template twig de symfony.
Voilà ce que j'ai fait dans base.html.twig :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Boom Social NetWork{% endblock %}</title>
<!-- Typographie -->
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Raleway|Open+Sans|Roboto:100,300,400,500,700|Lato:300,400,700" rel="stylesheet">
<!-- Icones -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="border.ico" type="image/x-icon">
<!-- Syle CSS -->
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<link rel="stylesheet" href="/css/main.css">
{% block stylesheets %}{% endblock %}
<!-- Scripts -->
<script src="/js/date.js"></script>
</head>
<body>
{% set route = app.request.attributes.get('_route') %}
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top italic">
<a class="navbar-brand" href="{{ path('home') }}">Boom Social Network</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
{% if app.user %}
<li class="nav-item {{ route == 'user' ? 'active' }}">
<a class="nav-link" href="{{ path('user') }}">Utilisateurs</a>
</li>
{% endif %}
<li class="nav-item {{ route == 'register' ? 'active' }}">
<a class="nav-link" href="{{ path('register') }}">Inscription</a>
</li>
{% if not app.user %}
<li class="nav-item {{ route == 'login' ? 'active' }}">
<a class="nav-link" href="{{ path('login') }}">Connexion</a>
</li>
{% else %}
<li class="nav-item {{ route == 'logout' ? 'active' }}">
<a class="nav-link" href="{{ path('logout') }}">Déconnexion</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container">
{% block body %}{% endblock %}
</div>
<footer class="footer fixed-bottom italic">
<div class="row">
<div class="col-3 date">
{{ "now" | toDay }} {{ ' - Jour : ' ~ "now" | day }} {{ ' - Semaine : ' ~ "now" | week ~ ' || ' }}
<i class="fa fa-clock-o"></i> <span id="time"><script>window.onload=dspTime('time');</script></span>
</div>
<div class="col-6 text-center titre">
{{ '©' | raw }} {{ 'Copyright ' ~ "now" | year ~ ' - Boom Social NetWork. Tous droits Réservés.' }}
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
Comment coder en twig natif l'instruction "<span id="time"><script>window.onload=dspTime('time');</script></span>" ?
Cordialement,
1 réponse
-
Bonjour.
Twig utilise le PHP il faut donc utilisé la fonction date en php.
Autre chose que tu as demandé d'adapter ton heure en js à twig.
J'ai donc mis le script en fin de page:
pour éviter un onload
pour respecter l'organisation dans le template.
et surtout pour que le html existe avant le script
date.js/* Fonction Heure */ function dsptime() { var heure; date = new Date(); h = date.getHours(); m = date.getMinutes(); s = date.getSeconds(); hh = date.getHours(); h = h > 12 ? h % 12 : h; heure = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s + (hh < 12 ? ' am' : ' pm'); document.querySelector('#time').innerHTML = heure; return heure; } dsptime();
twig<footer class="footer fixed-bottom italic"> <div class="row"> <div class="col-3 date"> {{ "now" | date('d') }} {{ ' - Jour : ' ~ "now" | date('D') }} {{ ' - Semaine : ' ~ "now" | date('W') ~ ' || ' }} <i class="fa fa-clock-o"></i><span id="time"></span> </div> <div class="col-6 text-center titre"> {{ '©' | raw }} {{ 'Copyright ' ~ "now" | date("Y") ~ ' - Boom Social NetWork. Tous droits Réservés.' }} </div> </div> </footer> <!-- Scripts --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="/js/date.js"></script> {% block javascripts %}{% endblock %}
