wochentag_ermitteln.php
Quell Code
<html lang="de">
<head>
<style>
#weekday-widget {
position:relative;
display:inline-block;
padding:10px 20px;
float: right;
margin: 0 0 20px 40px;
border:1px solid #F0F0F0;
background:#E2FFE6;
width:150px;
}
#weekday-date {
border:1px solid #DDD;
padding:5px;
width:90px;
}
.thinking {
display:block;
position:absolute;
top:40px;
left:130px;
height:10px;
width:10px;
margin:5px 0 0 5px;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
#weekday-widget {
float:none;
clear:both;
width:200px;
margin:0 0 70px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="weekday-widget">
<p style="margin-bottom:10px;">Wochentag ermitteln:</p>
<input type="text" id="weekday-date" value="28.11.2019" style="background: rgb(255, 255, 255);">
<div class="thinking" style="display: none;"></div>
<p style="margin-top:5px;">ist ein <span id="weekday"></span></p>
</div>
<script>
$(document).ready(function()
{
var delay = ( function() {
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
var d = new Date();
var weekday = new Array(7);
weekday[0]= "Sonntag";
weekday[1] = "Montag";
weekday[2] = "Dienstag";
weekday[3] = "Mittwoch";
weekday[4] = "Donnerstag";
weekday[5] = "Freitag";
weekday[6] = "Samstag";
var wdayin_former;
var date;
$('#weekday-date').keyup( function(e) {
console.log(e)
go(e);
})
function go(e){
var wdayin = $('#weekday-date').val();
date = parseDate(wdayin);
if(e.keyCode==38) {
date.setDate(date.getDate()+1);
setDates();
return;
}
else if(e.keyCode==40) {
date.setDate(date.getDate()-1);
setDates();
return;
}
if(wdayin==wdayin_former) {
return;
}
wdayin_former = wdayin;
var parts = wdayin.split('.');
if( parts[2]===undefined || parts[1] === undefined || parts[0] === undefined ||
isNaN(parts[2]) || isNaN(parts[1]) || isNaN(parts[0]) ||
parts[2]=='' || parts[1] == '' || parts[0] == '' ||
!(String(parts[2]).length>0 && String(parts[2]).length<5) || !(parts[0]>0 && parts[0]<32) || !(parts[1]-1>=0 && parts[1]-1<12) || date == undefined || date == null) {
$('#weekday-date').css( { 'background': '#FCC' } );
return;
}
$('#weekday-date').css( { 'background': '#FFF' } );
$('.thinking').show();
delay(function(){
setDates();
$('.thinking').hide();
}, 600);
};
go(e=['keyCode',38]);
function setDates() {
var dday = date.getUTCDate();
var dmonth = date.getUTCMonth()+1;
var dyear = date.getUTCFullYear();
if(String(dday).length==1) {
dday = '0'+dday;
}
if(String(dmonth).length==1) {
dmonth = '0'+dmonth;
}
$('#weekday-date').val( dday+'.'+dmonth+'.'+dyear );
$('#weekday').text(weekday[date.getUTCDay()]);
}
function parseDate(input) {
if(input.indexOf('-')>-1) {
var parts = input.split('-');
return new Date(parts[0], parts[1]-1, parts[2]);
}
else {
var parts = input.split('.');
return new Date(parts[2], parts[1]-1, parts[0], 12); // Note:
}
}
});
</script>
</body></html>
Comments