ブートストラップの日付ピッカー入力ソリューションを見つける

クロスブラウザーの日付のベストプラクティス

この記事では、さまざまなブラウザに日付入力フィールドを実装するための課題と最良のソリューションを調査します。ブラウザの一貫性のないブラウザのサポートと

属性の無知により、日付形式、UTC/現地時間の問題、ブラウザ間の違いを扱うための堅牢なソリューションが必要です。

<input type="date">langキーポイント：

ブラウザの

属性と

属性に対するサポートは不均一であり、非ネイティブ言語で入力ウィジェットを表示できなくなります。
• <input type="date">多くのJavaScriptソリューションは、日付入力のサポートを改善しようとしますが、データを表示および保存する2つの異なる日付形式を同時に処理できるスクリプトはほとんどありません。 lang JQuery UIの
datePickerは、
• オプションでのフォーマット問題を解決する適切にテストされ、サポートされているライブラリです。ブートストラップと統合できますが、視覚的な一貫性を確保するために新しいテーマファイルを作成する必要があります。
• jQuery ui datepickerは、DateTimeフィールドをサポートしていません。 Trent RichardsonのTimePickerプラグインは、標準のDatePickerウィジェットに沿って動作し、追加の作業なしのないファイルを使用します。 altField
• ブラウザ互換性テスト：

さまざまな日付入力タイプ（、

、

、date、datetime、datetime-local）をテストし、見つかりました：time month weekブラウザのサポートなし

入力タイプ。

サポートする
• ブラウザdatetimeは通常
および
• もサポートしますが、datetime-localはサポートが低くなります。 time すべてのブラウザはmonthプロパティを無視しているようで、入力ウィジェットは常にシステムによって設定された日付と時刻形式を使用します。 week
• langフォールバックスクリプトを選択してください：

多くのJavaScriptソリューションは、クロスブラウザーの日付入力のサポートを改善できますが、多くの問題があります。メンテナンスはアクティブではないか、データを表示および保存するさまざまな日付形式を処理できません。

jQuery ui datepickerの利点：

jQuery ui ui datepickerは、ディスプレイ形式の違いと保存形式の違いを処理するのに理想的なオプションを備えた、適切にテストされた適切にメンテナンスされたライブラリです。 Bootstrapと統合できますが、カスタムテーマを作成する必要があります。

条件の読み込みとコードの実装：altField

jquery ui datepickerを必要な場合にのみロードするために、Modernizrを使用して機能検出に使用できます。 コールバック関数では、ISO形式に日付を保存して

メソッドを使用して表示形式を設定して保存するために、各

要素に対して非表示

要素を作成する必要があります。

Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: [
        'jquery-ui-master/ui/core.js',
        'jquery-ui-master/ui/datepicker.js',
        'jquery-ui-master/ui/i18n/datepicker-it.js', // 替换为你的语言文件
        'jquery-ui-master/themes/base/core.css',
        'jquery-ui-master/themes/base/datepicker.css',
        'jquery-ui-master/themes/base/theme.css'
    ],
    callback: function() {
        // 回调函数，处理日期选择器初始化和格式设置
        // ... (代码与原文类似，但需根据实际情况调整) ...
    }
});

<input type="date">ブートストラップ統合：altFielddatepicker

ブートストラップとの統合を改善するには、Bootstrapの変数とGlyphiconsアイコンを使用して、カスタムdatepicker.lessファイルを作成する必要があります。これには、Bootstrapの変数とGlyphiconsファイルをインポートし、より低い変数を使用してjQuery UIのスタイルを書き換える必要があります。

TimePickerプラグイン：

DateTimeフィールドの場合、Trent RichardsonのTimePickerアドオンを使用できます。

概要：

Modernizrの機能検出、jQuery UI datePickerのaltFieldオプション、およびカスタムテーマを組み合わせることにより、クロスブラウザー互換のカスタマイズ日付入力ソリューションを作成できます。 ブラウザがネイティブの日付入力のサポートを改善し続けるため、これらのヒントは最終的に時代遅れになる可能性があります。

（写真は元のテキスト形式と位置を変更しないようにしています）

（FAQパーツは省略されています。これは、コアコンテンツとの相関が弱く、長いため、必要に応じて自分で追加できるため）

以上がブートストラップの日付ピッカー入力ソリューションを見つけるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。