How to add a certain amount of minutes in a DateTime Input in Javascript

Question

I have two Input Fields like these,

            <div class="form-group mb-3">
                <label for="">Challenge Start Date and Time</label>
                <input type="datetime-local" class="form-control form-control-sm" name="date" id = "date" value=""/>
            </div>

            <div class="form-group mb-3">
                <label for="">Challenge End Date and Time</label>
                <input type="datetime-local" class="form-control form-control-sm" name="end_date" id = "end_date" value=""/>
            </div>

What I want to do actually is whatever time the user sets in the "Start" Input, that time + 45 minutes should be set to the 2nd Input Field.

So, I tried the following, but unfortunately, due to the conversion of the Input Time into the String, I am unable to call getMinutes() + 45

var now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
document.getElementById('date').value = now.toISOString().slice(0,16);
now.setMinutes(now.getMinutes() + 45);
document.getElementById('end_date').value = now.toISOString().slice(0,16);

document.getElementById('date').addEventListener('change', (e) => {
    const value = e.target.value; 
    value.setMinutes(value.getMinutes() + 45);
    document.getElementById('end_date').value = now.toISOString().slice(0,16);
});

I get this error whenever I change the value of the First Input Field,

Uncaught TypeError: value.getMinutes is not a function

Can anyone please provide an solution to this problem?

@Pointy yes, I understand. That is the issue, I am unable to convert that string value into a valid Date instance in which I can add those 45 minutes and then set it again for the 2nd input field. — Asad Hussain
– Asad Hussain, Commented Aug 9, 2022 at 13:13
Well the code posted in the question makes no attempt to construct a Date from the field value. What exactly did you try? What went wrong? — Pointy
– Pointy, Commented Aug 9, 2022 at 13:14

Sund'er · Accepted Answer · 2022-08-09 13:36:46Z

1

Try this

this will change get the input from field1 to field2

const value = new Date(e.target.value); 
value.setMinutes(value.getMinutes() + 45);
value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
document.getElementById('end_date').value = value.toISOString().slice(0,16);

You Missed the timezoneminutes minus from the calculated value

answered Aug 9, 2022 at 13:36

Sund'er

6661 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nixit Ahir Over a year ago

IT indeed work but could you add an explanation for this code as well, and also ``` value.setMinutes(value.getMinutes() - value.getTimezoneOffset()); document.getElementById('end_date').value = value.toISOString().slice(0,16);``` what's going on here.

Sund'er Over a year ago

I didn't do anything new its already there in the first five lines of the question, carefully read the code , he's creating a date with now variable and assign the two textboxes with the calculated date, i did the same with the change event of the from date and repeat the code with the changed date. Nothing extra

Yaw shadi · Accepted Answer · 2022-08-09 13:37:46Z

1

Write your onchange function like this:

document.getElementById('date').addEventListener('change', (e) => {

var date = new Date(document.getElementById('date').value);
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
date.setMinutes(date.getMinutes() + 45);
document.getElementById('end_date').value=date.toISOString().substring(0, 16);

})

answered Aug 9, 2022 at 13:37

Yaw shadi

663 bronze badges

Comments

ndreisg · Accepted Answer · 2022-08-09 13:14:41Z

0

The value of a datetime-local field does not return a Date object. It returns a string representation of the date (ISO-8601).

Here you can find more information about the value property of an <input type="datetime-local">

To convert this to a Date object you can just pass the value to the constructor like this:

var myDate = new Date(e.target.value);

answered Aug 9, 2022 at 13:14

ndreisg

1,17914 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to add a certain amount of minutes in a DateTime Input in Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related