Question 52148 in Javascript Question posted in
A very good W3school tutorial can be found here.

calculate data from today's date and display it on a form selectable via buttons – Javascript

I wish to build something similar to this:

The general conditions are:
Up to the 10th day of the current month the next three months should be displayed. As an example: today’s date should produce 1st May, 1st June and 1st July.
After the 10th day of the current month, the months after next should appear. Example: 11th April should creates 1st July, 1st August and 1st September.
The annual transition should be taken into account. The generated data should each be selectable as radio buttons, but only one at a time.

I know the following doesn’t work, but I’m a beginner trying to learn and understand JavaScript.

const date = new Date();

let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();

if (day < 10) {
  let month_1 = month + 1
  let month_2 = month + 2
  let month_3 = month + 3
  if (month + 3 > 12) {
    let month_3 = 12 - month + 3
  }
  if (month + 2 > 12) {
    let month_2 = 12 - month + 2
  }
  if (month + 1 > 12) {
    let month_1 = 12 - month + 1
  }
  console.log(month_1, month_2, month_3)
} else {
  let month_1 = month + 2
  let month_2 = month + 3
  let month_3 = month + 4
  if (month + 4 > 12) {
    let month_3 = 12 - month + 4
  }
  if (month + 3 > 12) {
    let month_2 = 12 - month + 3
  }
  if (month + 2 > 12) {
    let month_1 = 12 - month + 2
  }
  console.log(month_1, month_2, month_3)
}
Tags:

3

Answers


  1. 0

    You can dynamically generate HTML elements (like radiobuttons) with the methods of the document object. And the date arithmetic is rather simple using the methods of the Date class. (But I initially overlooked that you must set the day to 1 before shifting months, otherwise adding one month to 2023-03-31 gives 2023-05-01.)

    It is important to give all radiobuttons the same name, but different values. Upon submitting the form, the request will then contain a parameter like startDate=01.05.2023. (Initially I wanted to use date.toISOString(), but that produces the date in UTC, which may differ from the date in the user’s time zone.)

    var form = document.querySelector("form");
var display = Intl.DateTimeFormat("de", {dateStyle: "long"});
var value = Intl.DateTimeFormat("de", {dateStyle: "medium"});
var date = new Date();
var day = date.getDate();
date.setDate(1);
if (day > 10) date.setMonth(date.getMonth() + 1);
for (var i = 0; i < 3; i++) {
  date.setMonth(date.getMonth() + 1); // wraps from Dec to Jan
  var button = document.createElement("input");
  button.type = "radio";
  button.name = "startDate";
  button.value = value.format(date);
  form.appendChild(button);
  form.appendChild(document.createTextNode(display.format(date)));
  form.appendChild(document.createElement("br"));
}
    <form></form>
    Login or Signup to reply.
  2. 0

    It’s good practice to use the var instead of let since you’re reassigning the values of the coming months (month_1) when you loop over back to the beginning of the year. Just to make sure that the new value of your variable can be accessed outside the if statement, generally this is case and could be the reason you’re having an issue.
    Some the issues I think you had were:
    Using less or greater than 10 days, using let and subtracting 12 from the wrong side or else I think the rest should work.
    Here’s a fixed version of the code:

    if (day <= 10) {

var month_1 = month + 1
var month_2 = month + 2
var month_3 = month + 3
// Use variables inside if statements
if (month_1 > 12) {
// Subtract 12 from month
  var month_1 = month_1 - 12
}
if (month_2 > 12) {
  var month_2 = month_2 - 12
 }
 if (month_3 > 12) {
  var month_3 = month_3 - 12
}

console.log(month_1, month_2, month_3)
} else {
var month_1after10days = month + 3
var month_2after10days = month + 4
var month_3after10days = month + 5
if (month_1after10days > 12) {
  var month_1after10days = month_1after10days - 12
}
if (month_2after10days > 12) {
  var month_2after10days = month_2after10days - 12
}
if (month_3after10days > 12) {
  var month_3after10days = month_3after10days - 12
}
  console.log(month_1after10days, month_2after10days, month_3after10days)
}

    If you want to make it so that only one radio button can be selected at a time. You have to add a name to the inputs and keep it the same for all the radios.

    ex:
    <input type="radio" name="Date" />

    Good luck on your coding journey

    Login or Signup to reply.
  3. 0

    you can use the switch statement too(you can google it) I wrote the additional explanation as comments inside my code.

    let date = new Date()
let month = date.getMonth()
let day = 11 // right now is 1st april, code wont work so thas why I assigned it to 11 
// delete 11 and assign day to date.getDate() whene ever we reach 11st april it will work
if (day > 10) {
    for (let i = month + 1 /*dont want include curent month*/; i <= month + 3 /*you wanted 3 month after curent month */; i++) {
        switch (i) {
            // using string template `` and innerHTml for insert our html in to the form 
            //${javascript} for use script inside string template
            case 0:
                yourid.innerHTML += `
             <input type="radio" value="January" id=${i}>
             <label for="${i}">1 January ${date.getFullYear()}</label><br>`
            case 1:
                yourid.innerHTML += `
             <input type="radio" value="February" id=${i}>
             <label for="${i}">1 February ${date.getFullYear()}</label><br>`;
                break;
            case 2:
                yourid.innerHTML += `
             <input type="radio" value="March" id=${i}>
             <label for="${i}">1 March ${date.getFullYear()}</label><br>`;
                break;
            case 3:
                yourid.innerHTML += `
             <input type="radio" value="April" id=${i}>
             <label for="${i}">1 April ${date.getFullYear()}</label><br>`;
                break;
            case 4:
                yourid.innerHTML += `
             <input type="radio" value="May" id=${i}>
             <label for="${i}">1 May ${date.getFullYear()}</label><br>`;
                break;
            case 5:
                yourid.innerHTML += `
             <input type="radio" value="June" id=${i}>
             <label for="${i}">1 June ${date.getFullYear()}</label><br>`;
                break;
            case 6:
                yourid.innerHTML += `
             <input type="radio" value="July" id=${i}>
             <label for="${i}">1 July ${date.getFullYear()}</label><br>`;
                break;
            case 7:
                yourid.innerHTML += `
             <input type="radio" value="August" id=${i}>
             <label for="${i}">1 August ${date.getFullYear()}</label><br>`;
                break;
            case 8:
                yourid.innerHTML += `
             <input type="radio" value="September" id=${i}>
             <label for="${i}">1 September ${date.getFullYear()}</label><br>`;
                break;
            case 9:
                yourid.innerHTML += `
             <input type="radio" value="October" id=${i}>
             <label for="${i}">1 October ${date.getFullYear()}</label><br>`;
                break;
            case 10:
                yourid.innerHTML += `
             <input type="radio" value="November" id=${i}>
             <label for="${i}">1 November ${date.getFullYear()}</label><br>`;
                break;
            case 11:
                yourid.innerHTML += `
             <input type="radio" value="December" id=${i}>
             <label for="${i}">1 December ${date.getFullYear()}</label><br>`;
                case 12:
                    yourid.innerHTML += `
         <input type="radio" value="January" id=${i}>
         <label for="${i}">1 January ${date.getFullYear() + 1}</label><br>`
                    break;
                case 13:
                    yourid.innerHTML += `
         <input type="radio" value="February" id=${i}>
         <label for="${i}">1 February ${date.getFullYear() + 1}</label><br>`;
                    break;
                case 14:
                    yourid.innerHTML += `
         <input type="radio" value="March" id=${i}>
         <label for="${i}">1 March ${date.getFullYear() + 1}</label><br>`;

        }
    }
}
    <!DOCTYPE html>

<head>
    <meta charset="UTF-8">
</head>
<html>

<body>
    <form id="yourid">
    </form>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search