JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<input id="puhkus" value="Sisestage vaheaja nimetus"/>
<div id="log"></div>

CSS

input {width:200px;padding:5px;}
div {padding:10px;color:green;}

JavaScript

var vaheaeg = {
    'sügis': {
        name: 'Sügisvaheaeg',
        start: '15.10.2013',
        end: '22.10.2013'    
    },
    'talv': {
        name: 'Talvevaheaeg',        
        start: '31.12.2013',
        end: '10.01.2013'    
    },
    'kevad': {
        name: 'Kevadvaheaeg',        
        start: '01.03.2013',
        end: '08.03.2013'    
    },
    'suvi': {
        name: 'Suvivaheaeg',        
        start: '01.07.2013',
        end: '01.09.2013'
    }
}
function kontrolliVaheaeg(name) {
    var result = vaheaeg[name] || false;
    if (result) {
       $('#log').text('"'+ result.name +' on alates '+ result.start +' kuni '+ result.end +'"');
    } else {
        $('#log').text(name);
    }
}

$(document).ready(function(){
    $('#puhkus').focus(function(){
        var i = $(this),
            v = i.val();
        if (v == 'Sisestage vaheaja nimetus') i.val('');
    }).keyup(function(e){
        var i = $(this),
            v = i.val();
        kontrolliVaheaeg($.trim(v));
    })
})