2013-02-13 23 views
8

Quindi sto riscontrando un problema nel tentativo di forzare una dimensione su un input di data. Qualcun altro ha avuto questo problema o sa come aggirarlo?HTML5 data input width

<input style="width:50px;" type="date" value=""> 

È abbastanza semplice, la larghezza cambia solo textarea, il controllo effettivo non cambia, viene fissata a circa 125 larghezza px circa.

Ho anche provato width = "" e max-width nel css, né lavoro.

+0

Si desidera che anche mm/gg/aaaa si espanda o il controllo sembra espandersi per me. Potrei però capire male. http://jsfiddle.net/supplement/xu9Xm/ – Supplement

+0

Nota il mio esempio usa 50px, non 250? Voglio andare più piccolo del default, non più grande. Grazie. –

+0

capisco cosa stai dicendo ora ... questa è una buona domanda. Vedrò se riesco a scavare qualcosa per te, amico mio. – Supplement

risposta

3

Poiché la maggior parte dei browser non è ancora aggiornata con html5. Vorrei solo usare il selezionatore di date con jquery.

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker" /></p> 


</body> 
</html> 

L'ho usato molto e funziona benissimo. Ha più senso presentare il calendario al clic e imo.

ecco il link così: http://jqueryui.com/datepicker/

+1

Questa è un'applicazione solo per Chrome, quindi non sono preoccupato che IE non sia mai conforme. Se non c'è altra soluzione al problema attuale, rivisiterò questa soluzione. +1 per un'alternativa però. –

+0

Grazie Austin, felice di poter aiutare e prendere parte a questa discussione. =] – Supplement

+2

Questa non è una risposta alla domanda. – Miles

2

Un elemento <input type=date> dovrebbe essere attuato in maniera del browser-dipendente che è adatto per l'ambiente in cui il browser è in esecuzione. Quindi dovrebbe essere sotto il controllo del browser, non di un autore. Questo è uno dei motivi per cui molte persone sono scettiche sull'idea.

Impostare una larghezza per il controllo è davvero uno scatto al buio. Sul mio Chrome (25beta su Win 7), il tuo codice CSS "funziona" nel senso di troncare il widget alla larghezza specificata. Funziona ancora, ma sembra molto strano: nel widget, la lettera "v" e parte di qualche altra lettera è visibile. Sono in realtà la notazione "vvvv-kk-pp" (notazione localizzata per "aaaa-mm-gg"), che posso vedere nel widget in assenza di qualsiasi impostazione di larghezza.

La conclusione è: utilizzando <input type=date>, si accettano i widget che i browser in uso potrebbero utilizzare e un tentativo di controllo ad es. nelle sue dimensioni può davvero rovinare tutto,

+0

tutti gli elementi devono rispettare i CSS specificati per loro, in caso contrario? e non è che mi interessi l'aspetto dell'elemento dell'interfaccia utente mentre si sta modificando, ma il valore visualizzato staticamente quando non si modifica. – Michael

4

Con chrome 45, ho appena impostato la dimensione del carattere. Ha modificato in modo proporzionale il testo e le maniglie di controllo. Non sono sicuro che quello fosse l'effetto che stavi cercando (?).

<input style="font-size: 3rem" type="date" id="Date"> 
+1

@AustinBest Quindi selezionare una risposta come "soluzione" sarebbe l'azione appropriata da intraprendere. – kaiser

+4

Lontano dalla pesca alla traina. Anche rispondere alla tua stessa domanda con _wontfix_ sarebbe una risposta valida. – kaiser

+0

Dato che questo era in cima alla mia ricerca su google, e ora che è il 2017, sono riuscito a spremere Chrome in larghezza: 10em ;, ma è così piccolo come potrei ottenerlo (e non è molto più piccolo di il predefinito). Mi piace questa risposta meglio degli altri. –

0
<input type="date" name="tanggal" style="width:231px"> 

Spero che questo funziona! Non cambia nulla tranne la larghezza.

Problemi correlati