date

sumamos fechas

by cristian_cena

HTML

<!--
closures: http://www.quizzpot.com/2009/03/que-son-los-closures/#comment-40099
-->

<div id="inp">
    <input type="button" title="hoy / desde" id="hoy"/>
    <input type="button" value="-1" id="atras"/> 
    <input type="range" value="0" max="6" min="0" id="range">
    <input type="button" value="+1" id="adelante"/>
    <input type="button" title="hasta" id="fin"/>             <em>|</em>   
    <input type="button" value="0" name="dia_nro" />
    <input type="button" value="1" name="dia_nro" />
    <input type="button" value="2" name="dia_nro" />
    <input type="button" value="3" name="dia_nro" />
    <input type="button" value="4" name="dia_nro" />
    <input type="button" value="5" name="dia_nro" />
    <input type="button" value="6" name="dia_nro" />
</div>

<div id="preout" class="preout"></div>
<ul id="out"></ul>
<input type="button" value="limpiar" id="limpiar"/>

CSS

body                { padding:1em;}
input[type="button"]{ padding:0.65em;}
hr                  { border:none; border-top:1px dotted gray;}
em                  { color:#cacaca;}
b                   { font-weight:bold;}
.preout{
    border:1px dotted SteelBlue;
    margin:0.7em 0;
    border-radius: 0.2em;
    padding:1em 0.7em;
    background:LightCyan;
    color:SteelBlue;
}
#out{
    border:1px dotted gray;
    background:whitesmoke;
    margin:0.7em 0;
    height: 203px;
    overflow:auto;
    border-radius: 0.2em;
}
#out li{
    padding:0.3em 0.7em; 
    border-bottom:1px dotted gray;
    background: #eaeaea;
    color:gray;
}
.consola{
    margin:0 0 0.7em 0;
}

JavaScript

//GENERAL: //goo.gl/F1s5f //goo.gl/gVV9R /////////////////////////////

function noselect(arg){ arg.onselectstart = new Function ("return false"); }
function id(arg)      { return document.getElementById(arg);                    }
function name(arg)    { return document.getElementsByName(arg);                 }
function w(id, arg)   { var out = document.getElementById(id); out.innerHTML = "<li>" +arg + "</li>" + out.innerHTML; };

//BOTONES //////////////////////////////////////////////////////////

function cantidad_botones(){
    var dia_nro = document.getElementsByName("dia_nro");
    var lng = dia_nro.length; var ln  = lng - 1;
    return ln;
}
function valueBotones(elem, fecha){  
    elem.value = fecha;    
}
function titleBotones(elem, fecha){  
    elem.title = fecha;    
}

function botones(n, fecha){ 
    var nro = parseInt(n);
    var ln = cantidad_botones();
    for(var i = 0; i<ln; i++){ 
        (function(j){  
            var boton = name("dia_nro");                       
            if(nro == j) { boton[j].disabled = true; id("range").value = j; }
            if(nro !== j){ boton[j].disabled = false;                       }
            if(boton[j].value == n){
                boton[j].title = fecha;
            }
            if(boton[j].value == ln){
             boton[j].title = fecha;
            }
        })(i); /*closure*/ 
    } //end for
    if(nro == 0){
        id("hoy").disabled        = true;   id("atras").disabled      = true;
        id("range").value = 0;          
        valueBotones(id("hoy"), fecha); 
    }
    if(nro > 0){
        id("hoy").disabled        = false;  id("atras").disabled      = false;
        id("adelante").disabled   = false;  id("fin").disabled        = false;     
    }
    if(nro == ln){
       id("range").value          = ln;     name("dia_nro")[ln].disabled = true;              
       id("adelante").disabled    = true;   id("fin").disabled         = true;        
       valueBotones(id("fin"), fecha);    
...