Preciso ajustar/adaptar o calendário abaixo. É javascript puro
Na figura 1, ele e totalmente funcional... Ou seja,
Carrega data a partir do value do input.
Navega entre meses e anos e seleciona data.
Ocorre que preciso utilizá-lo na estrutura do bootstrap (4)..
1º problema: Ele desformata... Creio eu que o principal motivo é porque ele usa tag <table>
, <tr>
e <td>
2º problema: Preciso trabalhar também com o horário. Ou seja: Data + hora.
Então refiz o layout do calendários utilizando divs...
Na figura 2 ele esta carregando inicialmente com data e hora.
Mas ao add funcionalidades de navegação ocorre erros os quais gostaria de colaboração para sana-los.
1º ponto: Inicialmente, comparando as chamadas das funções no html tenho os parâmetros semelhantes – que funcionam:
Antigo:
<input type="button" name="btnData1" id="btnData1" value="." onclick="popdate('data_ini','pop1','150',document.getElementById('data_ini').value)">
Onde: popdate() 1º parâmetro = objeto 2º parâmetro = div 3º parâmetro = tamanho (pixel) 4º parâmetro = data
Novo:
<button class="btn btnrimary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)">
Onde: popdataJGD() 1º parâmetro = objeto 2º parâmetro = div 3º parâmetro = data hora
2º Ponto: Internamente (dentro da função) O comando de voltar um mês ‘<’... Antigo:
...
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>"
...
Os parâmetros são objeto, div tamanho, data… todos passados com aspas simples.
Novo:
...
txt += '<span class="control item2" title="Voltar mês">';
txt += '<a href=javascript:popdataJGD("'+ obj2 + '","'+ div +'","' + dt_prior2 +' '+ mmm +"')><</a></span>';
...
Já aqui (novo)… Se utilize aspas duplas, na tela no ultimo parâmetro, a conversão codificada não considera a hora como parte do value... Ou, ao contrario solicita “)“.
a) Deduzo que estou chamando a função recursivamente (perdão se estiver errado)...
b) Se a forma de chamar é praticamente igual... Com é interpretado o ultimo parâmetro: document.getElementById('data_ini').value ? É string, inteiro ou objeto tb ???
c) Inicialmente ao chamar a função pelo botão... Antes de exibir o calendário pela primeira vez.. Ao “printar” no console o parâmetro passado. Imprime como string: tipo data normal + espaço + hora... Daí trato separadamente. Passando o valor tb tratado para o parâmetro interno. Ou seja, com a adição do espaço... Ocorre o mesmo conflito com as aspas simples e aspas duplas. Tb tentei “escapar” (/)... Não funcionou.
Agradeço qualquer ajuda a respeito.
txt += '<a href="javascript:popdataJGD(\''+ obj2 + '\',\''+ div +'\',\'' + dt_prior2 +' '+ mmm +'\')"><</a></span>';