2013-02-13 15 views
8

日付入力時にサイズを強制的に設定しようとすると問題が発生します。他の誰かがこの問題を抱えているか、それを回避する方法を知っていますか?HTML5日付入力幅

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

幅がテキストエリアを変更するだけで、実際のコントロールは変更されず、約125ピクセル幅程度に固定されます。

私もCSSでwidth = ""とmax-widthを試しましたが、いずれも動作しません。

+0

mm/dd/yyyyも拡大したい、またはコントロールが拡大しているようです。私は間違って理解しているかもしれません。 http://jsfiddle.net/supplement/xu9Xm/ – Supplement

+0

私の例では250ではなく50pxを使用しています。私はデフォルトよりも小さくしたい、大きくない。ありがとう。 –

+0

あなたが今言っていることを理解しています...それは良い質問です。私はあなたのために何かを掘ることができるかどうか私の友人が表示されます。 – Supplement

答えて

3

ほとんどのブラウザはhtml5で高速化されていないため、私はちょうど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> 

私はそれをたくさん使ってきたし、それが御馳走に動作します。クリックだけでカレンダーを表示する方が意味があります。ここで

は、同様のリンクです:http://jqueryui.com/datepicker/

+1

これはChrome専用のアプリケーションなので、私はIEが決して遵守されないことを心配していません。実際の問題に対する他の解決策がない場合、私はこの解決策を再検討します。しかし、代わりに+1。 –

+0

オースティンに感謝します。このディスカッションに私が手伝ってくれてうれしいです。 =] – Supplement

+2

これは質問に対する答えではありません。 – Miles

2

<input type=date>要素は、ブラウザが実行されている環境に適しているブラウザに依存した方法で実装されているものとします。だから、それはブラウザのコントロールの下にあるはずであり、作者のものではないはずです。これが多くの人々がこのアイデアに懐疑的な理由の1つです。

コントロールの幅を設定することは、実際には暗闇の中でのショットです。私のChrome(Win 7の25ベータ版)では、あなたのCSSコードはウィジェットを指定された幅に切り詰めるという意味で「機能します」。それはまだ動作しますが、それは非常に奇妙に見えます:ウィジェットでは、文字 "v"と他の文字の一部が見えます。実際には、幅設定がない場合でもウィジェットで見ることができる表記 "vvvv-kk-pp"( "yyyy-mm-dd"のローカライズされた表記)です。

結論は次のとおりです。<input type=date>を使用すると、ブラウザに依存するウィジェットのうち、ブラウザが使用する可能性のあるものはすべて受け入れられます。そのサイズで非常によく混乱するかもしれません

+0

すべての要素は指定されたCSSを尊重しなければなりません。編集中のUI要素の外観を気にするのではなく、編集していないときに静的に表示される値を気にするのとは異なります。 – Michael

4

クロム45では、私はちょうどフォントサイズを設定します。比例してテキストとコントロールのハンドルが変更されました。それがあなたが探していた効果であるかどうかはわかりません(?)。

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

@AustinBestその後、回答を「解決策」として選択するのが適切な処置です。 – kaiser

+4

トローリングから遠い。 _wontfix_で自分の質問に答えることも有効な答えです。 – kaiser

+0

これは私のGoogle検索のトップにあったので、今度は2017だから、Chromeを幅:10emに絞ることができましたが、それは私が得ることができるほど小さいです(それはそれほど小さくはありませんデフォルト)。私はこの答えが他のものより良いのが好きです。 –

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

この作品を願って! 幅以外は変更されません。

関連する問題