CODEWITHSUNDEEP
javascriptjquery
CristianOx21
CristianOx21

Reputation: 237

How to add minutes to an hour in a datetime-local input?

I am copying the value of an input of type datetime-local (date_start) to another once the user writes in the first one (date_end). However I would like to be able to add 20 minutes more to the result in the second input (date_end) How could I do it?The format is example 10/20/2017 15:00

$("#date_start").keyup(function(){

   var value = $(this).val();
   $("#date_end").val(value);


});

Upvotes: 1

Views: 2513

Answers (2)

Nisal Edu
Nisal Edu

Reputation: 7591

try this

$( document ).ready(function() {

DateObj = Date.parse("10/20/2017 16:00");

// vale you get $("#date_end").val(value);

var date = new Date(DateObj+1200000);

    console.log(date.toLocaleString('en-US',{ hour12: false }));
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 58757

The normal JQuery selector does not seem to work with this element, so I have used document.querySelector() instead of $(), So please find below my solution, this implements the stepUp() method of the DatetimeLocal object which will increment the value by minutes. Also please note I am adding the click event also in addition to keyup, since it seems necessary for this input element.

var start=document.querySelector('input[type="datetime-local"]#date_start'), end = document.querySelector('input[type="datetime-local"]#date_end')

start.value = start.value;
end.stepUp(20);

$("#date_start").on("click keyup", function(){
   end.value =  start.value;
   end.stepUp(20);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="datetime-local" class="form-control" id="date_start" name="date_start" value="2017-06-01T08:30">
<input type="datetime-local" class="form-control" id="date_end" name="date_end" >

The Javascript equivalent for this will be.

var end = document.querySelector('input[type="datetime-local"]#date_end'), start = document.querySelector('input[type="datetime-local"]#date_start');
end.value = start.value;
end.stepUp(20);

start.addEventListener("click", addMinutes);
start.addEventListener("keyup", addMinutes);

var addMinutes = function(){
   end.value =  start.value;
   end.stepUp(20);
};
<input type="datetime-local" class="form-control" id="date_start" name="date_start" value="2017-06-01T08:30">
<input type="datetime-local" class="form-control" id="date_end" name="date_end" >

Upvotes: 1

Related Questions