2013. november 27., szerda

Egy kis javascript okosság :D.

Dátumot kellett bekérjek.
Félelmetes hogy ez mennyire "bonyolult" dolog a html világban....
Beleástam magam a témába, nem volt nagy kedvem szuttyogni a juery-vel, meg nem is tetszett annyira.
A html5 jó volna, de nem támogatja senki se.

De találtam egy nagyon jópofa megoldást a neten, ki is pofoztam magamnak, leírom ide hogy el ne feledjem, meg hátha jó lesz még másnak is ;-).
Nagyon tetszik az ötlet, bár ahhoz hogy használható is legyen, azért kellett rajta molyolni.
A validálást egy gombra tettem rá, nincs "befejezve", de látszik hogy szépen készít belőle egy dátum objektumot és vissza is írja. Ha az elvetemült user február 52.-ét ír be, abból bizony március valahanyadika lesz szökőévtől függően. Ati lusta, tehát a hónap dd formátumú, de a vezető nullát odabiggyesztjük ahova kell ;-).
Hmmmm.... Hogy kell ebben a blogmotorban forrást beilleszteni????
No mindegy...

Innen szedtem az eredetit :D.
Update: találtam egy jó formázó scriptet, gugli rulez :D.

        <!DOCTYPE html>
        <html>
        <body>
        <input
            type="text"
            name="date"
            placeholder="éééé.hh.nn"
            id=datumunk
            onkeyup="
                var v = this.value;
                if (v.match(/^\d{5}/) !== null) {
                    this.value = v.substr(0,4) + '.'+v.substr(4,5);
                    v = this.value;
                };
                if (v.match(/^\d{4}\.\d\./) !== null) {
                    this.value = v.substr(0,5) + '0'+v.substr(5,5);
                    v = this.value;
                }
                if (v.match(/^\d{4}\.\d{3}/) !== null) {
                    this.value = v.substr(0,7) + '.'+v.substr(7,2);
                };
                if (v.match(/[^\d\.]/)!== null) {
                   this.value=this.defaultValue;
                }"

            maxlength="10"
        >
        <p type="text" id=idebele>dddd<p>
        <input type="button" onclick="
               var ideobj=document.getElementById('datumunk');
               var ide=ideobj.value;
               var datum_id_1 = new Date();
               datum_id_1.setFullYear(ide.substr(0,4),ide.substr(5,2)-1,ide.substr(8,2));
               document.getElementById('idebele').innerHTML=datum_id_1.toLocaleDateString();
           ideobj.value=datum_id_1.getFullYear()+'.'+('0'+(datum_id_1.getMonth()+1)).substr(-2,2)+'.'+datum_id_1.getDate();
        //document.getElementById('idebele').innerHTML=ide.substr(0,4)+':'+ide.substr(5,2)+':'+ide.substr(8,2);  "
        </body>

    </html>




A végül kirakott kód eredménye alant. (javascriptet nem árt engedélyezni......) 
A blogmotor ügyesen kinyeste a javascriptet innen....... Sebaj, az eredeti oldalon ki lehet próbálni, meg ott a végleges forrás is. Érdemes kipróbálni hogy mi történik ha nem valid dátumot írunk be ;-).
A kódot is kivettem, mert itt szétesik. (Forráskód prefix meg nincs erre, vagy én nem találom, tulajdonképpen a kettő mindegy is...) Majd megnézem hogy hogyan lehet egyszerűen ide kódot beilleszteni, vagy blogmotort fogok váltani. Nincs kedvem szuttyogni ezzel, ha magam akarok magamnak környezetet teremteni, akkor a többi sallang se kell, egy tinymce-t azért be tud az ember illeszteni magának ha nagyon akar....
Morgás visszavonva.  
<!DOCTYPE html>
<html lang="hu">

<body>
<script>
function f_szamol(m_mit)
{
  var m_sz='012345678907894567897653456789';
  var ertekvissz=0;
  var m_vissza='';
  var m_vissza2='';

  var x='we';
  var c_mit=m_mit.toString();
  for (var j=0;j<21;j+=10)
   { for (var i=0;i<c_mit.length;i++) { m_vissza+=m_sz.substr(Number(c_mit.substr(i,1))+j,1);};
       ertekvissz+=Number(m_vissza);
       m_vissza2+=m_vissza;
       m_vissza='';
    };

return ertekvissz;
}
</script>
<p>Születési dátum :
<input
    type="text"
    name="date"
    placeholder="éééé.hh.nn"
    id=datumunk

    onkeyup="
        var v = this.value;
        if (v.match(/^\d{5}/) !== null) {
            this.value = v.substr(0,4) + '.'+v.substr(4,5);
            v = this.value;
        };
        if (v.match(/^\d{4}\.\d\./) !== null) {
            this.value = v.substr(0,5) + '0'+v.substr(5,5);
            v = this.value;
        }
        if (v.match(/^\d{4}\.\d{3}/) !== null) {
            this.value = v.substr(0,7) + '.'+v.substr(7,2);
        };
        if (v.match(/[^\d\.]/)!== null) {
           this.value=this.defaultValue;
        }"

    maxlength="10"
>

</p>

<input type="button" value="Számol" onclick="
       var ideobj=document.getElementById('datumunk');
       var ide=ideobj.value;
       var datumocska = new Date();
       var osszegek= [[0,0,'id_szellemi'],[0,10,'id_lelki'],[0,20,'id_fizikai'],[0,0,'id_arany']];
       var szamolos='012345678907894567897653456789';
       datumocska.setFullYear(ide.substr(0,4),ide.substr(5,2)-1,ide.substr(8,2));
       ideobj.value=datumocska.getFullYear()+'.'+('0'+(datumocska.getMonth()+1)).substr(-2,2)+'.'+datumocska.getDate();
      var amitszamol=datumocska.getFullYear().toString()+(datumocska.getMonth()+1).toString()+datumocska.getDate().toString();

  for (var i=0;i<amitszamol.length;i++)
     {
          for (var j=0;j<3;j++)
            { osszegek[j][0]=osszegek[j][0]+Number(szamolos.substr(Number(amitszamol.substr(i,1))+osszegek[j][1],1));
            }
     };
  for (var j=0;j<3;j++)
     {
        document.getElementById(osszegek[j][2]).innerHTML=osszegek[j][0];
        var oszzstrtmp=osszegek[j][0].toString();
        for (var i=0;i<oszzstrtmp.length;i++)
            { osszegek[3][0]+=Number(oszzstrtmp.substr(i,1));
            }
      };
document.getElementById('id_arany').innerHTML=f_szamol('12');
aranyk=f_szamol(datumocska.getFullYear().toString().substr(0,2))+' '+f_szamol(datumocska.getFullYear().toString().substr(2,2))+' '+f_szamol(datumocska.getMonth()+1)+' '+f_szamol(datumocska.getDate());
var osszeg=0;
for (var i=0;i<aranyk.length;i++)
    {
      osszeg+=Number(aranyk.substr(i,1));
    };
document.getElementById('id_arany').innerHTML=osszeg.toString();

  "
>


<h4><i><p align="center" > Rezgésszámok</p></i>
<table border="2">
<tr>
<th><font color="#8B008B"> Szellemi:</th>
<td id=id_szellemi>----</td>
</tr>
<tr>
<th><font color="#FF1493"> Lelki:</th>
<td id=id_lelki> </td>
</tr>
<tr>
<th><font color="#8B0000">Fizikai:</th>
<td id=id_fizikai> </td>
</tr>
<tr>
<th><font color="#DAA520">Arany közép:</th>
<td id=id_arany> </td>
</tr>
</table>
</body>
</html>

2 megjegyzés:

  1. Ez az a téma, amihez nem tudok érdemben (se) hozzászólni :)
    Ati, ezt láttad már?
    http://www.youtube.com/watch?v=W464S4Y0LDQ
    (felirat és 720p bekapcsolása javasolt :) )

    VálaszTörlés
  2. Nem kell hozzászólni, de ha kell dátumbekérő oldalra jquery nélkül, sikíts. Valamit kulturáltam már rajta, nagyon jól működik.... (Már ott akinek csináltam.)
    Megnéztem a videót :D. Majdnem megosztottam FB-n, de a szöveg nem annyira píszí :D. Nincs valami tüchtigebb számotok, ami miatt nem sikítana az érzékenyebb közönség? (Alcímként odatehetnétek hogy Chuck Norris, mert az enyhít...)
    Jó egyébként :).

    VálaszTörlés