Calendrier datepicker griser les week-end

**zozotitou** · 12/07/2013, 15h20

Bonjour tout le monde,
Je voudrai griser les week-end et me pas pouvoir les utiliser. et me position sur la date de la veille.
Si le jour tombe un lundi, je voudrai qu'il se positionne sur le vendredi.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="FR">
<head>
<meta charset="utf-8" />
<title>ASUR : Ordonnancement et Mise en Paiement</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
 
$.datepicker.regional['fr'] = {
    closeText: 'Fermer',
    prevText: 'Précédent',
    nextText: 'Suivant',
    currentText: 'Aujourd\'hui',
    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre'],
    monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Aout','Sept.','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: 'Sem.',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
 
 
$(function() {
$( "#datepicker" ).datepicker();
});
 
 
</script>
 
<style type="text/css"> .ui-datepicker { font-family:Garamond; font-size: 13px; margin-left:12px} 
 
</style>
 
</head>
 
<body>
 
 
 
<form method = "POST" action = "date.php">
 
<p> Date :  <input type="text" id="datepicker", size = 8px , name="date" ></p>
 
<select name="type">
<option value=""> - Choisir - </option>
<option value="LIQ"> LIQ </option>
<option value="MEP"> MEP </option>
</select>
 
<input type="submit" value="Valider" name="OK">
 
</form>
</body>
</html>

Merci de votre aide !!

**NoSmoking** · 12/07/2013, 18h35

Bonjour,
qu'as tu fait, ou est ce que cela coince...

**danielhagnoul** · 13/07/2013, 00h28

Envoyé par NoSmoking

Bonjour,
qu'as tu fait, ou est ce que cela coince...

Il a au moins le mérite d'avoir posé le problème clairement !

Ce n'est pas trivial, voici ma page de test, elle semble fonctionner correctement. Pour tester, il suffit de copier-coller le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.10.2.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
					$( "#datepicker" ).datepicker({
				        "changeMonth" : true,
				        "changeYear" : true,
				        "showButtonPanel" : true,
				        "beforeShow" : function( input, ObjPicker ){
				        	var jObjInput = $( input );
 
				        	if ( ! jObjInput.val().match( /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/ ) ){
					        	var date = new Date(),
					        		y = date.getFullYear(),
					        		m = date.getMonth(),
					        		d = date.getDate(),
					        		j = date.getDay(),
					        		n = -1;
 
					        	switch ( j ){
					        		case 0 : // dimanche -> vendredi
					        			n = -2;
					        			break;
					        		case 1 : // lundi -> vendredi
					        			n = -3;
					        			break;
					        		default : n = -1; // les autres jours
					        	}
 
					        	jObjInput.val( ( d + n ) + "/" + ( m + 1 ) + "/" + y );
					        }
				        },
				        "beforeShowDay" : function( date ){
				        	return $.datepicker.noWeekends( date );
				        },
				        "onSelect" : function( dateStr, ObjPicker ){
				        	// this est l'input
 
				            console.log( dateStr );
				        }
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<p>Date: <input type="text" id="datepicker">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-11T01:09:14.644+02:00" pubdate>2013-07-11T01:09:14.644+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**NoSmoking** · 13/07/2013, 07h38

Bonjour Daniel,

Envoyé par danielhagnoul

Il a au moins le mérite d'avoir posé le problème clairement !

hummm! pour le clairement

Concernant ton code ne manquerait-il pas le n dans le swicth ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
switch ( j ){
  case 0 : // dimanche -> vendredi
    n= -2;
    break;
  case 1 : // lundi -> vendredi
    n= -3;
    break;
  default : n= -1; // les autres jours
}

**danielhagnoul** · 13/07/2013, 10h19

Envoyé par NoSmoking

Concernant ton code ne manquerait-il pas le n dans le swicth ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
switch ( j ){
  case 0 : // dimanche -> vendredi
    n= -2;
    break;
  case 1 : // lundi -> vendredi
    n= -3;
    break;
  default : n= -1; // les autres jours
}

!

Autre problème

Je ne suis pas satisfait par la ligne de code suivante : if ( jObjInput.val().length < 8 ){.

~~Je n'ai pas réussi à trouver un test booléen sur la validité de la date qui me convienne.~~

Mais si ! if ( ! jObjInput.val().match( /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/ ) ){.

**zozotitou** · 15/07/2013, 07h55

Bonjour,
merci je regarde et je vous tiens au courant.

Calendrier datepicker griser les week-end

jQuery

Vue hybride

Discussions similaires

Partager

Partager