BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Plugin jQuery datetimepicker
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Plugin jQuery datetimepicker

 Répondre Répondre Page  12>
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Plugin jQuery datetimepicker
    Envoyé : 27 Dec 2017 à 17:56
Utilisation du plugin jQuery datetimepicker



Étape 1

Télécharger le plugin sur 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/

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.


Edité par Hobby001 - 27 Jan 2022 à 11:50
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 ?
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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?
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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>
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Dec 2017 à 14:53
Celui-ci permet d'entrer la date et l'heure.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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...
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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,


Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.