datePicker - mootools

datePicker, plugin (clase) para mootools 1.2. Múltiples formatos de retorno de fecha, rangos de fechas, opciones para personalización de funcionamiento y estilo.

_class.datePicker.packed.js (6.24kb)

Descargar:

- datePicker (v0.8) / 2008-10-31
- changelog

Relacionado:

- mootools plugins

Se ha implementado el evento datePicker para la clase Element, quiere decir que al llamar al evento datePicker de cualquier elemento, se le asignará una instancia de "datePicker" que se mostrará con el evento "focus".

$('fecha01').datePicker();

Al llamar al evento datePicker de la clase Element, se le puede pasar las opciones como primer parámetro y el evento como segundo parámetro.

Para este ejemplo, algunas opciones simples:

klass: clase CSS para la instancia (para darle un estilo diferente)

days: días de la semana

draggable: arrastrable, requiere la clase Drag.Move->mootools-1.2.1-more

position: posición con respecto del elemento

offset: distancias a sumar a la posición

firstday: primer día de la semana (0=Domingo,1=Lunes,...)

$('fecha02').datePicker({
	klass: 'black_datePicker',
	days: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
	draggable: true,
	position: {x:'right',y:'top'},
	offset: {x:10,y:-100},
	firstday: 3
},'click');

Más opciones:

format: formato de retorno

from: rango inferior de fechas seleccionables

to: rango superior de fechas seleccionables

initial: fecha inicial

setInitial: estable si initial(la fecha inicial) actualiza al elemento asignado al crear la instancia

updateElement: estable si al seleccionar una fecha se actualiza el elemento asignado

Los 3 eventos disponibles:

onShow(): al mostrar

onHide(): al esconder

onUpdate(): al seleccionar una fecha o al llamar al evento update

Algunos métodos:

format(): retorna una fecha formateada, se le pueden pasar dos parámetros: el primero la fecha que es un array [yyyy,m(0-11),d] año,mes,dia o un objeto {y:año,m:mes(0-1),d:dia}; y el segundo parámetro es el formato. Si no se le pasa alguno de los parámetros tomará los de la instancia.

setFullDate(): asignar fecha a la instancia, requiere 3 parámetros: año,mes(0-11),día

update(): dispara el evento update y si la opcion updateElement es true actualiza el elemento asignado con la fecha formateada.

var fecha03 = $('fecha03').getPrevious();
var dp3 = $('fecha03').datePicker({
	format: '%DD %d, %MM %Y | %D %d %M %y | %Y-%m-%d',
	from: [2008,10,11],
	to: [2009,0,24],
	initial: [2008,10,18],
	setInitial: true,
	updateElement: false,
	onShow: function(container){
		container.fade('hide').fade('in');
	},
	onHide: function(container){
		container.fade('out');
	},
	onUpdate: function(){
		fecha03.set('html',this.format());
	}
},'click');

var inputs03 = $('sample3').getElements('input,button').associate(['fecha','formato','set']);
inputs03.set.addEvent('click',function(){
	var date = inputs03.fecha.value.split('/');
	dp3.setFullDate(date[2].toInt(),date[1].toInt()-1,date[0].toInt());
	dp3.options.format = inputs03.formato.value;
	dp3.update();
});

Implementando un ejemplo más práctico:

Se requiere seleccionar dos fechas, fechaSalida y fechaRetorno para un boleto de viaje.

La fechaSalida debe estar disponible apartir de los próximos 7 días.

La fechaRetorno debe estar disponible durante 30 días a partir de 14 días después de la fechaSalida.

var hoy = new Date();
var salidaFrom = new Date(hoy.getFullYear(),hoy.getMonth(),hoy.getDate()+7);
salidaFrom = [salidaFrom.getFullYear(),salidaFrom.getMonth(),salidaFrom.getDate()];

var dpFechaRetorno = $('fecha05_2').datePicker();
var dpFechaSalida = $('fecha05_1').datePicker({
	from: salidaFrom,
	initial: salidaFrom,
	setInitial: true,
	onUpdate: function(date){
		var retornoFrom = new Date(date.y,date.m,date.d+14);
		var retornoTo = new Date(date.y,date.m,date.d+14+30);
		dpFechaRetorno.options.from = [retornoFrom.getFullYear(),retornoFrom.getMonth(),retornoFrom.getDate()];
		dpFechaRetorno.options.to = [retornoTo.getFullYear(),retornoTo.getMonth(),retornoTo.getDate()];
		dpFechaRetorno.setFullDate(date.y,date.m,date.d+14).update();
	}
});