JavaScript Input Date Verification Functions

This is a simple tool that verifies if a date exists on input of a date. Here are 3 function we can use.

1. A function that checks if an array of dates has the selected date.
2. A function that checks if an object which has property date maching selected date.
3. A function that checks if an array of arrays of data in which has date mached by selected date.

This blog post is inspired by thet fact that there is no easy way to disable holidays and weekends of an input with the type date. This is annoying when you are building a webapp that takes users' input date and displays the result. When the users select a date that has no maching data. We have to display an error message and ask the users to reselect a date. How nice would it be if there existed a built in weekend/holiday verificcation for HTML date inputs!!

A function that checks if an array of dates has the selected date

Here, my array of dates do not include weekends of 4/16 or 4/17. Try to selece these dates using the below input.

<input type = "date" oninput = "checkdateinarray(this,datearray)" min = "2022-04-14" max = "2022-04-21">
<div style = "background-color:pink" id = "show1"></div>
<script>
	var datearray = ["2022-04-14","2022-04-15","2022-04-18","2022-04-19","2022-04-20","2022-04-21"];

	function checkdateinarray(t,d){
		var date = t.value;
		var i = d.findIndex(x=>{
			return date == x;
		});
		if(i == -1){
			show1.innerHTML = date + " is a holiday.";
			return;
		}else{
			show1.innerHTML = "You have selected " + date;
			return;
		};
	};
</script>

A function that checks if an array of dates has the selected date

Here, my array of objects' dates do not include weekends of 4/16 or 4/17. Try to selece these dates using the below input.

<input type = "date" oninput = "checkdateinobject(this,objectswithdate)" min = "2022-04-14" max = "2022-04-21">
<div style = "background-color:pink" id = "show2"></div>
<script>
	var objectswithdate = [
			{date:"2022-04-14",
			 price:100},
			{date:"2022-04-15",
			 price:110},
			{date:"2022-04-18",
			 price:120},
			{date:"2022-04-19",
			 price:120},
			{date:"2022-04-20",
			 price:110},
			{date:"2022-04-21",
			 price:100},
			];

	function checkdateinobject(t,d){
		var date = t.value;
		var i = d.findIndex(x=>{
			return date == x.date;
		});
		if(i == -1){
			show2.innerHTML = date + " is a holiday."
		}else{
			show2.innerHTML = "You have selected " + date;
			return;
		};
	};
</script>

A function that checks if an array of dates has the selected date

Here, my array of arrays which has dates, and weekends of 4/16 or 4/17 are not in any of the arrays. Try to selece these dates using the below input. Auume date id the first element of each array with index of 0.

<input type = "date" oninput = "checkdateinarrayofarrays(this,arrayofarraywithdate)" min = "2022-04-14" max = "2022-04-21">
<div style = "background-color:pink" id = "show3"></div>
<script>
	var arrayofarraywithdate = [
			["2022-04-14",100],["2022-04-15",110],["2022-04-18",120],["2022-04-19",120],["2022-04-20",110],["2022-04-21",100]
		      ]

	function checkdateinarrayofarrays(t,d){
		var date = t.value;
		var i = d.findIndex(x=>{
			return date == x[0];
		});
		if(i == -1){
			show3.innerHTML = date + " is a holiday."
		}else{
			show3.innerHTML = "You have selected " + date;
			return;
		};
	};
</script>