<script type="text/javascript">
//Create references to the dropdown's
const yearSelect = document.getElementById("year");
const monthSelect = document.getElementById("month");
const daySelect = document.getElementById("day");
const months = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'];
//Months are always the same
(function populateMonths(){
for(let i = 0; i < months.length; i++){
const option = document.createElement('option');
option.textContent = months[i];
monthSelect.appendChild(option);
}
monthSelect.value = "January";
})();
let previousDay;
function populateDays(month){
//Delete all of the children of the day dropdown
//if they do exist
while(daySelect.firstChild){
daySelect.removeChild(daySelect.firstChild);
}
//Holds the number of days in the month
let dayNum;
//Get the current year
let year = yearSelect.value;
if(month === 'January' || month === 'March' ||
month === 'May' || month === 'July' || month === 'August'
|| month === 'October' || month === 'December') {
dayNum = 31;
} else if(month === 'April' || month === 'June'
|| month === 'September' || month === 'November') {
dayNum = 30;
}else{
//Check for a leap year
if(new Date(year, 1, 29).getMonth() === 1){
dayNum = 29;
}else{
dayNum = 28;
}
}
//Insert the correct days into the day <select>
for(let i = 1; i <= dayNum; i++){
const option = document.createElement("option");
option.textContent = i;
daySelect.appendChild(option);
}
if(previousDay){
daySelect.value = previousDay;
if(daySelect.value === ""){
daySelect.value = previousDay - 1;
}
if(daySelect.value === ""){
daySelect.value = previousDay - 2;
}
if(daySelect.value === ""){
daySelect.value = previousDay - 3;
}
}
}
function populateYears(){
//Get the current year as a number
let year = new Date().getFullYear();
//Make the previous 100 years be an option
for(let i = 0; i < 101; i++){
const option = document.createElement("option");
option.textContent = year - i;
yearSelect.appendChild(option);
}
}
populateDays(monthSelect.value);
populateYears();
yearSelect.onchange = function() {
populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
populateDays(monthSelect.value);
}
daySelect.onchange = function() {
previousDay = daySelect.value;
}
Asked
Active
Viewed 91 times
0

prashant
- 29
- 5
-
[restrict-future-dates-in-html5-date-input](https://stackoverflow.com/questions/23671407/restrict-future-dates-in-html5-date-input) maybe you can find something here – Mara Black Jan 14 '22 at 08:58
-
But i dont have date picker dialog i have html option – prashant Jan 14 '22 at 09:04
-
– prashant Jan 14 '22 at 09:04
-
If you want to stick to three separate select elements, I do not think you can prevent someone to compose a date in the future; you can only check afterward. Otherwise you could use a single `` and handle the issue with its `min` and `max` attributes (where `max` will be set via JavaScript to the current date) – secan Jan 14 '22 at 09:09
-
Is there any option if we can use for loop to set month to current month and day to today if they select year as current Year..please help me this – prashant Jan 14 '22 at 09:12
-
You can use JS to get the value of the current year and restrict the months accordingly. – AchoVasilev Jan 14 '22 at 10:55
-
please show me how it can be done since i am new to javascript – prashant Jan 15 '22 at 05:47