[DatePicker] Modification

**gotque** · 10/07/2013, 11h45

Bonjour à tous,

J'utilise actuellement le plugin DatePicker pour permettre à mes utilisateurs de choisir une date depuis le calendrier.

Cependant, j'ai un besoin spécifique. En effet, je souhaite leur laisser la possibilité de me renseigner le jour et/ou le mois en inconnu.

Cela donnerait :
uu/08/2013 : Désignant un jour d'août 2013
uu/uu/2013 : Désignant un jour en 2013

Dans l'idéal, sous le calendrier, nous aurions un bouton "Jour inconnu" et un bouton "Mois inconnu" qui permettrais de mettre les "uu"

Est ce possible via le DatePicker actuel?

Si non, avez vous des conseils à me donner pour réaliser mon objectif?

Merci d'avance

QG

**omdafer** · 10/07/2013, 16h01

Bonjour,
tu veux que l'utilisateur doit obligatoirement choisir jour/mois ou jour.

Ou alors s'affranchir de définir jour/mois ou jour ? Dans ce cas, Datepicker n'a plus d’intérêt. Pourquoi ne pas séparer jour / mois / année, et à la rigueur afficher le datepicker quand on met le focus sur jour pour remplir tout les champs.

**gotque** · 12/07/2013, 12h18

Merci beaucoup pour ta réponse.

Tout d'abord (et j'aurais dû le préciser), j'ai une contrainte : la date (jj/mm/aaaa) est dans un champs input et ne peut être scinder en 3 champs (un pour le jour, un pour le mois et un pour l'année)

Le but est que l'utilisateur renseigne la date complète (jj/mm/aaaa) mais il peut arriver que l'utilisateur ne puisse pas fournir le jour ou le mois (s'il ne fournit pas le mois, rien ne sert de fournir le jour).

J'ai cherché en vain une solution sur les forum dédié, sans trouver...

Merci pour ton aide

**danielhagnoul** · 14/07/2013, 00h23

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
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
<!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" ] );
 
					var boolMoisInconnu = false,
						boolJourInconnu = false;
 
					$( "#jourInconnu" ).on( "change", function(){
						boolJourInconnu = $( this ).prop( "checked" );
					});
 
					$( "#moisInconnu" ).on( "change", function(){
						boolMoisInconnu = $( this ).prop( "checked" );
 
						if ( boolMoisInconnu ){
							$( "#jourInconnu" )
								.prop( "checked", true )
								.trigger( "change" );
						}
					});
 
					$( "#datepicker" ).datepicker({
				        "changeMonth" : true,
				        "changeYear" : true,
				        "showButtonPanel" : true,
				        "onSelect" : function( dateStr, ObjPicker ){
				        	// this est l'input
 
				        	if ( boolMoisInconnu ){
				        		$( this ).val( "uu/uu/" + dateStr.slice( -4 ) );
				        	} else if ( boolJourInconnu ){
				        		$( this ).val( "uu/" + dateStr.slice( -7 ) );
				        	}
				        }
					});
 
				});
 
				$( 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 */
 
		label { display: block; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<label>Mois inconnu : <input type="checkbox" id="moisInconnu"></label>
		<label>Jour inconnu : <input type="checkbox" id="jourInconnu"></label>
		<label>Date : <input type="text" id="datepicker"></label>
 
	</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>

[DatePicker] Modification

jQuery

Vue hybride

Discussions similaires

Partager

Partager