"Dynamically setting the selected value in a drop-down box to the

Question

"Dynamically setting the selected value in a drop-down box to the

Is there a way to dynamically set the value of a select box using JavaScript to show the current date and a selected period in the past? For example, if today's date is 2018-01-09 and I want to show the date from 30 days ago as selected 2017-12-10, then the option value should be 2018-01-03,2018-01-09. This same functionality should work for intervals of 7, 14, 30, 90, and 365 days. Here is what I have attempted so far...

setTimeout(function () {
  var today = new Date()
  var last7 = new Date().setDate(today.getDate()-7)
  var last14 = new Date().setDate(today.getDate()-14)
  var last30 = new Date().setDate(today.getDate()-30)
  var last90 = new Date().setDate(today.getDate()-90)
  var last365 = new Date().setDate(today.getDate()-365)

  $('#DateSelector').val('30').trigger("change");
}, 1000);

However, I am struggling to figure out how to use these variables in the option value.

<select name="DateSelector" id="DateSelector" onchange="overviewDates();">
   <option value="">Last 7 Days</option>
   <option value="">Last 14 Days</option>
   <option value="">Last 30 Days</option>
   <option value="">Last 90 Days</option>
   <option value="">Last 365 Days</option>
</select>

javascript date drop-down-menu

Answer 1

Answer №1

Instead of using setTimeout, it is better to call the function once the element is visible on the page. One way to achieve this is by utilizing the window's load event, although there are other methods available.

The setDate function returns a time value, but what you actually need is a formatted date string. Therefore, you will have to amend that aspect of your code. Subsequently, you must assign the updated values to the option elements in this manner:

// Update select values
function updateSelectValues(id) {
  var sel = document.getElementById(id);
  if (!sel) return;
  // Array of intervals to update
  Array.from(sel.options).forEach(function(opt) {
    var d = new Date();
    d.setDate(d.getDate() - opt.value);
    opt.value = formatDateYMD(d);
  });
}

// Function to format the date
function formatDateYMD(date) {
  return date.getFullYear() + '-' + 
    ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
    ('0' + date.getDate()).slice(-2);
}

// Trigger the updater
window.onload = function(){updateSelectValues('DateSelector')};

<select name="DateSelector" id="DateSelector" onchange="console.log(this.value)">
   <option value="7" selected>Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>

Remember to designate one of the options as selected, usually the first one.

Answer 2

Instead of using setTimeout, it is better to call the function once the element is visible on the page. One way to achieve this is by utilizing the window's load event, although there are other methods available.

The setDate function returns a time value, but what you actually need is a formatted date string. Therefore, you will have to amend that aspect of your code. Subsequently, you must assign the updated values to the option elements in this manner:

// Update select values
function updateSelectValues(id) {
  var sel = document.getElementById(id);
  if (!sel) return;
  // Array of intervals to update
  Array.from(sel.options).forEach(function(opt) {
    var d = new Date();
    d.setDate(d.getDate() - opt.value);
    opt.value = formatDateYMD(d);
  });
}

// Function to format the date
function formatDateYMD(date) {
  return date.getFullYear() + '-' + 
    ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
    ('0' + date.getDate()).slice(-2);
}

// Trigger the updater
window.onload = function(){updateSelectValues('DateSelector')};

<select name="DateSelector" id="DateSelector" onchange="console.log(this.value)">
   <option value="7" selected>Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>

Remember to designate one of the options as selected, usually the first one.

Answer 3

Answer №2

First, add the selected value to a variable and then call a function to subtract it from the current date.

function calculateDateDifference(e) {
 var s = e.target,
     selectedValue = s.options[s.selectedIndex].value,
     currentDate = new Date(),
     previousDate = currentDate.setDate(currentDate.getDate() - selectedValue);
     
     t.innerHTML = `The date ${selectedValue} days ago was: ${currentDate.toLocaleString()}`
 }
 
 var selectElement = document.getElementById("DateSelector").addEventListener("click", calculateDateDifference);

<select name="DateSelector" id="DateSelector">
   <option value="7">Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>

<h1 id="t"></h1>

Answer 4

First, add the selected value to a variable and then call a function to subtract it from the current date.

function calculateDateDifference(e) {
 var s = e.target,
     selectedValue = s.options[s.selectedIndex].value,
     currentDate = new Date(),
     previousDate = currentDate.setDate(currentDate.getDate() - selectedValue);
     
     t.innerHTML = `The date ${selectedValue} days ago was: ${currentDate.toLocaleString()}`
 }
 
 var selectElement = document.getElementById("DateSelector").addEventListener("click", calculateDateDifference);

<select name="DateSelector" id="DateSelector">
   <option value="7">Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>

<h1 id="t"></h1>

"Dynamically setting the selected value in a drop-down box to the

Answer №1

Answer №2

Similar questions

Are you curious about the array of elements in React's carousel?

Incorporating traditional Bootstrap styling directly into a React application without relying on the react-bootstrap library

"Unlocking the Power of Facebook with Javascript and Ajax

Ways to refresh the information in local storage when new data has been chosen

Using AJAX to dynamically update a div's class following a POST request

Enhance your Rails 5 application with a dynamic live search feature powered by Keyup. Say goodbye to

Tips for utilizing Async/Await within an expressjs router

Is there a way to obtain the URL before the page finishes loading, even if the specified waiting time for the webdriver has expired?

What is the best way to efficiently import multiple variables from a separate file in Vue.JS?

I have a Dart Function that needs to be converted to work with Vue.js axios.post() functionality

Mastering the art of iterating through arrays using node.js request()

Obtaining the date and time in PHP using the format yyyy-mm-ddThh:mm:ss.uZ

Adjusting the focal point of a brochure on open street map

Creating unit tests for linked functions in Node.js using Jest

What is the best way to extract the geometry information from a gltf object?

NavLinkButton - add style when active or selected

The detailed record of this run can be accessed at:

Can you explain the purpose of the _app.js and _document.js files in Next.js? What is the significance of using an underscore (_) in Next.js?

What is the best way to manage error handling in various locations within an Angular stream?

Harnessing the power of JavaScript to dynamically extract data from JSON formats