combine two javascript functions

Question

I've have been trying to fix this problem.

Here is the code:

<h4>Your Itinerary</h4>
<div id="selected"></div>
<script>
    (function () {  
        $(".info-css").on(
            'click' 
        ,   function (e) {
                $('#selected').html(
                    [
                        $('#start option:selected').text()                        
                    ,   $('#second option:selected').text()                       
                    ,   $("#datepicker").datepicker( "getDate" )
                    ,   $('#third option:selected').text()
                    ,   $("#datepicker2").datepicker( "getDate" )
                    ,   $('#forth option:selected').text()
                    ,   $("#datepicker3").datepicker( "getDate" )
                    ].join("<br> to ")
                );
            }
        );
    }());
</script>

The code outputs something like this:

Your Itinerary

Arenal / la Fortuna

to Cahuita

to Mon Mar 21 2016 00:00:00 GMT-0600 (Central Standard Time (Mexico))

to Bocas del Toro (To/From Costa Rica)

to Thu Mar 24 2016 00:00:00 GMT-0600 (Central Standard Time (Mexico))

to Manzanillo

to Thu Mar 31 2016 00:00:00 GMT-0600 (Central Standard Time (Mexico))

I'm trying to do two things:

1) Have the getDate only show the Mon Mar 21 2016 and not the time and everything else.

2) Combine the

    $('#second option:selected').text()
,   $("#datepicker").datepicker( "getDate" )

into one string with on between the two.

For Example:

Arenal / la Fortuna

to:

Cahuita on Mon Mar 21 2016   

Here is a test page:

http://thecostaricatoursite.tcct-test.com/test/

Answer 1

First of all, you need to set the dateFormat that the datepicker will return by doing the following:

$('#datepicker').datepicker({ dateFormat: 'D M dd yy' });

Notes: You can refer to jquery.datepicker document for more information on how to select the format for date here .

Then get the value of the selected date from the input instead of from getDate to avoid parsing Date object because getDate return a Date instead of a string .

$("#datepicker").val()

Your code to display the itinerary is a comma separated array of string. Thus to combine the destinate with the date you could do the following

$('#second option:selected').text() + ' on ' + $("#datepicker").val()

which would treat this as a single element of an array instead of two like your original code. Repeat the same for the rest of your selected date and you will get the result you like.

Good luck!!