Create new Date/Time using separate Date and Time

Question

I have a form set-up in such a way that I collect the dates from a different input box and time from a dif

var appointment_date = new Date();
var appointment_start = new Date("Mon Apr 24 2017 20:00:00 GMT-0400 (EDT)");
var appointment_end = new Date("Mon Apr 24 2017 21:30:00 GMT-0400 (EDT)");

console.log(appointment_date);
console.log(appointment_start);
console.log(appointment_end);

 let selected_day = appointment_date.toString().split(' ').slice(0, 1).join(' '),
        selected_date = appointment_date.toString().split(' ').slice(1, 2).join(' '),
        selected_month = appointment_date.toString().split(' ').slice(2, 3).join(' '),
        selected_year = appointment_date.toString().split(' ').slice(3, 4).join(' ');
    console.log(selected_day);
    console.log(selected_date);
    console.log(selected_month);
    console.log(selected_year);
    
 console.log(appointment_start.toString().split(' ').slice(4, appointment_start.toString().length).join(' '));
 console.log(new Date(selected_year, selected_month, selected_date, appointment_start.toString().split(' ').slice(4, appointment_start.toString().length).join(' ')));
    

ferent input field.

I tried converting my Date and Time to string; splitting them and then joining it with the other time but it's not giving me the proper time. Is there a better way to do this?

where this.state.appointment_date = new Date();
  this.state.appointment_start = new Date();
  this.state.appointment_end = new Date();

let selected_day = this.state.appointment_date.toString().split(' ').slice(0, 1).join(' '),     // Day
    selected_date = this.state.appointment_date.toString().split(' ').slice(1, 2).join(' '),     // Date
    selected_month = this.state.appointment_date.toString().split(' ').slice(2, 3).join(' '),     // Month
    selected_year = this.state.appointment_date.toString().split(' ').slice(3, 4).join(' ');     // Year
console.log(this.state.appointment_start.setDate(selected_day));  //NaN (output)
console.log(this.state.appointment_start.toString().split(' ').slice(4, this.state.appointment_start.toString().length).join(' ')); // no output
console.log(this.state.appointment_end.toString().split(' ').slice(4, this.state.appointment_end.toString().length).join(' ')); //time

// I tried to create a new date using the above date:

console.log(new Date(selected_day, selected_month, selected_date, selected_year, this.state.appointment_start.toString().split(' ').slice(4, this.state.appointment_start.toString().length).join(' ')));

But I get invalid date for it. Not sure how to do it :/

This way I was trying to break it up and then combine it again to create the final date. But this seems like a really long approach for something which should be simpler

Expected Input/Output:

• Input: dates in the same format as new Date()

• Output: Take day, month and year from appointment_date and time from appointment_start and create a new date object

Answer 1

The correct syntax of Date is new Date(year, month, day, hours, minutes, seconds, milliseconds); so you mess the supplied params. The selected_day in your case will produce the name of the day.

Answer 2

In your code:

var appointment_date = new Date();
var appointment_start = new Date("Mon Apr 24 2017 20:00:00 GMT-0400 (EDT)");
var appointment_end = new Date("Mon Apr 24 2017 21:30:00 GMT-0400 (EDT)");

You should not parse strings with the Date constructor (or Date.parse) as it's largely implementation dependent. The standard does not require a string in this format to be parsed correctly. If you want to create some test dates, use:

var appointment_start = new Date(2017, 3, 24, 20);

assuming that your time zone is -0400. The first part of your code can be rewritten as:

var appointment_date  = new Date();
var appointment_start = new Date(2017, 3, 24, 20);
var appointment_end   = new Date(2017, 3, 24, 21, 30);

console.log(appointment_date.toString());
console.log(appointment_start.toString());
console.log(appointment_end.toString());

var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var selected_day   = days[appointment_date.getDay()],
    selected_date  = appointment_date.getDate(),
    selected_month = appointment_date.getMonth() + 1,
    selected_year  = appointment_date.getFullYear();
console.log(selected_day);
console.log(selected_date);
console.log(selected_month);
console.log(selected_year);

let selected_day = appointment_date.toString().split(' ').slice(0, 1).join(' '),

This depends on the output of Date.prototype.toString having a particular format, however ECMA-262 allows the format to be implementation dependent, so it may have a different format in different hosts. See Where can I find documentation on formatting a date in JavaScript?

Consider using a library, or write your own small formatter if you only have one format to support.

Where you have:

console.log(this.state.appointment_start.setDate(selected_day));  //NaN (output)

You are passing a value like "Tue" (or maybe something completely different) instead of a date, so the result is NaN.

In the last line you have:

 console.log(new Date(selected_year, selected_month, selected_date,
               appointment_start.toString().split(' ').slice(4,
               appointment_start.toString().length).join(' ')));

Which attempts to build a Date by passing values for the first three parameters, but then tries to pass all the parts for the time as a single string. You need to pass all the parts as individual values. Also, months are zero indexed so you need to subtract 1.

But there is no need for such convoluted code, all the parts of the date are available using Date methods, see Where can I find documentation on formatting a date in JavaScript? as noted above.