diedVIPs

html knowhow

Altersberechner









Altersberechner
So sieht´s aus

Quellcode

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<style type="text/css">
#calcform, #calcform2 {padding:2px; width:500px; background:#eee8d5; border-radius:7px; }
#picker1btn img, #picker2btn img, #picker3btn img { opacity:0.7; }
.form-control {width:100px; padding:1px;height:28px}
button {width:150px; padding:1px;height:30px; }
#picker1txt, #picker2txt, #picker3txt { display:none; padding:2px;}
#wrapper TD { padding-left:unset; padding-right:unset; }
.qs-datepicker-container { top:40px !important; left:-225px !important; }
.btn span { font-weight:bold; font-size:0.9em; }
#age { height:200px; }
#date { height:62px; }
@media all and (max-width: 800px) {
#calcform, #calcform2 { padding:1px; } }

</style>
</head>

<body >
<form id="calcform" name="calcform" autocomplete="off">
<div id="datediv1" class="form-group">
<label>Geburtstag</label>
<div class="form-row">
<div class="col-4 order-1">
<select id="m1" class="form-control">
<option>Monat</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>

<div id="daysdiv1" class="col-3 order-2">
<select id="d1" class="form-control">
<option>Tag</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-3 order-3">
<input type="number" id="y1" placeholder="year" class="form-control">
</div>
<div id="picker1div" class="col order-4">
<input type="text" id="picker1txt">
calendar@2x.png"></a>
</div>
</div>
</div>
<div id="datediv2" class="form-group">
<label>Heute ist der:</label>
<div class="form-row">
<div class="col-4 order-1">
<select id="m2" class="form-control">
<option>Monat</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>

<div id="daysdiv2" class="col-3 order-2">
<select id="d2" class="form-control">
<option>Tag</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-3 order-3">
<input type="number" id="y2" placeholder="year" class="form-control">
</div>
<div id="picker2div" class="col order-4">
<input type="text" id="picker2txt">
<a href="javascript:void(0)" id="picker2btn">

</div>
</div>
</div>
<div class="form-group">
<button type="button" title="Calculate" class="btn btn-success" onclick="calcage()"><span>=</span> Calculate</button>
<button type="reset" title="Reset" class="btn btn-secondary"><span>&times;</span> Reset</button>
</div>
<div class="form-group">
<label>Du bist alt:</label>
<textarea rows="6" id="age" name="age" style="width:500px" class="form-control" readonly></textarea>
</div>
</form>

var m2elem=document.getElementById("m2");
var d2elem=document.getElementById("d2");
var y3elem=document.getElementById("y3");
var m3elem=document.getElementById("m3");
var d3elem=document.getElementById("d3");
var ageelem=document.getElementById("age");
var age2elem=document.getElementById("age2");
var dateelem=document.getElementById("date");
var picker1btnelem=document.getElementById("picker1btn");
var picker2btnelem=document.getElementById("picker2btn");
var picker3btnelem=document.getElementById("picker3btn");
var pick1,pick2,pick3;
window.onload = function() {
onnow();
calcform.onkeypress = function(e) { if( e.keyCode==13 ) calcage(); };
calcform2.onkeypress = function(e) { if( e.keyCode==13 ) calcdate(); };
picker1btnelem.onclick = function(e) {
e.stopPropagation();
var isHidden = document.querySelector("#picker1div .qs-datepicker-container").classList.contains('qs-hidden');
if( isHidden ) onpicker(1);
pick1[isHidden ? 'show' : 'hide'](); };
picker2btnelem.onclick = function(e) {
e.stopPropagation();
var isHidden = document.querySelector("#picker2div .qs-datepicker-container").classList.contains('qs-hidden');
if( isHidden ) onpicker(2);
pick2[isHidden ? 'show' : 'hide'](); };
picker3btnelem.onclick = function(e) {
e.stopPropagation();
var isHidden = document.querySelector("#picker3div .qs-datepicker-container").classList.contains('qs-hidden');
if( isHidden ) onpicker(3);
pick3[isHidden ? 'show' : 'hide'](); };
pick1 = datepicker('#picker1txt', {
onSelect: function(instance) {
var date = instance.dateSelected;
m1elem.selectedIndex = date.getMonth()+1;
d1elem.selectedIndex = date.getDate();
y1elem.value = date.getFullYear(); } });
pick2 = datepicker('#picker2txt', {
onSelect: function(instance) {
var date = instance.dateSelected;
m2elem.selectedIndex = date.getMonth()+1;
d2elem.selectedIndex = date.getDate();
y2elem.value = date.getFullYear(); } });
pick3 = datepicker('#picker3txt', {
onSelect: function(instance) {
var date = instance.dateSelected;
m3elem.selectedIndex = date.getMonth()+1;
d3elem.selectedIndex = date.getDate();
y3elem.value = date.getFullYear(); } }); };
function onnow() {
var now = dayjs();
var y=now.year();
var m=now.month()+1;
var d=now.date();
m2elem.selectedIndex=m;
d2elem.selectedIndex=d;
y2elem.value=y; }
function onpicker(n) {
if( n==1 ) {
var y=y1elem.value;
var m=m1elem.selectedIndex-1;
var d=d1elem.selectedIndex;
if( y=="" || m<=0 || d==0) return;
pick1.setDate(new Date(y,m,d), true); }
else if( n==2 ) {
var y=y2elem.value;
var m=m2elem.selectedIndex-1;
var d=d2elem.selectedIndex;
if( y=="" || m<=0 || d==0) return;
pick2.setDate(new Date(y,m,d), true); }
else if( n==3 ) {
var y=y3elem.value;
var m=m3elem.selectedIndex-1;
var d=d3elem.selectedIndex;
if( y=="" || m<=0 || d==0) return;
pick3.setDate(new Date(y,m,d), true); } }
function calcage() {
var txt;
var day1=d1elem.selectedIndex+1;
var month1=m1elem.selectedIndex+1;
var year1=y1elem.value;
if( year1=='' ) year1="1990";
var day2=d2elem.selectedIndex+1;
var month2=m2elem.selectedIndex+1;
var year2=y2elem.value;
var d1 = dayjs([year1, month1-1, day1]);
var d2 = dayjs([year2, month2-1, day2]);
var years = d2.diff(d1, 'years');
var months = d2.diff(d1, 'months')-years*12;
var d3 = d1.add(years,'years').add(months,'months');
var days = d2.diff(d3, 'days');
txt = years+(years==1?" year, ":" years, ")+months+(months==1?" month, ":" months, ")+days+(days==1?" day":" days");
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'years', true)).toFixed(2)+" years";
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'months', true)).toFixed(2)+" months";
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'weeks', true)).toFixed(2)+" weeks";
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'days', true)).toFixed(0)+" days";
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'hours', true)).toFixed(0)+" hours";
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'minutes', true)).toFixed(0)+" minutes";
d1 = dayjs([year1, month1-1, day1]);
d2 = dayjs([year2, month2-1, day2]);
txt+= "\n= "+(d2.diff(d1, 'seconds', true)).toFixed(0)+" seconds";
ageelem.value=txt; }
function calcdate() {
var txt;
var day3=d3elem.selectedIndex+1;
var month3=m3elem.selectedIndex+1;
var year3=y3elem.value;
if( year3=='' ) year3="1990";
var age2=age2elem.value;
var d3 = dayjs([year3, month3-1, day3]);
d3=d3.add(age2, 'years');
txt=d3.format("MMMM D YYYY")+"\n";
dateelem.value=txt; }
</script>

</body>

</html>









Kontakt/span>    Datenschutz   Impressum