Imprimer la Page | Fermez la fenêtre

[Tuto] Plugin jQuery datetimepicker

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23154
Date: 29 Mar 2024 à 07:56
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: [Tuto] Plugin jQuery datetimepicker
Posté par: Hobby001
Sujet: [Tuto] Plugin jQuery datetimepicker
Posté le: 27 Dec 2017 à 17:56
Utilisation du plugin jQuery datetimepicker



Étape 1

Télécharger le plugin sur https://plugins.jquery.com/datetimepicker/" rel="nofollow - https://plugins.jquery.com/datetimepicker/
Extraire le contenu du fichier datetimepicker-master.zip
Renommer le dossier datetimepicker-master en datetimepicker
Copier ce dossier à la racine de votre projet dans openElement

Étape 2

Insérer un champ de saisie de texte dans votre page
Ajouter une classe CSS à la zone "Champ de saisie de texte", disons: dtp



Étape 3


Insérer un bloc de code HTML en position Header contenant le code suivant:

<link rel="stylesheet" type="text/css" href="/datetimepicker/jquery.datetimepicker.css"/ >
<script src="/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

Étape 4

Insérer un bloc de code javascript en position EndBody contenant le code suivant:

$('.dtp').datetimepicker();
jQuery.datetimepicker.setLocale('fr');

Options

Sans le calendrier

$('.dtp').datetimepicker({datepicker:false});

Sans la sélection d'heures

$('.dtp').datetimepicker({timepicker:false});

Liste des options:  https://xdsoft.net/jqplugins/datetimepicker/" rel="nofollow - https://xdsoft.net/jqplugins/datetimepicker/

Révisions:

2017-12-28 Version originale .
2017-12-29 Ajout des options sans dates et sans heures.
2017-12-29 Ajout du lien vers le site pour les options.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE



Réponses:
Posté par: brolysan
Posté le: 27 Dec 2017 à 19:19
testé et pleinement fonctionnel.
Peut être juste vérifier en ligne, avec href, le / du début n'est pas forcément bien pris par tous les hébergeurs. Wink


-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 27 Dec 2017 à 19:30
Pour ce qui est de la langue, y as-t-il un élément détectable par OE qui permettrait de passer le bon paramètre soit "de" ou "fr" ou "en" etc ?

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 27 Dec 2017 à 21:10
Message posté par Hobby001 Hobby001 a écrit:

Pour ce qui est de la langue, y as-t-il un élément détectable par OE qui permettrait de passer le bon paramètre soit "de" ou "fr" ou "en" etc ?

normalement, lorsque tu changes de pages pour les langues, tu peux modifier/ajouter du code.
Est ce ça que tu demandes?


-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 27 Dec 2017 à 21:15
En fait, quand on exploite l'outil générant des pages différentes selon la langue, on doit aller dans le code de chacune pour y changer  la valeur jQuery.datetimepicker.setLocale('fr');

La question c'est de savoir si un élément permet de détecter la langue du site pour mettre la valeur de façon automatique.   J'ai déjà essayé en détectant le nom de la page dans le fureteur c'est assez pénible.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 27 Dec 2017 à 21:17
De mémoire, je crois que dans l'éditeur d'éléments, c'est possible. Soit Larsène soit Dmit pourrait te le confirmer.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Bridet
Posté le: 29 Dec 2017 à 09:21
Je me demandais quelle est la différence avec ce que j'ai mis sur mon site et qui fonctionne ?

code HTML position startbody

<link rel="stylesheet" type="text/css" href="Files/Other/jquery.datepickr.css" />
<script type="text/javascript" src="Files/Other/jquery.datepickr.min.js"></script>

<script type="text/javascript">
$(function() {
  $('.date1 :input').prop('id','Id_DatePickrElement1'); // On attribut un id à l'inputbox
            new datepickr('Id_DatePickrElement1', {
                dateFormat: '\\L\\e jS F Y', /* Double anti-slash pour mettre du texte */
                weekdays: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
                months: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
                suffix: { 1: 'er' },
                defaultSuffix: '' /* suffix utilisé si aucun suffix 'th' */
            });
  // Pour que le calendrier soit au premier plan
$('.calendar').css('z-index','100000');
 });
</script>


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus


Posté par: Hobby001
Posté le: 29 Dec 2017 à 14:53
Celui-ci permet d'entrer la date et l'heure.

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 29 Dec 2017 à 15:21
j'ai testé, marche très bien, juste un souci de sélection de l'heure sur mobile. A voir pourquoi...

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 29 Dec 2017 à 15:28
Au pire, il faudra séparer les valeurs dans deux champs et entrer la date et l'heure séparément avec 
 timepicker:false,
ou 
  datepicker:false,
À voir ici:  https://xdsoft.net/jqplugins/datetimepicker/" rel="nofollow - https://xdsoft.net/jqplugins/datetimepicker/




-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Bridet
Posté le: 29 Dec 2017 à 15:40
Message posté par Hobby001 Hobby001 a écrit:

Celui-ci permet d'entrer la date et l'heure.

Oui mais en plus le tien a l'air bien plus simple en plus, comment fait-on si on ne veut que la date avec ton code ?


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus


Posté par: Hobby001
Posté le: 29 Dec 2017 à 15:50
$('.dtp').datetimepicker({timepicker:false}); 

J'ai édité le tuto


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net