Calendrier date minimale

**janyoura** · 26/10/2012, 00h52

Salut
je n'arrive pas à savoir comment intégrer la condition de date min dans l'input de mon formulaire pour ces deux cas:
1- la date min doit être la date actuelle.
2- la date min doit être supérieure à une date1.
comment intégrer une variable javascript dans l'attribut "min"?
merci pour votre aide.

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
 
<body>
												 <!-- Script DATE  -->
												 <script>
	var initDatepicker = function() {  
    $('input[type=date]').each(function() {  
        var $input = $(this);  
        $input.datepicker({  
            minDate: $input.attr('min'),  
            maxDate: $input.attr('max'),  
            dateFormat: 'yy-mm-dd'  
        });  
    });  
};  
 
if(!Modernizr.inputtypes.date){  
    $(document).ready(initDatepicker);  
};  
  </script>
 
<form>
<p>  <label>
         	Date début <span class="form-required">*</span>
        </label>
 
          <input type="date" name="date_deb" id="date_deb" value="2012-03-01" min="<script>dateJour = new Date(); datej = dateJour.getFullYear()+'-'+dateJour.getMonth()+'-'+dateJour.getDate(); write(datej); </script>"></p>
         <p class="centerAlign"><button type="submit" class="boutonSubmit" role="button" aria-disabled="false">
			Soumettre le formulaire
		</button></p>
		<div class="clear"></div>
 
	</form>

**danielhagnoul** · 29/10/2012, 23h54

Bonsoir

Exemple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<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.9.0/themes/overcast/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
	<style>
		/* TEST */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
		<label>
         	Date début <span class="form-required">*</span>
        </label>
        <input type="date" name="date_deb" id="date_deb" value="" min="" max="">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-10-29T23:53:12.906+01:00" pubdate>2012-10-29T23:53:12.906+01: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>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
			var jObjDateDeb = $( "#date_deb" ),
				dateJour = new Date();
 
			jObjDateDeb
				.prop({
					"value" : dateJour.getFullYear() + '-' + ( dateJour.getMonth() + 1 ) + '-' + dateJour.getDate(),
					"min" : "-0j",    // datepicker, la date du jour. Voir minDate et maxDate pour les symboles utilisables.
					"max" : "+25j"  // datepicker, date min + 25 jours
				})
				.datepicker({
					minDate : jObjDateDeb.prop( "min" ),
					maxDate : jObjDateDeb.prop( "max" ),
					dateFormat: 'yy-mm-dd'
				}); 
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

**zozotitou** · 22/07/2013, 15h01

Bonjour tout le monde

Merci Daniel pour ton aide, j'ai pu l'adapter à mon script et tout marche bien, un e dernière petite question je voudrais interdit les jours fériés avec un calendrier perpétuel.

A+

ZOzotitou

Calendrier date minimale

jQuery

Vue hybride

Discussions similaires

Partager

Partager