Date Picker gestione dei secondi

March 23rd 2011 by Paolo Bindi in: JS / Ajax / Jquery / Json | Tags: JS / Ajax / Jquery / Json

Ho aggiornato l'eccellente libreria javascript DatePicker (di Jeremy Jongsma) che permette la gestione di un calendario completo di molte opzioni, tra le quali pero' non e' prevista la gestione dei secondi.
L'idea e' stata quella di replicare l'interfaccia che la libreria utilizza per la gestione dei minuti e, visto che questi, hanno una gestione del tutto simile (il range e' ad esempio lo stesso) a quella dei secondi, la modifica e' stata piuttosto semplice.
Ho aggiunto queste righe,

nel metodo
createCalendar: function(date)

/* modify */
var seconds = date.getSeconds();
	if (this.selectedSecond)
		Element.removeClassName(this.selectedSecond, 'current');
		Element.removeClassName(this.otherSeconds, 'current');
	if (seconds % this.secInterval == 0) {
		this.otherSeconds.value = '';
		this.selectedSecond = this.secondCells[seconds / this.secInterval];
		Element.addClassName(this.selectedSecond, 'current');
	} else {
		this.otherSeconds.value = seconds;
		Element.addClassName(this.otherSeconds, 'current');
	}

E quindi ho modificato la parte grafica per i secondi, replicando la stessa struttura dei minuti, sostituendo chiaramente le relative variabili.

row = timeTable.insertRow(rows++);
cell = row.insertCell(0);
cell.colSpan = 6;
			
var hr = document.createElement('hr');
Element.setStyle(hr, {'color': '#CCCCCC', 'backgroundColor': '#CCCCCC', 'height': '1px', 'border': '0', 'marginTop': '2px', 'marginBottom': '2px', 'padding': '0'});
cell.appendChild(hr);
cell = row.insertCell(1);
			
for (var j = 0; j < (10/this.secInterval); ++j) {
	row = timeTable.insertRow(rows++);
	for (var i = 0; i < 6; ++i){
		cell = row.insertCell(i);
		cell.className = 'second';
		cell.width = '14%';
		var secval = ((j*6+i)*this.secInterval);
		if (secval < 10) secval = '0'+secval;
			cell.innerHTML = ':'+secval;
			cell.onclick = this.secondClickedListener(secval);
			this.secondCells[(j*6)+i] = cell;
		}
	}

	row = timeTable.insertRow(rows++);
	cell = row.insertCell(0);
	cell.style.textAlign = 'right';
	cell.colSpan = 5;
	cell.innerHTML = '<i>'+this.tr('Exact seconds')+':';
	cell = row.insertCell(1);
	cell.className = 'othersecond';
	var otherInputSec = document.createElement('input');
	otherInputSec.type = 'text';
	otherInputSec.maxLength = 2;
	otherInputSec.style.width = '2em';
	var inputTimeout = null;
	otherInputSec.onkeyup = function(e) {
		if (!isNaN(otherInputSec.value)) {
			inputTimeout = setTimeout(function() {
				this.currentDate.setSeconds(otherInputSec.value);
				this.dateChanged(this.currentDate);
			}.bind(this), 500);
		}
	}.bindAsEventListener(this);
	otherInputSec.onkeydown = function(e) {
		if (e.keyCode == Event.KEY_RETURN)
			if (this.options.onSelect) this.options.onSelect(this.currentDate);
				if (inputTimeout)
					clearTimeout(inputTimeout)
	}.bindAsEventListener(this);
	// Remove event key capture to allow use of arrow keys
	otherInput.onclick = otherInputSec.select;
	otherInput.onfocus = this.releaseKeys.bindAsEventListener(this);
	otherInput.onblur = this.captureKeys.bindAsEventListener(this);
	this.otherSeconds = otherInputSec;
	cell.appendChild(otherInputSec);

Questa e' stata l'unica modifica.
Questo il codice javascript della datepicker.js da scaricare, completo delle modifiche. Per il resto dei file e per una prova, vi rimando al link indicato all'inizio dell'articolo.

Nel caso che riscontrate qualche errore o se volete contattarmi per qualche consiglio o suggerimento, utilizzate la form della sezione contatti