Symfony 4 - Affichage de l'heure

Fermé

chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 - 30 août 2018 à 06:04
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 1 sept. 2018 à 16:57

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 :

/* 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,

A voir également:

Symfony 4 - Affichage de l'heure
Modifier affichage heure iphone - Guide
Code gta 4 ps4 - Guide
1go internet = combien d'heure - Forum Mobile
Affichage double ecran - Guide
Windows 11 affichage classique - Guide

1 réponse

Réponse 1 / 1

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
1 sept. 2018 à 16:57

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 %}

Discussions similaires

Je tiens combien de temps avec 2Go d'internet ?

Pix

Quel est l'équivalent 40 GO d'internet en heures ?

Excel heures en centième

Quel est l'équivalent de 1 Go en heures de vidéos ?

Discussions similaires

Newsletters