csütörtök, szeptember 21, 2017

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>