Automatically populate dates and times

Question

What I am currently doing is setting up a calendar feature, but when the user selects the date, and then the TIME the event starts (ie startTime = 00:10:00am), that it will then pre-populate the second field (ie: endTime = 00:10:30am).

So I thought maybe the best route would be when you select your time, jQuery would just select the NEXT statement and pick up the 15 minute interval or something of this nature.

I have this code that works to select the exact same time, but that doesn't work well for scheduling obviously, if you select 10am, you don't want your end time to be 10am, you want it to be 10:30am

This is what I have so far, but like I say this just currently selects the same time.

$('.startTime').change(function() {
        var startTime = $(this).val();

        $('.endTime').val(function() {
            return startTime;
        });

    });

Any guidance would be appreciated.

Answer 1

You'd need to convert startTime into a proper js Date object, then do something like this. If you're using a JS framework, there might already be some utils in place to do this.

Answer 2

This is what works, I don't know if it is efficient or not, but I got this to work. If there is a better answer, I'm all ears.

$('.startTime').change(function() {
        var startTime = $(this).val();

        var hours   = startTime.split(":")[0]; // Hours
        var minutes = startTime.split(":")[1]; // Minutes
        var seconds = startTime.split(":")[2]; // Seconds

        // new Date(year, month, day, hours, minutes, seconds, milliseconds)
        var newTime = new Date('0', '0', '0', hours, minutes, seconds, '0');
        //alert(newTime.getMinutes());

        if(newTime.getMinutes() == '15' || newTime.getMinutes() == '00') { 
            finalTime = newTime.setMinutes(newTime.getMinutes() + 15);
        } else if (newTime.getMinutes() == '30') {
            finalTime = newTime.setMinutes(newTime.getMinutes() + 15);
        } else if (newTime.getMinutes() == '45') {
            finalTime = newTime.setHours(newTime.getHours() + 1, 0);
        } 


        if(newTime.getHours() < 10) {
            newHours = '0'+ newTime.getHours();
        } else {
            newHours = newTime.getHours();
        }
        if(newTime.getMinutes() < 10) {
            newMinutes = '0'+   newTime.getMinutes();
        } else {
            newMinutes = newTime.getMinutes();
        }
        if(newTime.getSeconds() < 10) {
            newSeconds = '0'+   newTime.getSeconds();
        } else {
            newSeconds = newTime.getSeconds();
        }

        var adjustTime = newHours +":"+ newMinutes +":"+ newSeconds;

        $('.endTime').val(function() {
            return adjustTime;
        });

    });