Recupere Value dans le DOM

ZuckBin · 26 Janvier 2011

Je souhaite récupérer une .value dans ma page courante après que le dom se soit chargé.

Le Js se charge ainsi :


                <script type="text/javascript">
                               window.addEvent('domready', function() { 
                                               new vlaDatePicker('exampleIII',
    { openWith: 'togglePicker', offset: { y: -2, x: 2 },
      separateInput: { day: 'day', month: 'month',
        year: 'year' },
                               format: 'y/m/d'
                               } );                          
                               });           
                </script>

<span id="exampleIII">
    <input id="day" name="day" type="text" style="width: 18px;" maxlength="2" />
    <input value="/" type="text" disabled="disabled" style="width: 5px;" />
    <input name="month" class="textbox" style="width: 16px;" maxlength="2" type="text" />
    <input value="/" type="text" disabled="disabled" style="width: 5px;" />
    <input name="year" type="text" style="width: 28px;" maxlength="4" />
    <img src="/recherche/js/images/calendar.gif" id="togglePicker" class="pickerImg" alt="Choisissez une date" />
</span>

Jai donc une page coté client qui a exécuté du php+Javascript.

Jutilise un script mootools de calendrier picker, il affiche un calendrier au click de la souris sur une image, sur le calendrier après le choix, il re-inject la value dans la page HTML.

Le problème est quil affiche la value à lecran mais pas dans le code HTML source de la page, et on voit bien que dans input il ny a pas de value= « value »

Par contre avec Fiebug en inspectant le dom, on voit bien que lelement exampleIII à pour value, le chiffre saisi par le client sur le calendrier.

Jarrive a récupérer la value la première fois, mais pas après le chargement de page

Le but du jeu est de stocker « mavalue » pour la passer dans lurl comme ceci :

http://xxxxxx/recherche.php?s=&f=Agenda&t[]=date_debut|mavalue

Merci pour votre aide,

Cordialement

**Ernestine** · 26 Janvier 2011

Salut,

Vraiment bizarre ce champ date : il ne tient pas sur un seul input, mais sur cinq ! Un input pour l'année, un pour le mois, un pour le jour, et encore deux inputs rien que pour les "/" séparateurs ! Pourquoi faire compliqué quand on peut faire simple ?

Quoiqu'il en soit, malgré la complexité inutile de ce truc, il n'y a pas de raison que les données ne soient pas envoyées. Il faut englober tous les inputs dans un form (c'est peut-être déjà le cas mais on ne le voit pas dans ton copier-coller). Je suppose aussi qu'il y a un javascript qui concatène les trois champs année, mois et jour au moment de la soumission.

Enfin bon, c'est vraiment brouillon, je pense que tu ferais mieux de procéder autrement (faire tenir la date sur un seul input).

Le problème est quil affiche la value à lecran mais pas dans le code HTML source de la page, et on voit bien que dans input il ny a pas de value= « value » Par contre avec Fiebug en inspectant le dom, on voit bien que lelement exampleIII à pour value, le chiffre saisi par le client sur le calendrier.

Tout ceci est parfaitement normal, le problème n'est pas là.

**Portekoi** · 26 Janvier 2011

Bonjour,

Tu peux faire tout cela en Jquery. Ajoute un champ de type "text", avec pour "name" et "id", "date_".

Fais un include sur la Lib jquery et ensuite :


$().ready(function() {
$('.action').click(function() {
	//On récupère la valeur du champs
	var date_ = $("#date_").attr('value');

	//On envoie les données
	$.ajax({
		type: "GET",
		url: "ton-script.php",
		data: 'date_=' + date_,
		beforeSend: function(){
		},
		success: function(msg){
			Alert('Données chargées !');
		},
		//Une erreur?
		error: function(msg){
			alert(msg);
		}
	});	
});
});

Portekoi

ZuckBin · 26 Janvier 2011

Voici le code du script:


  /*********************************************************/
 /*   vlaCalendar version 2.1 for mootools release 1.2    */
/*********************************************************/

var vlaCalendar = new Class({
	'slideDuration': 500,
	'fadeDuration': 500,
	'transition': Fx.Transitions.Quart.easeOut,
	'startMonday': false,
	'filePath': '/recherche/js/inc/',
	'defaultView': 'month',
	'style': '',

	initialize: function(_container, _options) {
		//Add the provided options to this object by extending
		if(_options) $extend(this, _options);

		this.loading = false;
		this.container = _container = $(_container);
		var _class = this;

		//Insert the base into the container and initialize elements
		var  pars = 'defaultView='+ this.defaultView;
		if(this.picker) {
			if($type(this.prefillDate) == 'object' && this.getInputDate(this.prefillDate)) pars += '&pickedDate='+ this.getInputDate(this.prefillDate);
			if(this.linkWithInput) pars += '&gotoPickedDate=1';
		}
		this.u('base', pars, function() { 
			_class.mainLoader = _container.getElement('div[class=loaderA]');
			_class.tempLoader = _container.getElement('div[class=loaderB]');
			_class.label 	  = _container.getElement('span[class=label]');
			_class.arrowLeft  = _container.getElement('div[class=arrowLeft]');
			_class.arrowRight = _container.getElement('div[class=arrowRight]');				
			_class.initializeCalendarFunctions();

			//Prefill/load picker date elements
			if(_class.picker) {
				if($type(_class.prefillDate) == 'object' && _class.getInputDate(_class.prefillDate)) _class.pick(_class.prefillDate);
				else if(_class.prefillDate == true) _class.pick(JSON.decode(_class.label.getProperty('date')));
			}
		}, _container);
	},

	initializeCalendarFunctions: function() {
		this.resetArrows();

		//Retrieve data (label, timestamp etc) which are stored as a Json string in the table attribute summary
		var vars = JSON.decode(this.mainLoader.getElement('table').getProperty('summary'));
		var _class = this; 

		//Change the label
		this.label.removeClass('noHover').set('html', vars.label)
			.onclick = vars.parent ? function() { _class.u(vars.parent, 'ts=' + vars.ts + '&parent=' + vars.current, function() { _class.fade() }) } : null;

		//Hide arrows if necessary and add arrow click events
		if(vars.hide_left_arrow) this.hideLeftArrow();
		else if(vars.hide_right_arrow) this.hideRightArrow();

		this.arrowLeft.onclick  = function() { _class.u(vars.current, 'ts=' + vars.pr_ts, function() { _class.slideLeft() }) }
		this.arrowRight.onclick = function() { _class.u(vars.current, 'ts=' + vars.nx_ts, function() { _class.slideRight() }) }		

		//Add cell click events
		var clickables = this.mainLoader.getElements('td');
		switch(vars.current) {
			case 'month':
				if(this.picker) {
					clickables.each(function(_clickable) {
						_clickable.onclick = function() { 
							_class.pick(JSON.decode(_clickable.getProperty('date')));
							_class.mainLoader.getElements('td').each(function(_clickable) { _clickable.removeClass('selected') });
							this.addClass('selected'); 
						}
					});
				}
				break;
			case 'year':
				clickables.each(function(_clickable) {
					_clickable.onclick = function() { _class.u('month', 'ts=' + _clickable.getProperty('ts'), function() { _class.fade() }) }
				});
				break;
			case 'decade':
				this.label.addClass('noHover');
				clickables.each(function(_clickable) {
					_clickable.onclick = function() { _class.u('year', 'ts=' + _clickable.getProperty('ts') + '&m_ts=' + _clickable.getProperty('m_ts'), function() { _class.fade() }) }
				});
				break;
		}
	},

	//Ajax updater function which handles all requests
	u: function(_url, _pars, _onComplete, _id) {
		if(!this.loading && !this.transitioning) {
			var _class = this;
			this.loading = true;
			var element = $(_id ? _id : this.tempLoader);
			_pars += '&picker=' + (this.picker ? 1 : 0) + '&startMonday=' + (this.startMonday ? 1 : 0) + '&style=' +  this.style;
			if(this.picker && this.getInputDate()) _pars += '&pickedDate='+ this.getInputDate();
			new Request({ method: 'post',
						  url: this.filePath + _url + '.php',
						  onComplete: function(data) { element.set('html', data); _onComplete(); _class.loading = false; }
						}).send(_pars);
		}
	},

	slideLeft: function() {
		var _class = this;
		this.transitioning = true;	
		this.tempLoader.setStyle('opacity', 1).set('tween', { duration: this.slideDuration, transition: this.transition }).tween('margin-left', [-164, 0]);
		this.mainLoader.setStyle('opacity', 1).set('tween', { duration: this.slideDuration, transition: this.transition, onComplete: function() { _class.transitioning = false } })
			.tween('margin-left', [0, 164]);
		this.switchLoaders();
	},

	slideRight: function() {
		var _class = this;
		this.transitioning = true;
		this.mainLoader.setStyle('opacity', 1).set('tween', { duration: this.slideDuration, transition: this.transition }).tween('margin-left', [0, -164]);
		this.tempLoader.setStyle('opacity', 1).set('tween', { duration: this.slideDuration, transition: this.transition, onComplete: function() { _class.transitioning = false } })
			.tween('margin-left', [164, 0]);
		this.switchLoaders();
	},

	fade: function(overRuleTrans) {
		var _class = this;
		this.transitioning = overRuleTrans ? false : true;
		this.tempLoader.setStyles({'opacity': 0, 'margin-left': 0});
		this.mainLoader.set('tween', { duration: this.fadeDuration, transition: this.transition}).fade('out');
		this.tempLoader.set('tween', { duration: this.fadeDuration, transition: this.transition, 
			onComplete: function() { 
					_class.tempLoader.setStyles({'opacity': 1, 'margin-left': -999});
					_class.transitioning = false;
				} 
			}).fade('in');
		this.switchLoaders();
	},

	switchLoaders: function() {
		this.mainLoader = this.mainLoader.className == 'loaderA' ? this.container.getElement('div[class=loaderB]') : this.container.getElement('div[class=loaderA]');
		this.tempLoader = this.tempLoader.className == 'loaderA' ? this.container.getElement('div[class=loaderB]') : this.container.getElement('div[class=loaderA]');
		this.initializeCalendarFunctions();
	},

	resetArrows: function() {
		this.arrowLeft.setStyle('visibility', 'visible');
		this.arrowRight.setStyle('visibility', 'visible');
	},

	hideLeftArrow: function() {
		this.arrowLeft.setStyle('visibility', 'hidden');
	},

	hideRightArrow: function() {
		this.arrowRight.setStyle('visibility', 'hidden');
	} 
});

var vlaDatePicker = new Class({
	Extends: vlaCalendar,

	'separateInput': false,
	'prefillDate': true,
	'linkWithInput': true,
	'leadingZero': true,
	'twoDigitYear': false,
	'separator': '/',
	'format': 'd/m/y',
	'openWith': null,
	'alignX': 'right',
	'alignY': 'inputTop',
	'offset': { 'x': 0, 'y': 0 },
	'style': '',
	'ieTransitionColor' : '#ffffff',
	'toggleDuration': 350,

	initialize: function(_element, _options) {
		//Add the provided options to this object by extending
		if(_options) $extend(this, _options);

		this.element = $(_element);
		if(!this.element) throw 'No (existing) element to create a datepicker for specified: new vlaDatePicker(ELEMENT, [options])';

		//Check if the user wants multiple input
		if(this.separateInput) {
			this.element.day   = this.element.getElement('input[name='+ this.separateInput.day +']');
			this.element.month = this.element.getElement('input[name='+ this.separateInput.month +']');
			this.element.year  = this.element.getElement('input[name='+ this.separateInput.year +']');
		}

		//Create the picker and calendar and inject in in the body
		this.picker = new Element('div', { 'class': 'vlaCalendarPicker' + (this.style != '' ? ' ' + this.style : '') }).injectTop($(document.body));
		this.pickerContent = new Element('div', { 'class': 'pickerBackground' }).injectTop(this.picker);
		this.parent(this.pickerContent);

		//Add events for showing and hiding the picker
		var _class = this;
		(this.openWith ? $(this.openWith) : this.element)
			.addEvent('focus',  function() { _class.show(); })
			.addEvent('click',  function() { _class.openWith ? _class.toggle() : _class.show() })
			.addEvent('change', function() { _class.hide(); });

		//If the datepicker is visible an outside click makes it hide
		document.addEvent('mousedown', function(e) { if(_class.outsideHide && _class.outsideClick(e, _class.picker)) _class.hide() });

		//linkWithInput
		if(this.linkWithInput) {
			if(this.separateInput) {
				this.element.day.addEvent('keyup',  function() { _class.linkedUpdate() });
				this.element.month.addEvent('keyup',  function() { _class.linkedUpdate() });
				this.element.year.addEvent('keyup',  function() { _class.linkedUpdate() });
			} else {
				this.element.addEvent('keyup',  function() { _class.linkedUpdate() });
			}
		}

		this.visible = false;
		this.outsideHide = false;
	},

	//Position the picker
	position: function() {
		var top, left;

		switch(this.alignX) {
			case 'left':
				left = this.element.getLeft();
				break;
			case 'center':
				var pickerMiddle = this.pickerContent.getStyle('width').toInt() / 2;
				if(pickerMiddle == 0) pickerMiddle = 83;
				left = this.element.getLeft() + (this.element.getSize().x / 2) - pickerMiddle -
						((parseInt(this.pickerContent.getStyle('padding-left')) + parseInt(this.pickerContent.getStyle('padding-right'))) / 2);
				break;
			case 'right': default:
				left = this.element.getLeft() + this.element.getSize().x;
				break;
		}

		switch(this.alignY) {
			case 'bottom':
				top = this.getPos(this.element).y + this.element.getSize().y;
				break;
			case 'top': 
				top = this.getPos(this.element).y - parseInt(this.pickerContent.getStyle('height')) - 
					(parseInt(this.pickerContent.getStyle('padding-top')) + parseInt(this.pickerContent.getStyle('padding-bottom')));
				break;
			case 'inputTop': default:
				top = this.getPos(this.element).y;
		}

		if(this.isNumber(this.offset.x)) left += this.offset.x;
		if(this.isNumber(this.offset.y)) top += this.offset.y;

		this.picker.setStyles({ 'top': top, 'left': left });
	},

	show: function() {
		this.position();
		if(!this.visible) {
			this.visible = true;
			var _class = this;
			this.picker.setStyles({ 'opacity': 0, 'display': 'inline' });
			if(Browser.Engine.trident5) this.picker.setStyle('background-color', this.ieTransitionColor); //Ugly transition fix for IE7
			this.picker.set('tween', { onComplete: function() { 
					if(Browser.Engine.trident5) _class.picker.setStyle('background-color', 'transparent');
					_class.outsideHide = true; 
				}, duration: this.toggleDuration }).fade('in');
		}
	},

	hide: function() {
		if(this.visible) {
			this.visible = false;
			var _class = this;
			if(Browser.Engine.trident5) this.picker.setStyle('background-color', this.ieTransitionColor); //Ugly transition fix for IE7
			this.picker.set('tween', { onComplete: function() { _class.picker.setStyle('display', 'none'); _class.outsideHide = false; }, duration: this.toggleDuration }).fade('out');
		}
	},

	toggle: function() {
		if(this.visible) this.hide();
		else this.show();
	},

	pick: function(_date) {
		if(this.leadingZero) {
			if(_date.day < 10)   _date.day = '0' + _date.day;
			if(_date.month < 10) _date.month = '0' + _date.month;
		}
		if(this.twoDigitYear) _date.year = _date.year.toString().substring(2, 4);

		if(this.separateInput) {
			if(this.element.day)   this.element.day.set('value', _date.day);
			if(this.element.month) this.element.month.set('value', _date.month);
			if(this.element.year)  this.element.year.set('value', _date.year);
			this.hide();
		} else {
			switch(this.format) {
				case "m/d/y": this.element.set('value', _date.month + this.separator + _date.day + this.separator + _date.year); break;
				case "y/m/d": this.element.set('value', _date.year + this.separator + _date.month + this.separator + _date.day); break;
				case "y/d/m": this.element.set('value', _date.year + this.separator +  _date.day + this.separator + _date.month); break;
				case "d/m/y": default: this.element.set('value', _date.day + this.separator + _date.month + this.separator + _date.year);
			}
			this.hide();
		}
	},

	getInputDate: function(_date) {
		var day, month, year;

		if(_date) {
			day = _date.day;
			month = _date.month;
			year = _date.year;
		} else if(this.separateInput) {
			day = this.element.day.get('value').toInt();
			month = this.element.month.get('value').toInt();
			year = this.element.year.get('value').toInt();
		} else {
			var date = this.element.get('value').split(this.separator);
			if(date.length != 3) return null;
			switch(this.format) {
				case "m/d/y": day = date[1]; month = date[0]; year = date[2]; break;
				case "y/m/d": day = date[2]; month = date[1]; year = date[0]; break;
				case "y/d/m": day = date[1]; month = date[2]; year = date[0]; break;
				case "d/m/y": default: day = date[0]; month = date[1]; year = date[2];
			}
		}

		if( !this.isNumber(day) || !this.isNumber(month) || !this.isNumber(year) ||	day == 0 || month == 0 || year == '0' ||
		    (this.twoDigitYear && year > 99) || (!this.twoDigitYear && year < 1979) || (!this.twoDigitYear && year > 2030) || month > 12 || day > 31 ) return null;

		if(this.twoDigitYear && this.isNumber(year) && year < 100) {
			year = year.toInt();
			if(year < 10) year = '200'+  year;
			else if(year < 70) year = '20'+  year;
			else if(year > 69) year = '19'+  year;
			else year = new Date().getFullYear();
		}

		return day +'/'+ month +'/'+ year;
	},

	//This function is being called on keyup event if linkWithInput is set to true and when a date is picked
	//If the full date is inserted the picker will change itself to that specific date (month view)
	linkedUpdate: function() {
		var _class = this;
		var date = this.getInputDate();
		if(date && this.pickedDate != date) {
			this.u('month', 'gotoPickedDate=1', function() { _class.fade(true) });
			this.pickedDate = date;
		}
	},

	outsideClick: function(_event, _element) {
		var mousePos = this.getMousePos(_event);
		var elementData = _element.getCoordinates();
		return (mousePos.x > elementData.left && mousePos.x < (elementData.left + elementData.width)) &&
			   (mousePos.y > elementData.top  && mousePos.y < (elementData.top + elementData.height)) ? false : true;
	},

	getMousePos: function(_event) {
		if(document.all) {
			return { 'x': window.event.clientX + window.getScrollLeft(),
					 'y': window.event.clientY + window.getScrollTop() };
		} else {
			return { 'x': _event.page['x'],
					 'y': _event.page['y'] };
		}
	},

	isNumber: function(_number) {
		if(_number == '') return false;
		return (_number >= 0) || (_number < 0) ? true : false;
	},

	//Retrieving positition funtions (like getCoordinates, getTop etc) don't seem to return correct values in some situations in mootools 1.2; 
	//Opera returns wrong values, IE returns too small values. This function returns the correct coordinates.
	getPos: function(_element) { 
		var x, y = 0;
		if(_element.offsetParent) {
			do {
				x += _element.offsetLeft;
				y += _element.offsetTop;
			} while(_element = _element.offsetParent);
		} else if(_element.x) {
			x += _element.x;
			y += _element.y;
		}
		return { 'x': x, 'y': y };
	}
});

ps: je préfère reste avec mootools pour ne pas multiplier les frameworks JS)

**Ernestine** · 26 Janvier 2011

Comme expliqué dans mon précédent message, le problème n'est pas le javascript, c'est ce formulaire complètement tordu. D'où as-tu sorti ce truc :

    <input id="day" name="day" type="text" style="width: 18px;" maxlength="2" />
    <input value="/" type="text" disabled="disabled" style="width: 5px;" />
    <input name="month" class="textbox" style="width: 16px;" maxlength="2" type="text" />
    <input value="/" type="text" disabled="disabled" style="width: 5px;" />
    <input name="year" type="text" style="width: 28px;" maxlength="4" />

Est-ce la documentation officielle du script qui te demande de faire une telle chose ? Ça m'étonnerait car ça ne ressemble à rien...

Si je regarde cette page d'exemples de vlaCalendar for mootools : http://fasthotel.eflux.fr/js/vlaCalendar/examples.html on n'a pas du tout la même chose. Sur cette page d'exemples, les champs date tiennent sur un seul input, ce qui est beaucoup plus efficace que le gribouillage ci-dessus.

ZuckBin · 26 Janvier 2011

Comme expliqué dans mon précédent message, le problème n'est pas le javascript, c'est ce formulaire complètement tordu. D'où as-tu sorti ce truc :
    <input id="day" name="day" type="text" style="width: 18px;" maxlength="2" />
    <input value="/" type="text" disabled="disabled" style="width: 5px;" />
    <input name="month" class="textbox" style="width: 16px;" maxlength="2" type="text" />
    <input value="/" type="text" disabled="disabled" style="width: 5px;" />
    <input name="year" type="text" style="width: 28px;" maxlength="4" />
Est-ce la documentation officielle du script qui te demande de faire une telle chose ? Ça m'étonnerait car ça ne ressemble à rien...

Si je regarde cette page d'exemples de vlaCalendar for mootools : http://fasthotel.eflux.fr/js/vlaCalendar/examples.html on n'a pas du tout la même chose. Sur cette page d'exemples, les champs date tiennent sur un seul input, ce qui est beaucoup plus efficace que le gribouillage ci-dessus.

Voici le code du fichier de documentation:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-language" content="en" />
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="copyright" content="R. Schoo" />

	<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
	<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" />
	<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-apple_widget.css" type="text/css" />

	<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
	<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>

	<!-- You could also include the uncompressed versions for developing purposes:
	<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
	<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>-->

	<title>Vista-Like Ajax Calendar version 2.1.1 - Examples</title>

	<style>
	body {
		cursor: default;
		text-align: left;
		font-family: calibri, arial, sans-serif;
		font-size: 13px;
		margin: 0;
		padding: 5px;
	}

	table th {
		vertical-align: top;
	}

	input {
		text-align: center;
		font-family: calibri, arial, sans-serif;
		font-size: 13px;
		background-color: white;
		border: 1px solid;
		border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
		padding: 2px;
	}
	input:focus, input:hover  {
		border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
	}

	.pickerImg {
		position: absolute;
		margin-left: -16px;
		margin-top: 5px;
		cursor: pointer;
	}
	.infoBox {
		background-color: #fefdec;
		border: 1px solid #edebcd;
		padding: 6px;
		margin-bottom: 20px;
	}
	</style>

	<script type="text/javascript">
		window.addEvent('domready', function() { 
			new vlaDatePicker('exampleI');
			new vlaDatePicker('exampleII', { separator: '-', leadingZero: false, twoDigitYear: true, offset: { y: 3 }, alignX: 'center', alignY: 'bottom' });
			new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
			new vlaDatePicker('exampleIV-A', { style: 'adobe_cs3', offset: { y: 1 }, format: 'm/d/y', ieTransitionColor: '' }); 
			new vlaDatePicker('exampleIV-B', { style: 'apple_widget', offset: { x: 3, y: 1 } });
			new vlaCalendar('exampleV', { startMonday: true });
			new vlaDatePicker('exampleVI', { defaultView: 'year' });
			new vlaDatePicker('exampleVII', { prefillDate: { day: 12, month: 12, year: 2012 } });			
		});	
	</script>
</head>
<body>
	<div class="infoBox">
		<b>This example page will only work on a webserver - AJAX requests are made to PHP files.</b><br />
		For documentation and more examples visit <a href="http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html">http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html</a>.
	</div>

	<table cellpadding="0">
		<tr>
			<th style="width: 100px">Example I</th>
			<td><input id="exampleI" name="date" type="text" style="width: 80px;" maxlength="10" /></td>
		</tr>
		<tr><td></td><td>Standard datepicker.<br /><br /></td></tr>

		<tr>
			<th>Example II</th>
			<td><input id="exampleII" name="date" type="text" style="width: 60px;" maxlength="10" /></td>
		</tr>
		<tr><td></td><td>Datepicker with a different seperator, two digit year and without a leading zero. Datepicker is positioned center-bottom.<br /><br /></td></tr>

		<tr>
			<th>Example III</th>
			<td>
				<span id="exampleIII">
					<input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
				</span>
			</td>
		</tr>
		<tr><td></td><td>Datepicker with seperate day, month and year input. The calendar icon toggles the datepicker.<br /><br /></td></tr>

		<tr>
			<th>Example IV</th>
			<td><input id="exampleIV-A" name="date" type="text" style="width: 80px;" maxlength="10" /></td>
		</tr>
		<tr><td></td><td>Datepicker with Adobe CS3 GUI style. Date format is month-day-year.<br /><br /></td></tr>

		<tr>
			<td></td>
			<td><input id="exampleIV-B" name="date" type="text" style="width: 80px;" maxlength="10" /></td>
		</tr>
		<tr><td></td><td>Datepicker with Apple OSX Tiger calendar widget style.<br /><br /></td></tr>

		<tr>
			<th>Example V</th>
			<td><div id="exampleV" style="height: 140px"></div></td>
		</tr>
		<tr><td></td><td>The normal calender. Calendar week starts on monday.<br /><br /></td></tr>

		<tr>
			<th>Example VI</th>
			<td><input id="exampleVI" name="date" type="text" style="width: 80px;" maxlength="10" /></td>
		</tr>
		<tr><td></td><td>Datepicker with the current year as a default view.<br /><br /></td></tr>

		<tr>
			<th>Example VII</th>
			<td><input id="exampleVII" name="date" type="text" style="width: 80px;" maxlength="10" /></td>
		</tr>
		<tr><td></td><td>Datepicker with a default date set to 12 December 2012.<br /><br /></td></tr>
	</table>
	<br /><br /><br /><br /><br /><br />
</body>
</html>

c'est donc l'exemple 3

**Ernestine** · 26 Janvier 2011

Tu as bien pensé à englober tout ça dans un formulaire (balises <form> et </form>) avec un input de type submit ? Si oui, quand tu soumets le formulaire, ça donne quoi ?

**Dadou** · 26 Janvier 2011

C'est pas beau, c'est moche, fait plutôt ça :

	<input id="day" name="day" type="text" style="width: 18px;" maxlength="2" /> / <input id="month" name="month" class="textbox" style="width: 16px;" maxlength="2" type="text" /> / <input id="year" name="year" type="text" style="width: 28px;" maxlength="4" />

ZuckBin · 26 Janvier 2011

Je suis trop bête, j'avais même pas pensé à faire mon form pour essayer, je me focalisait sur le JS.

Une fois le formulaire envoyer, je récupère bien ma valeur....

Merci à tous, surtout à Ernestine

Mais sinon, c'est possible de récupère la value via le DOM comme je souhaitais, ou non ?

Connexion

Recupere Value dans le DOM

Sujets conseillés

ZuckBin

Ernestine

Portekoi

ZuckBin

Ernestine

ZuckBin

Ernestine

Dadou

ZuckBin

Veuillez vous connecter pour commenter

Parcourir

Activité