Using the real html date input is not that too bad, but you can manipulate html date input without hassle to make web works easier & quicker.
Manipulating html date input makes the form processor to easily validate date provided more better and simple.
This method is very easy and faster to apply in any of your applications.
How we manipulate html date input
Well it is far better idea than a date picker and more nicer than a select option input field.
Have you ever wondered that a dropdown can be used to achieve more advanced obligation instead of a form select input normally used.
Just know as world evolve web security widen as well.
So there should be need for manipulating certain elements to tighten up a kind of user or system defined security need in that application you are developing.
programming languages used in this project are php8.1, html5 and css3 (bootstrap5.2), jquery3.06(javascript), a little of ajax.
Why we manipulated the html date input
Since html5 provided date input without actual validation methods we applied our techniques offered in this post.
This is the one way we used to validate the date inputs without writing too many codes like ones in date pickers.
Easily add limitation to date available for input such as number of years or months to display in the dropdown.
Sometimes you may consider or forgot to consider the date format to use while developing an application that’s why you should study this post carefully to learn new techniques applied.
Getting started with this guide: manipulate html date input
Before getting started let’s create a file named index.php in our root folder in xampp.
Then we create and make a dynamic bootstrap dropdown as shown in the image below
Now let’s start
Copy and paste Bootstrap’s production-ready CSS and JavaScript via CDN.
First Head-over to bootstrap documentation https://getbootstrap.com/docs/5.2/getting-started/introduction/
copy the Include Bootstrap’s CSS and JS. as shown below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
Start editing the content to add the date of birth input field.
1. simply add empty span hidden with unique attribute values for it’s id(s)
2. Use bootstrap form input group to do some magic
lol… it not magic but just watch
Goto bootstrap copy the input group controls and edit as shown below
Remember this
Do not forget to also Add this style just before the closing html head tag
The ONLY CSS style used in this html date input manipulation activity
<style>
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
</style>
The css style helps contain the year dropdown and month dropdown within a given maximum height as defined in the style code above.
Continuing we have this code below that’s from where we start
<div id="output"></div>
<div id="input">
<div class="d-flex">
<div class="d-inline-block">
<small class="small fw-bold showlabel d-none" id="dy">Day</small>
<div class="input-group shadow-lg">
<button type="button" class="btn btn-outline-secondary dayvalue">Day</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item myday" href="#01">01</a></li>
<li><a class="dropdown-item myday" href="#02">02</a></li>
<li><a class="dropdown-item myday" href="#03">03</a></li>
</ul>
</div>
</div>
<div class="d-inline-block">
<small class="small fw-bold showlabel d-none" id="mh">Month</small>
<div class="input-group shadow-lg">
<button type="button" class="btn btn-outline-secondary monthvalue">Month</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item mymonth" href="#1">January</a></li>
<li><a class="dropdown-item mymonth" href="#2">February</a></li>
</ul>
</div>
</div>
<div class="d-inline-block">
<small class="small fw-bold showlabel d-none" id="yr">Year</small>
<div class="input-group shadow-lg">
<button type="button" class="btn btn-outline-secondary yearvalue">Year</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item myyear" href="#2022">2022</a></li>
<li><a class="dropdown-item myyear" href="#2023">2023</a></li>
</ul>
</div>
</div>
</div>
</div>
Programming the html date input parameters to be dynamic using php
now lets make it programmatically with php logics for each date parameter (day, year, month) starting with day
I think we are going to do the day parameter firstly
date parameter: DAY(1st Html Date input manipulation)
<div class="input-group">
<button type="button" class="btn btn-outline-secondary dayvalue">Day</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<?php
$days = range(1,31);
foreach($days as $day){
$day = str_pad($day, 2, '0', STR_PAD_LEFT);
echo '<li><a class="dropdown-item myday" href="'.$day.'">'.$day.'</a></li>';
}
?>
</ul>
</div>
from the above you can see we’ve programmatically added the number of days to the dropdown using php foreach, range and str_pad (STR_PAD_LEFT) functions.
We have 1-31 since considering that the number of days in each month does not exceeds 31 days nor goes below 1day.
I know that you know that we’ve never had day 0 on globally accepted Glegorian calendar and we never had day 32 in your calendar too
if you ever see such please check your eye sight IQ very well you might be having some vision issues.
lol… don’t mind me let’s continue.
Alright are you ready let’s do the next which is the month.
date parameter: MONTH (2nd Html Date input manipulation)
<div class="input-group">
<button type="button" class="btn btn-outline-secondary monthvalue">Month</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<?php
$months = range(1,12);
foreach($months as $month){
$day = str_pad($day, 2, '0', STR_PAD_LEFT);
echo '<li><a class="dropdown-item mymonth" href="'.$month.'">'.date('F', mktime(0, 0, 0, $month, 10)).'</a></li>';
}
?>
</ul>
</div>
You can see from the above code that we converted number of month to the name of the month in php using the code below$monthName = date('F', mktime(0, 0, 0, $monthNum, 10)); // Convert number to month name in PHP
Just hang on, we are getting to the final output
isn’t it amazing so far..
Let’s now do the year Parameter.
date parameter: YEAR (3rd Html Date input manipulation)
<div class="input-group">
<button type="button" class="btn btn-outline-secondary yearvalue">Year</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<?php
$currentyear = idate('Y');
$yearend = $currentyear - 7;
$yearstart = $yearend - 90;
$years = range($yearstart,$yearend);
foreach($years as $year){
echo '<li><a class="dropdown-item myyear" href="'.$year.'">'.$year.'</a></li>';
}
?>
</ul>
</div>
from the year above you see we’ve subtracted 7 from the current year to ensure that the year in the dropdown ends 7years back and we again subtracted 90 to the previous result to mark the count starting point to be from 90years earlier
firstly we are going to create a form that will have only input fields for date of birth.
The Javascript & Jquery that handles data extraction from the bootstrap dropdowns
Now that we are done let’s get going.
it’s about time to output our result maybe you will be wondering how.
Ok let’s do it
Oh yeah we moved out of this place abit and come back again later
where do you think went to
We’ve gone over to Jquery Official website to get this https://code.jquery.com/jquery-3.6.1.min.js which will invoke jquery api functions into our work
insert it into the html code at the begin just before the closing head tag </head>.
I hope you know javascript external files are linked liked shown below
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
Have you inserted it.
Good!
Now lets check it and see the output.
Simply do this javascript codings below to get the result out of the dropdown
<script>
$('.myday').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
alert($(this).attr("href"));
})
</script>
let’s save and check
on select of any day from the dropdown alert will popup
Nice! it worked if it didn’t work in yours then there’s something you are not getting right.
Let’s keep going if you are doing well if not start freshly and one step at a time
Now do the appropriate coding replace the one above.
<script>
$('.myday').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
var day = $(this).attr("href");
$('.dayvalue').text(day);
$('.showlabel').removeClass('d-none');
})
</script>
Looking good right.
By now you understood how did got the day output from the bootstrap using just the javascript.
Now the javascript for the year and month below
<script>
$('.mymonth').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
var month = $(this).attr("href");
$('.monthvalue').text(month);
$('.showlabel').removeClass('d-none');
})
</script>
<script>
$('.myyear').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
var year = $(this).attr("href");
$('.yearvalue').text(year);
$('.showlabel').removeClass('d-none');
})
</script>
Finally let’s output the input result using ajax post built into jquery visit https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings
we need a button that will do the submission
Okay I’ll consider adding this simple button
<button type="button" class="btn btn-sm btn-primary submit" id="submit">Send Date</button>
<script>
$(document).on('click', '.submit', function(){
var dayvalue = [];
var monthvalue = [];
var yearvalue = [];
$('.dayvalue').each(function(){
dayvalue.push($(this).text());
});
$('.monthvalue').each(function(){
monthvalue.push($(this).text());
});
$('.yearvalue').each(function(){
yearvalue.push($(this).text());
});
$.ajax({
url:"output.php",
method:"post",
data:{dayvalue:dayvalue, monthvalue:monthvalue, yearvalue:yearvalue},
success:function(data){
$('#input').removeClass('d-flex');
$('#input').fadeOut(function(){
$('#output').html(data);
})
}
})
});
</script>
You can now see from the code about that we need extra file called output.php
well I have created it in same folder of the before created index.php in my xampp htdocs
Nice we’ve made it
The php code that processes the manipulated html date inputs
Just add this php code below in the output.php file then it is done.
<?php
$dayvalue = $_POST["dayvalue"];
$monthvalue = $_POST["monthvalue"];
$yearvalue = $_POST["yearvalue"];
$dayvalue_clean = array();
$monthvalue_clean = array();
$yearvalue_clean = array();
//Date format YYYY-MM-DD
if(isset($_POST["dayvalue"])){
for($count = 0; $count<count($dayvalue); $count++){
$dayvalue_clean = $dayvalue[$count];
$monthvalue_clean = $monthvalue[$count];
$yearvalue_clean = $yearvalue[$count];
}
echo $yearvalue[0].'-'.$monthvalue[0].'-'.$dayvalue[0];
}
?>
You may now test it all
See the code put together below
All the code put together for html date input manipulation
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo-manipulate html Date Input</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<style>
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<div id="output"></div>
<div id="input">
<div class="d-flex">
<div class="d-inline-block">
<small class="small fw-bold showlabel d-none" id="dy">Day</small>
<div class="input-group">
<button type="button" class="btn btn-outline-secondary dayvalue">Day</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<?php
$days = range(1,31);
foreach($days as $day){
$day = str_pad($day, 2, '0', STR_PAD_LEFT);
echo '<li><a class="dropdown-item myday" href="'.$day.'">'.$day.'</a></li>';
}
?>
</ul>
</div>
</div>
<div class="d-inline-block">
<small class="small fw-bold showlabel d-none" id="mh">Month</small>
<div class="input-group">
<button type="button" class="btn btn-outline-secondary monthvalue">Month</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<?php
$months = range(1,12);
foreach($months as $month){
$day = str_pad($day, 2, '0', STR_PAD_LEFT);
echo '<li><a class="dropdown-item mymonth" href="'.$month.'">'.date('F', mktime(0, 0, 0, $month, 10)).'</a></li>';
}
?>
</ul>
</div>
</div>
<div class="d-inline-block">
<small class="small fw-bold showlabel d-none" id="yr">Year</small>
<div class="input-group">
<button type="button" class="btn btn-outline-secondary yearvalue">Year</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<?php
$currentyear = idate('Y');
$yearend = $currentyear - 7;
$yearstart = $yearend - 90;
$years = range($yearstart,$yearend);
foreach($years as $year){
echo '<li><a class="dropdown-item myyear" href="'.$year.'">'.$year.'</a></li>';
}
?>
</ul>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-primary submit" id="submit">Send Date</button>
</div>
<script>
$('.myday').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
var day = $(this).attr("href");
$('.dayvalue').text(day);
$('.showlabel').removeClass('d-none');
})
$('.mymonth').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
var month = $(this).attr("href");
$('.monthvalue').text(month);
$('.showlabel').removeClass('d-none');
})
$('.myyear').click(function(e){
e.preventDefault(); //this will disable the default action of any link in the dropdown
var year = $(this).attr("href");
$('.yearvalue').text(year);
$('.showlabel').removeClass('d-none');
})
$(document).on('click', '.submit', function(){
var dayvalue = [];
var monthvalue = [];
var yearvalue = [];
$('.dayvalue').each(function(){
dayvalue.push($(this).text());
});
$('.monthvalue').each(function(){
monthvalue.push($(this).text());
});
$('.yearvalue').each(function(){
yearvalue.push($(this).text());
});
$.ajax({
url:"output.php",
method:"post",
data:{dayvalue:dayvalue, monthvalue:monthvalue, yearvalue:yearvalue},
success:function(data){
$('#input').removeClass('d-flex');
$('#input').fadeOut(function(){
$('#output').html(data);
})
}
})
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
output.php
<?php
$dayvalue = $_POST["dayvalue"];
$monthvalue = $_POST["monthvalue"];
$yearvalue = $_POST["yearvalue"];
$dayvalue_clean = array();
$monthvalue_clean = array();
$yearvalue_clean = array();
//Date format YYYY-MM-DD
if(isset($_POST["dayvalue"])){
for($count = 0; $count<count($dayvalue); $count++){
$dayvalue_clean = $dayvalue[$count];
$monthvalue_clean = $monthvalue[$count];
$yearvalue_clean = $yearvalue[$count];
}
echo $yearvalue[0].'-'.$monthvalue[0].'-'.$dayvalue[0];
}
?>
In our Next post we are going to learn more about how you can validate date in php that is to check if a given date is valid or not.
