0

だから、私はこの問題に遭遇していて、たぶん私はまっすぐに考えていませんが、サイトがこれをどのように処理したかの例が役立つでしょう。

HTML5の日付入力を使用したい-それは素晴らしくスムーズです。ただし、最終的にmysqlデータベースの日付フィールドとして入力するには、その日付が必要です。問題は、HTML5の日付入力からの投稿値ではなく、古いブラウザでテキストに戻っている場合です。

入力で「YYYY-MM-DDをフォーマットしてください」と言うと（これは多くのブラウザからアクセスされる非常に公開されたアプリケーションになります）、日付ピッカーを表示しているChromeを使用すると、ChromeはMM / DD/YYYYに自動フォーマットします表示された日付と私はそれがユーザーにローカライズされていると聞きました。

質問はこれです：テキストボックスに戻ったときにのみ表示される「YYYY-MM-DDをフォーマットしてください」というラベルを付けるにはどうすればよいですか？エンドユーザーに一方向にフォーマットする必要があることを指定し、日付ピッカーでは別の方法でしかフォーマットできない場合、それは絶望的に混乱しませんか？このフォームは複数のロケールから使用されると予想されるため、デフォルトのフォーマットは予想できません。

これはフロントエンドの質問であることに注意してください。POST値を取得する方法は理解していますが、下位互換性のあるテキストボックスのPOST値を統一する必要があります。

4

1 に答える 1

1

次のようにプレースホルダー属性を使用できます。

<input type="date" name="myName" placeholder="Please format YYYY-MM-DD">

ブラウザが日付タイプを認識しない場合、テキスト入力としてレンダリングされます。プレースホルダーはテキスト入力では表示されますが、日付入力では表示されません。

残念ながらcaniuseによると、プレースホルダー属性をサポートするのは IE 10 以降のみです。それがあなたにとって問題かどうかはわかりません。

問題がある場合は、 Modernizrを使用してプレースホルダー サポートなどの機能をテストし、適切なクラスを本体に追加できます。その場合、次のような CSS ルールを作成できます。

.my-input-label {
  display: none;
}
.no-placeholder .my-input-label {
  display: inline-block; // Or block, if you need to support IE < 8
}

これにより、プレースホルダー属性をサポートしないものにはラベルが表示されますが、サポートするものはすべてレイアウト フローから削除されるため、適切に劣化します。

最後に、別の方法として、デフォルト値を設定する方法があります。このようなもの：

<input type="date" name="myName" value="Please format YYYY-MM-DD">

高級感はなく、UX の観点からは劣りますが、このdate入力タイプをサポートしていないすべてのブラウザーで共通のエクスペリエンスが得られます。

注: IE で Modernizr のクラスをテストしていないため、クラスがno-placeholder.

于 2013-03-03T06:03:08.603 に答える