11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Dans un code jquery je veux, à partir de la date sélectionnée, fabriquer une deuxième date avec un délai en jour (par exemple la date - 10 jours).
Pour cela je veux aussi récupérer le jour de la semaine pour la future date pour tester si c'est un samedi ou un dimanche.

Lorsque je veux explorer les élément de la date, avec datepicker('getDate') il me renvoie la date de la veille à 23H00.
Par exemple si je sélectionne le 05 fév 2019 avec le datepicker, il sélectionne la date correcte dans mon élément html mais datepicker('getDate') renvoie le 04 fév 2019 à 23H00, voir l'image jointe et le code.

Je suppose qu'il y a un problème de fuseau horaire mais je sais pas où modifier ça...

upload/1546783554-40948-jquery-date.jpg
(------- faire click droit et "afficher l'image" pour la voir en grand -------)


	/* ----------------------------------------------------- */
	/*           sélection date de pose appareil                  */
	/* ----------------------------------------------------- */
	$.datepicker.regional['fr'] = {
		closeText: 'Fermer',
		prevText: '<Préc',
		nextText: 'Suiv>',
		currentText: 'Courant',
		monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
		'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
		monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
		'Jul','Aoû','Sep','Oct','Nov','Déc'],
		dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
		dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
		dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''
	};
	
	$.datepicker.setDefaults($.datepicker.regional['fr']);


	$("#date-pose-app").datepicker({
		numberOfMonths: 2,
		minDate: "0",
		showWeek: true,
		weekHeader: "  ",
		onSelect:  function(date, datepicker) {
			var date2 = $(this).datepicker('getDate');
			console.log(date);
			console.log(datepicker);
			console.log(date2);
		}
	});


Modifié par lionel_css3 (06 Jan 2019 - 15:08)
Modérateur
Bonjour,

Avec Chrome + MacOS
Ton code m'affiche "Sun Jan 06 2019 00:00:00 GMT+0100 (heure normale d’Europe centrale)" dans la console pour la date2 si je sélectionne la date d'aujourd'hui.

Avec Firefox + MacOS
Ton code m'affiche "Date 2019-01-05T23:00:00.000Z" dans la console pour la date2 si je sélectionne la date d'aujourd'hui.

J'en déduis que tu utilises firefox, et que ça a l'air d'être juste une question d'affichage dans la console, qui dépend du navigateur. Et par conséquent, changer des settings dans jquery ne résoudra rien.

EDIT: le code ci-dessous ajoute 10 jours à ton datepicker :

		$("#date-pose-app").datepicker({
			onSelect: function() {
  				var date2 = $(this).datepicker('getDate'); 
  				date2.setDate(date2.getDate()+10); 
  				$(this).datepicker('setDate', date2);
			}
		});


Amicalement,
Modifié par parsimonhi (06 Jan 2019 - 22:11)
Meilleure solution
@parsimonhi

Merci pour ta réponse, oui je suis bien dans Firefox et j'avais pas pensé à essayer dans un autre navigateur ...

Je vais tester ton code pour voir ce que ça m'affiche
et en fait la date avec un délai appliquée je veux la faire apparaitre dans un autre champ et la date normale reste affichée dans le champ cliqué #date-pose-app
parsimonhi a écrit :

EDIT: le code ci-dessous ajoute 10 jours à ton datepicker :
Amicalement,


Génial, tu m'as sauvé mon dimanche....
voici mon code actuel
#date-pose-app est le premier input: quand on choisit une date avec lui, la date -10 jours se rajoute automatiquement dans #date-livraison-app et on peut même ajuster après coup la date dans #date-livraison-app si il y avait besoin.

Génial !!!!

c'est bizarre cette histoire de navigateur.....



	$("#date-pose-app, #date-livraison-app").datepicker({
		numberOfMonths: 2,
		minDate: "0",
		showWeek: true,
		weekHeader: "  ",
		onSelect:  function(date, datepicker) {
			var date2 = $(this).datepicker('getDate'); 
			date2.setDate(date2.getDate()-10); 

			if(this.id !== 'date-livraison-app') {
				$("#date-livraison-app").datepicker('setDate', date2);
			}

		}
	});

J'ai amélioré mon code...

si la 2ème date tombe un samedi ou un dimanche, je la remplace par le vendredi juste avant..


	$("#date-pose-app, #date-livraison-app").datepicker({
		numberOfMonths: 2,
		minDate: "0",
		showWeek: true,
		weekHeader: "  ",
		onSelect:  function(date, datepicker) {

			if(this.id === 'date-pose-app') {
				var date2 = $(this).datepicker('getDate'); 
				date2.setDate(date2.getDate()-10); 
				var whatTheDayInTheWeek = date2.getUTCDay();

				if (whatTheDayInTheWeek === 5) {
					//samedi
					date2.setDate(date2.getDate()-1);
				}
				if (whatTheDayInTheWeek === 6) {
					//dimanche
					date2.setDate(date2.getDate()-2);
				}
				$("#date-livraison-app").datepicker('setDate', date2);
			}
		}
	});


Modifié par lionel_css3 (06 Jan 2019 - 23:24)
Modérateur
Bonjour,

Utiliser la méthode getUTCDay() est problématique, même si ici ton code marche.

En effet, elle renvoie le jour à GMT 0, donc la veille du jour que tu sélectionnes dans le calendrier qui est en ce moment à GMT+1. Mais par ailleurs, tu considères que l'indice 5 correspond au samedi, alors qu'en théorie, le samedi est à l'indice 6 car le dimanche est à l'indice 0. Du coup, tu retombes sur tes pieds, les deux effets s'annulant.

J'utiliserais plutôt le code suivant pour récupérer le jour de la semaine (qui renvoie directement "lundi", "mardi", "mercredi", etc.) :
var whatTheDayInTheWeek = $.datepicker.formatDate("DD", date2);

On peut utiliser la même méthode pour afficher la date complète dans un format quelconque. Par exemple :
var fullDate = $.datepicker.formatDate("DD dd MM yy", date2);


Amicalement,
Modifié par parsimonhi (07 Jan 2019 - 00:21)
parsimonhi a écrit :


J'utiliserais plutôt le code suivant pour récupérer le jour de la semaine (qui renvoie directement "lundi", "mardi", "mercredi", etc.) :
var whatTheDayInTheWeek = $.datepicker.formatDate("DD", date2);


Amicalement,


Encore merci à toi, et c'est pour ça que je récupérais la date de la veille...

je vais tester ton code dans la matinée et je te dirai
Modifié par lionel_css3 (07 Jan 2019 - 07:24)