Question 196823 in Html Question posted in
Some basic documentation can be found here.

Html – How do I dynamically update a <p> element when a date is selected from an input type="date"?

I have a paragraph element that I’d like to dynamically update to display whatever the date selected from my input type="date" element is:

<input type="date" id="datepicker" name="date" required>

<p id='testVariable3'></p>

So far I’ve tried this, but it doesn’t update:

<div>
  <h4 style="padding: 5px">Select a date</h4>
</div>

<input type="date" id="datepicker" name="date" required />

<script>
  var currentDate = new Date().toISOString().split("T")[0];
  document.getElementById("datepicker").min = currentDate;
</script>

<p id="testVariable1"></p>
<p id="testVariable2"></p>
<p id="testVariable3"></p>

<div>
  <input type="submit" value="Submit" class="btn btn-primary" />
</div>

<script>
  const hotdeskLinks = document.querySelectorAll(".test a");
  var allBookings = "{{all-bookings}}";
  var decodedBookings = allBookings.replace(/&quot;/g, '"');

  const test1 = document.getElementById("testVariable1");
  const workspaceAttributes = JSON.parse(decodedBookings).map(
    (decodedBookings) => decodedBookings.workspace
  );
  test1.textContent = workspaceAttributes;

  const test2 = document.getElementById("testVariable2");
  const dateAttributes = JSON.parse(decodedBookings).map(
    (decodedBookings) => decodedBookings.date
  );
  test2.textContent = dateAttributes;

  const datepicker = document.getElementById("datepicker");
  const test3 = document.getElementById("testVariable3");

  datepicker.addEventListener("change", function (event) {
    const selectedDate1 = datepicker.value;
    test3.textContent = selectedDate;
  });
</script>
Tags:

3

Answers


  1. 0

    Your code works! You just have to make sure that in the HTML code, you’re loading the script after you create the input and p elements in the body.

    Something like this:

    <body>
    <input type="date" id="datepicker" name="date" required>
    <p id='dynamicDate'></p>

    <script>
        const datepicker = document.getElementById('datepicker');
        const test = document.getElementById('dynamicDate');

        datepicker.addEventListener('change', function(event) {
        const selectedDate = datepicker.value;
        test.textContent = selectedDate;
        });
    </script>
</body>

    To do this in your code, you can do it like this:

    <div>
    <h4 style="padding: 5px; ">Select a date</h4>
</div>

<input type="date" id="datepicker" name="date" required>

<script>
    var currentDate = new Date().toISOString().split("T")[0];
    document.getElementById("datepicker").min = currentDate;
</script>

<p id='testVariable1'></p>
<p id='testVariable2'></p>
<p id='testVariable3'></p>

<div>
    <input type="submit" value="Submit" class="btn btn-primary">
</div>

<script>
    // Moved this code out of the second script tag
    const datepicker = document.getElementById('datepicker');
    const test3 = document.getElementById('testVariable3');

    datepicker.addEventListener('change', function (event) {
        const selectedDate = datepicker.value;
        test3.textContent = selectedDate;
    });
</script>

<script>
    const hotdeskLinks = document.querySelectorAll('.test a');
    var allBookings = '{{all-bookings}}';
    var decodedBookings = allBookings.replace(/&quot;/g, '"');

    const test1 = document.getElementById('testVariable1');
    const workspaceAttributes = JSON.parse(decodedBookings).map((decodedBookings) => decodedBookings.workspace);
    test1.textContent = workspaceAttributes;
    const test2 = document.getElementById('testVariable2');
    const dateAttributes = JSON.parse(decodedBookings).map((decodedBookings) =>
        decodedBookings.date);
    test2.textContent = dateAttributes;

    // Originally here
</script>

    All I’ve done here is separated the second script tag into 2 so that it runs separately! (Also a small typo!)

    Hope this helped 🙂

    Login or Signup to reply.
  2. 0

    There’s nothing wrong with your code. However, it’s important to know that the "change" listener will only be triggered after filling out all of the components of the date (e.g. month, year, and day).

    enter image description here

    Login or Signup to reply.
  3. 0

    It looks like you have a small typo at the bottom of your script. This is your code:

    datepicker.addEventListener('change',  function(event) {
const selectedDate1 = datepicker.value;
test3.textContent = selectedDate;

    You declared selectedDate1 in your event listener function and then tried to assign selectedDate to test3.textContent

    See if changing this typo can fix your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search