Javascript. Add array to datetime input

Question

I have a form with datetime_local html5 datetime input so that mobile users can use their native datetime picker instead of a jquery substitute which is generally clunkier.

I want the user to be able to select multiple dates.

So far I'm using the onchange trigger to capture the selected datetime and add it to an array. I then try and paste the array into the datetime input so it can be sent with the form.

With one date, it pastes fine, with more than one the input goes blank.

var datearray = [];
  $(document).on('change','#mobile_gig_date',function(){
    var date = $("#mobile_gig_date").val();
    datearray.push(date);

    console.log(datearray.join('; '))
    $("#mobile_gig_date").val(datearray);
});

The HTML element is;

<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">

Is there a way to add an array to a datetime input, and if so, in what format?

Answer 1

Since your input has the type datetime-local you can't put inside something that is not of that type.

Note that you also tried to put array inside an input - and you can't do this (what you can do is convert your array to string using JSON.stringify and use that value).

I added another hidden input and used it to save the data of your array.

 var datearray = []; $(document).on('change','#mobile_gig_date',function(){ var date = $("#mobile_gig_date").val(); datearray.push(date); console.log(datearray.join('; ')) $("#mobile_gig_date_temp").val(JSON.stringify(datearray)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]"> <input type="hidden" value="" name="gig[date_temp]" id="mobile_gig_date_temp" />