paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Date Picker gestione dei secondi

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.