'how do i pass info.startStr into an html input inside a modal window?

I am calling a modal upon clicking/selecting a date (NOT EVENT) in FullCalendar:

select: function(info) {
  var sdate = info.startStr;
  $('#fullCalModalAdd').modal();
},

Then I would like to place sdate into the "start" input inside that modal:

<div id="fullCalModalAdd" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h2>ADD EVENT</h2>
        </div>
        <div id="modalBody"></div>
             <form>  
                <p>
                 <label for="start">Start Date:</label>
                 <input id="start" type="text" value=sdate>
               </p> 
             </form>
    </div>
 </div>
</div>

I can't seem to get this working it simply adds "sdate" in my input field in the modal. I am EXTREMELY new to all of this, so I am very open to critque.

javascripthtmljquerymodal-dialogfullcalendar


Solution 1:[1]

You can just populate the "start" input like any other text box:

select: function(info) {
  $('#fullCalModalAdd').modal();
  $("#sdate").val(info.startStr);
},

value=sdate in the HTML will just put that literal string into the box - HTML doesn't know anything about Javascript variables.

Documentation: https://api.jquery.com/val/

(P.S. Here is a brief conceptual point. Based on how you've worded the question, I suspect it might be worth mentioning this: you're not passing the value into the modal as such, you're just passing into the textbox. The fact that the textbox happens to be inside a div which, when made visible, has HTML and CSS which give it the appearance of a modal dialog box, is completely irrelevant. You would populate the textbox the exact same way if it was located somewhere else in your page.)

Solution 2:[2]

After some wasted time, I found a solution in MDN WEB DOCS with toISOString() and substring().

try some like this

handleDateSelect(selectInfo) {
  var datestart = new Date(selectInfo.startStr);
  document.querySelector('input#inputEventStart').value = datestart.toISOString().substring(0, (datestart.toISOString().indexOf("T")|0) + 6|0);
},

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ADyson
Solution 2 Macedo_Montalvão

Related Questions