Hide and Show Elements Based on Date Change from DatePicker

Question

The following solution works, but I would like to keep adding elements for the entire month.

When I remove the dates that are ="none" the previous dates start stacking on top of each other.

Is there a way to simplify the javascript so I wouldn't have to keep adding each date to the if-else statements to hide and show them?

function selectDate() {
            var x = document.getElementById("start").value;
            if (x == "2022-03-21") {
                document.getElementById("2022-03-21").style.display = "flex";
                document.getElementById("2022-03-22").style.display = "none";
                document.getElementById("2022-03-23").style.display = "none";
            }
            else if (x == "2022-03-22") {
                document.getElementById("2022-03-22").style.display = "flex";
                document.getElementById("2022-03-21").style.display = "none";
                document.getElementById("2022-03-23").style.display = "none";
            }
            else if (x == "2022-03-23") {
                document.getElementById("2022-03-23").style.display = "flex";
                document.getElementById("2022-03-21").style.display = "none";
                document.getElementById("2022-03-22").style.display = "none";
            }
        }

    <section>
        <div class="container ">
            <div class="row">
                <div class="col">
                    <input type="date" id="start" onchange="selectDate()">
                </div>
            </div>
            <div class="row" id="2022-03-21" style="display: none;">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <h4>1</h4>
                        </div>
                        <div class="col">
                            <h4>2</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="2022-03-22" style="display: none;">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <h4>3</h4>
                        </div>
                        <div class="col">
                            <h4>4</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="2022-03-23" style="display: none;">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <h4>5</h4>
                        </div>
                        <div class="col">
                            <h4>6</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

score 0 · Answer 1 · answered Mar 19 '22 at 01:41

I'm not sure what you mean by

When I remove the dates that are ="none" the previous dates start stacking on top of each other.

I don't see that happening in your snippet.

That said, you can simplify the code that hides/shows the div, and not have to hard code in the dates.

Give each element that you are wanting to show/hide a common class name, for example output
Select them all in a NodeList collection using document.querySelectorAll('.output')
Then with the .forEach() on that collection, you can loop through each one and change the display to none.
Then find the element that matches the date selected
If it is not null, then you can change the display to 'flex'

Personally I prefer to use document.querySelector() or document.querySelectorAll() method when selecting elements. However, you'll notice that in step 4 above, I didn't. Since the ID begins with a number, it is better to use document.getElementById() rather than document.querySelector(). You can still do it, but it requires some string manipulation. See this post here: Using querySelector with IDs that are numbers

document.querySelector(`#start`).addEventListener(`change`, function(e) {

  // Get every element with the 'output' class &
  // loop through each one & change the display to 'none'
  document.querySelectorAll(`.output`).forEach(el => el.style.display = `none`);

  // get the element that matches the value of the date selected
  const dispElm = document.getElementById(this.value);

  // if the element exists, then change the display to 'flex'
  if (dispElm) {
    dispElm.style.display = `flex`;
  }
});

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <input type="date" id="start">
      </div>
    </div>
    <div class="row output" id="2022-03-21" style="display: none;">
      <div class="col">
        <div class="row">
          <div class="col">
            <h4>1</h4>
          </div>
          <div class="col">
            <h4>2</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="row output" id="2022-03-22" style="display: none;">
      <div class="col">
        <div class="row">
          <div class="col">
            <h4>3</h4>
          </div>
          <div class="col">
            <h4>4</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="row output" id="2022-03-23" style="display: none;">
      <div class="col">
        <div class="row">
          <div class="col">
            <h4>5</h4>
          </div>
          <div class="col">
            <h4>6</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Hide and Show Elements Based on Date Change from DatePicker

1 Answers1