11

<input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8">ユーザーが日付を選択するのに役立つ「ポップアップ」カレンダーを表示できるようにするために使用される Chromeなどの日付入力。昨日、動作が停止していることに気付きました。入力では、ユーザーは日付部分 (月/日/年) を上下に矢印でのみ指定できます。Chrome ブログにアクセスして Google 検索を実行しましたが、この変更に関する記述が見つかりません。の動作がinput type="date"変わったのはなぜですか? 不思議なことに、 http://www.w3schools.com/html/tryit.asp? filename=tryhtml5_input_type_date にはまだ日付ピッカーが表示されているため、この変更は Bootstrap に限定されているようです。

4

3 に答える 3

15

Update Chromium チームはバグを受け入れ、パッチを WebKit に送り返しました。変更の要点は、input[type='date'] コントロールに適用されるスタイルに関係なく、日付コントロールが柔軟なボックス要素内にレンダリングされることです。

ここで言及されている欠陥を Chromium に報告したのは私です。提案された解決策の 1 つは、display: inline-block; を適用することです。カレンダーピッカーへ：

input[type="date"]::-webkit-calendar-picker-indicator{
    display:inline-block;
}

ただし、input[type="date"] コントロールではコントロールが右寄せ以外の場所に移動しているため、これは不安定なソリューションです。

別のオプションは、右にフロートすることです。

input[type="date"]::-webkit-calendar-picker-indicator {
    display:inline-block;
    margin-top:2%;
    float:right;
}
input[type="date"]::-webkit-inner-spin-button {
    display:inline-block;
    float:right;
}

これには、スピナー コントロールとカレンダー ピッカー コントロールが逆になるという副作用があります。

最良のハックは、スピナーを削除して正しくフロートすることだと思います。

input[type="date"]::-webkit-calendar-picker-indicator{
    display:inline-block;
    margin-top:2%;
    float:right;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}

クローム 25 入力 [タイプ =

于 2013-02-27T08:13:12.917 に答える
6

更新しました

問題が見つかりました

Bootstrap は 2 つのスタイル属性を使用します。

1 - display:inline-block Google に矢印を別の行に分割させる

2 -高さ: 20pxで、この「線」が見えなくなります

調査結果のスクリーンショット

于 2013-02-25T21:27:13.710 に答える
2

アップデート

Google Chrome の問題はリグレッションとしてマークされているため、これはすぐに修正される予定です。一時的な回避策として、以下が機能します。

input[type=date]::-webkit-calendar-picker-indicator {
    display: inline-block;
}

このようにして、入力表示プロパティを好きなように設定しておくことができ、すべてが以前と同じように機能します。

元の応答

設定display: -webkit-inline-flex( のデフォルトのようです<input type="date" />) でこの問題は修正されますが、入力がインライン要素のように扱われるため、レイアウトが変更される可能性があります。

これは私にはバグのように思えます。誰かがすでにバグ レポートを提出しているかどうかを調べます。そうでない場合はそうします。

于 2013-02-26T05:24:49.313 に答える