Mencari penyelesaian input pemetik tarikh untuk bootstrap

amalan terbaik untuk tarikh penyemak imbas memasuki

Artikel ini meneroka cabaran dan penyelesaian terbaik untuk melaksanakan medan input tarikh dalam pelbagai pelayar. Oleh kerana sokongan penyemak imbas yang tidak konsisten untuk <input type="date"> dan kejahilan atribut lang, kita memerlukan penyelesaian yang mantap untuk menangani format tarikh, isu masa UTC/tempatan, dan perbezaan antara pelayar.

Mata utama:

• Sokongan penyemak imbas untuk atribut <input type="date"> dan lang tidak sekata, mengakibatkan ketidakupayaan untuk memaparkan widget input dalam bahasa bukan asli.
• Banyak penyelesaian JavaScript cuba meningkatkan sokongan untuk input tarikh, tetapi beberapa skrip boleh mengendalikan dua format tarikh yang berbeza yang memaparkan dan menyimpan data pada masa yang sama.
• DatePicker untuk JQuery UI adalah perpustakaan yang diuji dan disokong yang menyelesaikan masalah pemformatan dengan pilihan altField. Walaupun ia boleh diintegrasikan dengan Bootstrap, ini memerlukan membuat fail tema baru untuk memastikan konsistensi visual.
• JQuery UI DatePicker tidak menyokong medan DateTime. Plugin Timepicker Trent Richardson berfungsi sebagai penyelesaian, yang bertindak sejajar dengan widget DatePicker standard dan menggunakan fail datePicker.less tanpa kerja tambahan.

Ujian Keserasian Penyemak Imbas:

kami menguji pelbagai jenis input tarikh (, date, datetime, datetime-local, time, month), dan dijumpai: week

tiada sokongan penyemak imbas
• jenis input. datetime
Pelayar yang menyokong
• biasanya juga menyokong datetime-local dan time, sementara month kurang menyokong. week
Semua pelayar seolah -olah mengabaikan sifat
• , dan widget input sentiasa menggunakan format tarikh dan masa yang ditetapkan oleh sistem. lang

Pilih skrip sandaran:

Banyak penyelesaian JavaScript dapat meningkatkan sokongan untuk input tarikh silang pelayar, tetapi banyak yang mempunyai masalah: Penyelenggaraan tidak aktif atau tidak dapat mengendalikan format tarikh yang berbeza yang memaparkan dan menyimpan data.

kelebihan jQuery ui datePicker:

JQuery UI DatePicker adalah perpustakaan yang diuji dengan baik dan terawat dengan baik dengan pilihan

yang sesuai untuk mengendalikan perbezaan dalam format paparan dan simpan format. Ia boleh diintegrasikan dengan Bootstrap, tetapi memerlukan membuat tema tersuai. altField

Loading dan Pelaksanaan Kod:

Untuk memuatkan JQuery UI DatePicker hanya apabila diperlukan, anda boleh menggunakan Modernizr untuk pengesanan ciri:

Dalam fungsi panggil balik

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() {
        // 回调函数，处理日期选择器初始化和格式设置
        // ... (代码与原文类似，但需根据实际情况调整) ...
    }
});

, kita perlu membuat elemen

yang tersembunyi untuk setiap <input type="date"> elemen untuk menyimpan tarikh dalam format ISO dan menggunakan kaedah altField untuk menetapkan format paparan dan menyimpan format. datepicker

Integrasi Bootstrap:

Untuk mengintegrasikan dengan lebih baik dengan bootstrap, anda perlu membuat fail custom, menggunakan ikon pembolehubah dan glikikon Bootstrap. Ini memerlukan mengimport fail pembolehubah dan glyphicons bootstrap dan menulis semula gaya JQuery UI menggunakan pembolehubah yang kurang. datepicker.less

plug-in timepicker:

Untuk bidang DateTime, anda boleh menggunakan add-on jam tangan Trent Richardson, yang mengintegrasikan dengan lancar dengan DatePicker.

Ringkasan:

Dengan menggabungkan pengesanan ciri ModernIZR, pilihan JQuery UI Datepicker, dan tema tersuai, kami boleh membuat penyelesaian input tarikh yang bersesuaian, mudah disesuaikan. Ingat, tip ini akhirnya menjadi usang kerana pelayar terus meningkatkan sokongan untuk input tarikh asli.

altField

(gambar menyimpan format teks asal dan kedudukan tidak berubah)

(bahagian FAQ ditinggalkan, kerana ia mempunyai korelasi yang lemah dengan kandungan teras dan lebih lama, jadi anda boleh menambahkannya sendiri seperti yang diperlukan)

Atas ialah kandungan terperinci Mencari penyelesaian input pemetik tarikh untuk bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!