Problema con il modello di datepicker e il mio javascript e css personalizzati
Sto cercando di includere un bel campo di inserimento della data nella mia pagina web. Ho già eseguito lo stile del mio campo di input. Ha un'etichetta mobile che viene gestita dagli eventi "onfocus" e "onblur" utilizzando i metodi jquery. E tutto funziona bene. Ho mostrato le immagini.
Ma il problema sorge quando utilizzo un modello di datepicker da questo sito https://gijgo.com/datepicker/. Inoltre, non ci sono problemi con il selettore di date in funzione. È in grado di selezionare la data nel mio campo di immissione. Ma sorgono problemi con la mia etichetta mobile. L'etichetta non va al rialzo facendo clic sulla casella di input e anche quando seleziono una data si sovrappone all'etichetta proprio come questa mostrata nell'immagine.
// Datepicker from website https://gijgo.com/datepicker/.
$('.datepicker').datepicker({ showRightIcon: false }); // Floating label onfocus and onblur handling. function floatOnFocus(evt) { $(evt).parent().find('.place').css("font-size", "88%");
$(evt).parent().find('.place').css("top", "-11px"); $(evt).parent().find('.place').css("color", "#1b75cf");
$(evt).parent().find('.place').css("background-color", "white"); } function makeInpFocus(evt) { $(evt).parent().find('#inpbox').focus();
}
function floatOnBlur(evt) {
if ($(evt).val() == "") { $(evt).parent().find('.place').css("font-size", "100%");
$(evt).parent().find('.place').css("top", "7px"); $(evt).parent().find('.place').css("color", "grey");
$(evt).parent().find('.place').css("background-color", "transparent");
}
}
// Floating label onfocus and onblur handling end..maindiv {
position: relative;
}
.place {
position: absolute;
left: 9px;
top: 7px;
height: 56%;
font-size: 100%;
color: grey;
transition-duration: 0.2s;
white-space: nowrap;
}<!-- Input field without datepicker template, Custom CSS and jquery functions are working.-->
<div class="maindiv">
<span class="place" onclick="makeInpFocus(this)">Test Date</span>
<input type="text" name="testDate" id="inpbox" onfocus="floatOnFocus(this)" onblur="floatOnBlur(this)" placeholder="">
</div>
<!-- Input field with datepicker template, Custom CSS and jquery functions are not working.-->
<div class="maindiv">
<span class="place" onclick="makeInpFocus(this)">Test Date</span>
<input class="datepicker" type="text" name="testDate" id="inpbox" onfocus="floatOnFocus(this)" onblur="floatOnBlur(this)" placeholder="">
</div>
<br>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />Inizialmente appare così con una casella di avviso rossa che è anche un problema. 
E dopo aver selezionato la data è così.
Puoi vedere l'etichetta e le date selezionate sono sovrapposte. Ciò significa che questo modello non consente il funzionamento di jquery e css. Voglio solo sapere come posso far funzionare questo modello con il mio stile personalizzato e le funzioni degli eventi. Oppure, se conosci altri modelli di datepicker che possono darmi uno stile di etichetta mobile, fammelo sapere.
1 answers
Related questions
MORE COOL STUFF
Jana Duggar: tutto ciò che ha detto sull'amore e sulla sua finestra di 5 anni per trovare "l'unico"
Jana Duggar è stata aperta sulla sua ricerca dell'amore. Ecco tutto ciò che ha detto sull'argomento e sulla sua finestra di cinque anni per il matrimonio.
Sam Heughan sa esattamente cosa prenderà dal set di 'Outlander': 'Mi sento come se fossi Jamie quando li indosso'
La star di 'Outlander' Sam Heughan ha recentemente rivelato cosa prenderà dal set per ricordare Jamie Fraser, il ruolo che lo ha reso una star.
La canzone dei primi Beatles che è stata una delle "esibizioni più entusiasmanti" della band, secondo un membro dei Fab Four
"She Loves You" è stata scritta in un'ora, registrata in un giorno ed è stata la canzone dei Beatles con una delle loro migliori performance della loro carriera.
Dolly Parton ha aiutato sua nonna "invalida" quando nessuno degli altri nipoti l'avrebbe fatto: le faceva anche uno scherzo
Dolly Parton e sua nonna Bessie avevano un rapporto speciale. Nonna Parton era molto malata, ma questo non ha impedito a Dolly di farle uno scherzo.
Qual è il legno più duro del mondo?
Si potrebbe pensare che la quercia o il noce americano siano resistenti, ma quando si tratta del legno più duro del mondo, non si avvicinano nemmeno.
10 delle creature marine più spaventose che si nascondono nelle profondità dell'oceano
L'oceano è pieno di bellezza, ma nasconde anche alcune delle creature marine più spaventose del pianeta. Molti di questi animali si nascondono molto al di sotto della superficie dell'oceano, nel mondo oscuro e ad alta pressione delle profondità marine.
I 10 migliori incantesimi per le spade in Minecraft
Se stai combattendo contro nemici ostili o ti stai preparando per scenari PvP, conoscere i migliori incantesimi per le spade offerti da Minecraft può darti un vantaggio notevole. Incantare le spade ti permette di infliggere più danni, aumentare il numero di nemici che cadono e aumentare la durata della tua spada.
13 Paesi socialisti molto diversi tra loro
Quando si parla di paesi socialisti, spesso si immagina un sistema con il pieno controllo del governo e nessuna proprietà privata. Ma nella pratica, le economie socialiste variano notevolmente.
Il riepilogo di Bear: Marcus è l'uomo più gentile, tenero e sincero di Chicago?
“Children” presenta un cameo di un grande nome e alcune notizie devastanti
A $ 9.800, li metteresti dentro in questa Toyota RAV4 del 2008 a sette posti?
Si dice che questo RAV4 sia in condizioni eccellenti ed è pronto per il gioco delle sedie musicali.
Il furgone delle consegne di Amazon prende fuoco in un'esplosione di fuoco durante la calura estiva di Houston
Le riprese dei droni hanno ripreso i vigili del fuoco che sembravano lottare per spegnere l'incendio.
Lo spettacolo Black Panther della Marvel sarà lo spettacolo animato più cruciale di sempre
Eyes of Wakanda si collega direttamente al MCU, oltre ad aggiornamenti su X-Men '97, What If..., Daredevil e altro ancora.
La storia sentimentale di Ava Gardner: uno sguardo ai matrimoni e alle storie d'amore dell'icona di Hollywood
Ava Gardner avrebbe dovuto sposarsi con Mickey Rooney e Frank Sintra, e frequentare diverse altre star di Hollywood. Ecco uno sguardo alla storia sentimentale di Ava Gardner.
Chi è la moglie di John Cleese? Tutto su Jennifer Wade
John Cleese ha sposato sua moglie, Jennifer Wade, nel 2012. Ecco tutto quello che c'è da sapere sulla moglie di John Cleese, Jennifer Wade.
Chi è la ragazza di Dev Patel? Tutto su Tilda Cobham-Hervey
Dev Patel ha incontrato la sua ragazza nel 2016 sul set di "Hotel Mumbai". Ecco tutto quello che c'è da sapere su Tilda Cobham-Hervey.
Cronologia della relazione tra Garth Brooks e Trisha Yearwood
Garth Brooks e Trisha Yearwood sono sposati dal 2005. Ecco una cronologia completa della loro relazione.
3 modi comprovati per migliorare la tua abilità di scrittura
I vantaggi della scrittura e le strategie per aiutarti a farlo
Nel 2022, con il rilascio di GPT-3, l'abilità di scrittura sembra diventare meno importante. Con l'intelligenza artificiale, anche le persone con una scrittura scadente possono generare personale di qualità.
La lenta erosione: svelare i modi in cui le persone deperiscono nella loro carriera
Nel mondo frenetico e competitivo di oggi, la propria carriera gioca un ruolo significativo nella crescita personale, nella stabilità finanziaria e nella soddisfazione generale della vita. Tuttavia, molte persone si trovano intrappolate in un ciclo inesorabile di stagnazione e insoddisfazione, che si esauriscono gradualmente nella loro vita professionale.
Cosa rende influente un podcast?
La scorsa settimana ho notato un comunicato stampa, inviato tramite PressGazette (un sito Web di notizie sui media britannici). L'articolo annunciava che Acast, la società di hosting e pubblicità di podcast di Scandi, avrebbe guidato un consorzio di editori "probabilmente i più influenti" nel podcasting.