Drop down calendar in Javascript

Question

Drop down calendar in Javascript

I am in the process of developing a virtual JavaScript calendar dropdown feature. I aim to have the correct number of days displayed upon selecting a month, but currently, no days appear when I make a selection. Can someone please assist me with this issue? I must avoid using jQuery again as I risk losing my job this time.

<html>
<head>
<script type="text/javascript">
function show(x) {
var mon = document.getElementById(x).innerHTML;
//if month value is nothing display no days
if (mon == "") {
    for(i=1; i < 32; i++) {
        document.getElementById("day" + i).style.display="none";
    }
} else if ((mon == "January") || (mon == "March") || (mon == "May") || (mon == "July") || (mon == "August") || (mon == "October") || (mon == "December")) {
    for(i=1; i < 32; i++) {
        document.getElementById("day" + i).style.display="";
    }
} else if ((mon == "April") || (mon == "June") || (mon == "September") || (mon == "November")) {
    for(i=1; i < 31; i++) {
        document.getElementById("day" + i).style.display="";
    }
} else {
    for(i=1; i < 30; i++) {
        document.getElementById("day" + i).style.display="";
    }
}
}
</script>

</head>

<body>
Calendar<br>
<hr align="left" width="200px"/>


--Year ------ Month ----- Day<br>

<select name="year">
<option value="defaulty"></option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>

<select name="month" onchange="show(this.value)">
<option id="defaultm" value="defaultm"></option>
<option id="January" value="January">January</option>
<option id="February" value="February">February</option>
<option id="March" value="March">March</option>
<option id="April" value="April">April</option>
<option id="May" value="May">May</option>
<option id="June" value="June">June</option>
<option id="July" value="July">July</option>
<option id="August" value="August">August</option>
<option id="September" value="September">September</option>
<option id="October" value="October">October</option>
<option id="November" value="November">November</option>
<option id="December" value="December">December</option>
</select>

<select name="day">
<option id="defaultd" value="defaultd"></option>
for(i=1; i < 32; i++) {
    <option id="day" + i value="day" + i style="display:none">i</option>
}
</select>



</body>

</html>

javascript

Answer 1

Answer №1

Let's delve into some meaningful discussion with this comment: Take a look at this jQuery-free PURE JS solution.

I opted for this approach because 1) I'm not fond of writing HTML, and 2) I want to showcase the importance of mastering Javascript skills.

Keep in mind that there may be compatibility issues with certain browsers (especially older IE versions), so you'll need to address those independently.

html:

<div id="calendar-container"></div>

js:

(function() {
    var calendar = [
        ["January", 31],
        ["February", 28],
        ["March", 31],
        ["April", 30],
        ["May", 31],
        ["June", 30],
        ["July", 31],
        ["August", 31],
        ["September", 30],
        ["October", 31],
        ["November", 30],
        ["December", 31]
        ],
        cont = document.getElementById('calendar-container');

    var sel_year = document.createElement('select'),
        sel_month = document.createElement('select'),
        sel_day = document.createElement('select');

    function createOption(txt, val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }

    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }

    function recalculateDays() {
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
            df.appendChild(createOption(i + 1, i));
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }

    function generateMonths() {
        var df = document.createDocumentFragment();
        calendar.forEach(function(info, i) {
            df.appendChild(createOption(info[0], i));
        });
        clearChildren(sel_month);
        sel_month.appendChild(df);
    }

    sel_month.onchange = recalculateDays;

    generateMonths();
    recalculateDays();

    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);
}());

Check out the jsFiddle Demo for more details.

Answer 2

Let's delve into some meaningful discussion with this comment: Take a look at this jQuery-free PURE JS solution.

I opted for this approach because 1) I'm not fond of writing HTML, and 2) I want to showcase the importance of mastering Javascript skills.

Keep in mind that there may be compatibility issues with certain browsers (especially older IE versions), so you'll need to address those independently.

html:

<div id="calendar-container"></div>

js:

(function() {
    var calendar = [
        ["January", 31],
        ["February", 28],
        ["March", 31],
        ["April", 30],
        ["May", 31],
        ["June", 30],
        ["July", 31],
        ["August", 31],
        ["September", 30],
        ["October", 31],
        ["November", 30],
        ["December", 31]
        ],
        cont = document.getElementById('calendar-container');

    var sel_year = document.createElement('select'),
        sel_month = document.createElement('select'),
        sel_day = document.createElement('select');

    function createOption(txt, val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }

    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }

    function recalculateDays() {
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
            df.appendChild(createOption(i + 1, i));
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }

    function generateMonths() {
        var df = document.createDocumentFragment();
        calendar.forEach(function(info, i) {
            df.appendChild(createOption(info[0], i));
        });
        clearChildren(sel_month);
        sel_month.appendChild(df);
    }

    sel_month.onchange = recalculateDays;

    generateMonths();
    recalculateDays();

    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);
}());

Check out the jsFiddle Demo for more details.

Drop down calendar in Javascript

Answer №1

Similar questions

The test does not pass when attempting to use a shorthand operator to ascertain the truthfulness of

Issue with Jquery Drag and Drop functionality, navigate to a different page

What methods can be used to test included content in Angular?

Enhancing Angular input validators with updates

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

Unable to receive notifications within an AngularJS service

Issue in Angular Material: The export 'MaterialComponents' could not be located in './material/material.module'

Build a photo carousel similar to a YouTube channel

Lack of animation on the button

the event listener for xmlhttprequest on load is not functioning as expected

Tips for replicating input boxes in a while loop

Is it possible to make API calls within the componentWillMount lifecycle method in React?

Unlimited scrolling feature on a pre-filled div container

The issue of JavaScript failing to connect to the HTML file

The response from a jQuery ajax call to an MVC action method returned empty

Using Selenium and Python to showcase the source of an image within an iframe

The React Testing Library encountered an error: TypeError - actImplementation function not found

Convert several XML nodes to display in an HTML format

explore a nested named view using ui-router

Date selection feature in Material UI causing application malfunction when using defaultValue attribute with Typescript