jquery - assigning values to an input not working

Question

I have three input controls in a form as,

date (which display the current date but user can select any date from a calendar)
start time(current time)
end time(start time + 30 minutes)
on page load

HTML:

Date:<input type="text" name="txtdate" id="txtdate" />
Start time:<input type="time" name="txtstart" id="txtstart" />
End time:<input type="time" name="txtend" id="txtend" />

I use jquery to get this done and the code is as follows

jquery:

$(document).ready(function() {

$("#txtdate").datepick({dateFormat:'yyyy-mm-dd',minDate: 0});

var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var year1 = d.getFullYear();

var hour = d.getHours();
var mins = d.getMinutes();

var today = year1 + '/' + month + '/' + day;
$("#txtdate").val(today);

var time = hour + ":" + mins;
$("#txtstart").val(time);

var a = time.split(':');
var totmins = (+a[0])* 60 + (+a[1])+30;
var nhour = Math.floor(totmins/60);
var nmins = totmins%60;

var ntime = nhour + ":" + nmins;    
$("#txtend").val(ntime);

});

in the above code it displays the current date, time and adds up 30 minutes to the current time correctly but sometimes when assigning values, the start time and end time fields don't display the time! for an example,

when current time is 12.00 AM, no value is displayed in start time and end time input fields

I don't see any error in the code but since i'm new to jquery i need to know if i had done anything wrong here (may be when assigning values) or is there another way to do this?

Note: It should be noted that I have use HTML 5 input type time control to input start time and end time

When this fails, are you getting any errors in your console? — Justin Wood
– Justin Wood, Commented Jan 6, 2015 at 18:12
You need to be more specific than "sometimes". Find out when those times are. — j08691
– j08691, Commented Jan 6, 2015 at 18:12
yes in the console it says "failed to load resource: net::ERR_CACHE_MISS". i didn't get this cos i'm new to programming — user27
– user27, Commented Jan 6, 2015 at 18:25

Ji_in_coding · Accepted Answer · 2015-01-06 19:40:49Z

0

My guess to your question is that after adding 30 minute to your Start Time, End Time is already the next day.

Take this for example.

Start Time: 23.50 Based on your calculation, +30min gives you End Time: 24.20

24.20 is an invalid value for input[type='time']

Edit: Jacob's answer solves the problem to your flawed algorithm.

Edit 2: Modifying Jacob's answer, this will get you the endDate

var d = new Date(); //get current time.
var thirtyMinutes = 30*60*1000; //30 minutes in milliseconds
var futureDate = new Date(d.getTime() + thirtyMinutes); //current time in milliseconds + 30 minutes in milliseconds.
var endDateHour = futureDate.getHours();
var endDateMinutes = futureDate.getMinutes();
if (endDateMinutes<10) {
endDateMinutes = "0"+endDateMinutes;
}
var endDate = endDateHour + ':' + endDateMinutes;

edited Jan 6, 2015 at 19:40

answered Jan 6, 2015 at 18:25

Ji_in_coding

1,7011 gold badge14 silver badges17 bronze badges

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

3 Comments

user27 Over a year ago

ya i guess this is the problem but even the end time falls in the same day, for an example if start time is 8.30 PM again no value display in end time field. @jcob

Ji_in_coding Over a year ago

I have tested that single digit minute is not accepted. Eg. 12:1 is not accepted, but 12:01 is. That is one exception. Another one is hour value > 23. I have appended the solution to your problem

user27 Over a year ago

your answer solved the single digit exception and the code works fine except when the current time is 12.00 AM (mid night). i think its because 12.00 AM throws the value 0. [link]stackoverflow.com/questions/9497724/… this has a solution in javascript

Jacob · Accepted Answer · 2015-01-06 18:53:28Z

0

Don't bother with this complicated "add 30 minutes" logic when you can simply use Date which is already good at date/time math.

var d = new Date();

// ...

var thirtyMinutes = 30*60*1000;
var futureDate = new Date(d.getTime() + thirtyMinutes);
var ntime = futureDate.getHours() + ':' + futureDate.getMinutes();

edited Jan 6, 2015 at 18:53

answered Jan 6, 2015 at 18:18

Jacob

79k24 gold badges159 silver badges245 bronze badges

2 Comments

Jacob Over a year ago

I abbreviated to only show the change to calculating ntime.

user27 Over a year ago

changed the code like u said, when current time is 12.30 PM no data displayed in end time but when the current time is 12.42 PM the end time displayed correctly as 1.12 PM. i'm sorry but can u give a solution for this?

Collectives™ on Stack Overflow

jquery - assigning values to an input not working

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related