Calendar javascript conflict between single quotes parameters x double quotes

Question

I need to adjust/adapt the calendar below. Is pure javascript

In figure 1, it is fully functional... That is, Load date from input value. Navigate between months and years and select date.

It happens that I need to use it in the bootstrap structure (4)..

Problem number one: He’s deformed... I think the main reason is because he uses a tag <table>, <tr> and <td>

2nd problem: I also need to work with the schedule. That is: Date + time.

So I redesigned the calendar layout using Divs... In figure 2 it is initially loading with date and time. But to add navigation features there are errors which I would like to collaborate to Save them.

1st point: Initially, comparing function calls in html I have similar parameters - they work:

Ancient:

<input type="button" name="btnData1" id="btnData1" value="." onclick="popdate('data_ini','pop1','150',document.getElementById('data_ini').value)">

Where: popdate() 1st parameter = object 2nd parameter = div 3rd parameter = size (pixel) 4th parameter = date

New:

<button class="btn btnrimary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)">

Where: popdataJGD() 1st parameter = object 2nd parameter = div 3rd parameter = time date

Second point: Internally (within the function) The command to go back a month... Ancient:

...
txt += "<td width=20% align=center><a href=javascript:popdate('"+obj2+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><</a></td>"
...

Parameters are object, div size, date... all passed with single quotes.

New:

...
txt += '<span class="control item2" title="Voltar mês">';
        txt += '<a href=javascript:popdataJGD("'+ obj2 + '","'+ div +'","' + dt_prior2 +' '+ mmm +"')><</a></span>';
    ...

Already here (new)... If you use double quotes, on the screen in the last parameter, the encoded conversion does not consider the time as part of the value... Or, on the contrary, asks ")".

a) I deduce that I am calling the function recursively (pardon if I’m wrong)...

b) If the form of calling is almost equal... How is the last parameter interpreted: Document.getElementById('data_ini'). value ? Is string, integer or object tb ???

c) Initially calling the function by the button... Before displaying the calendar for the first time.. When "printd" in the console the parameter passed. Print as string: normal date type + space + time... Then handle separately. Passing the treated tb value to the internal parameter. That is, with the addition of space... The same conflict occurs with single quotes and double quotes. Tb tried to "escape" (/)... It didn’t work.

I appreciate any help regarding.

Answer 1

I wouldn’t recommend, this mess with to concatenate a string that can be interpolated. This will make your code more readable and less susceptible to this type of error. See the example below.

let obj2 = 'teste';
let dt_prior2 = '23/03/2019';
let mmm = '123';

let txt = 
`<span class="control item2" title="Voltar mês">
    <a href="javascript:popdataJGD('${obj2}','div','${dt_prior2} ${mmm}');"> link </a>
</span>`;
            
console.log(txt);

document.getElementById("exemplo").innerHTML = txt

<div id="exemplo"></div>

Answer 2

Hello, Solution indicated by Sam worked. Valeu Sam!!!

It may not be the most correct in terms of practices... As Lenadro Angelo commented... But internal calendar navigations are working in every way... And the best date and time together.

Pelo que vejo, as aspas deveriam ficar assim: txt += '<a href="javascript:popdataJGD(\''+ obj2 + '\',\''+ div +'\',\'' + dt_prior2 +' '+ mmm +'\')"><</a></span>'; – Sam