Meine Codepens ,My Codepens ,Gebe ein Datum ein und es wird der Wochentag angezeigt

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>
wochentag_ermitteln.php

Quell Code

Add Comment

Comments
