21

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

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

それは非常に単純で、幅はテキストエリアを変更するだけで、実際のコントロールは変更されず、幅は約 125 px 程度に固定されています。

css で width="" と max-width も試しましたが、どちらも機能しません。

4

4 に答える 4

5

<input type=date>要素は、ブラウザが実行されている環境に適したブラウザ依存の方法で実装されることになっています。したがって、作成者ではなく、ブラウザの制御下にあるはずです。これが、多くの人がこのアイデアに懐疑的である理由の 1 つです。

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

結論: を使用<input type=date>することで、ブラウザが使用する可能性のあるブラウザ依存のウィジェットを受け入れることができ、たとえばそのサイズを制御しようとすると、非常にうまくいかない可能性があります。

于 2013-02-13T18:07:38.483 に答える
1

ほとんどのブラウザはまだ 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/

于 2013-02-13T17:48:36.347 に答える