kotak teks jquery menukar format masa

jQuery ialah rangka kerja sumber terbuka berdasarkan bahasa JavaScript Ia menyediakan cara yang mudah, cekap dan menjimatkan masa untuk memproses kod JavaScript. Dalam proses pembangunan web, kotak teks adalah salah satu elemen bentuk yang biasa digunakan, dan biasanya perlu untuk mengehadkan atau menukar format masa yang dimasukkan dalam kotak teks. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menukar format masa dalam kotak teks.

Pertama, tambahkan elemen kotak teks pada halaman HTML dan tetapkan atribut id padanya.

<input type="text" id="mydate" />

Kemudian, tulis kod dalam fail JavaScript untuk mengendalikan format masa dalam kotak teks. Kita boleh menggunakan fungsi val() jQuery untuk mendapatkan nilai dalam kotak teks, dan kemudian menggunakan objek Tarikh JavaScript untuk menukar format. Kod khusus adalah seperti berikut:

$(document).ready(function() {
  // 监听文本框改变事件
  $('#mydate').on('change', function() {
    // 获取文本框中的值
    var dateString = $(this).val();
    // 将字符串转换为Date对象
    var dateObj = new Date(dateString);
    // 转换为指定格式的字符串
    var newDateString = dateObj.getFullYear() + '-' + (dateObj.getMonth()+1) + '-' + dateObj.getDate();
    // 在文本框中显示转换后的值
    $(this).val(newDateString);
  });
});

Terangkan proses khusus kod tersebut. Mula-mula, gunakan fungsi ready() jQuery untuk menentukan perkara yang perlu dilakukan selepas halaman selesai dimuatkan. Kemudian, dengar peristiwa perubahan kotak teks, iaitu peristiwa yang dicetuskan apabila pengguna memasukkan atau menukar nilai dalam kotak teks. Dalam fungsi pengendalian acara, gunakan fungsi val() untuk mendapatkan nilai dalam kotak teks dan tukarkannya kepada objek Date. Apa yang perlu diperhatikan di sini ialah format parameter objek Tarikh mestilah format tarikh yang betul, jika tidak penukaran akan gagal. Seterusnya, tukar objek Date kepada rentetan mengikut format masa yang diperlukan dan tetapkan ia kembali ke kotak teks menggunakan fungsi val().

Dalam pembangunan sebenar, anda mungkin menghadapi banyak format dan keperluan masa yang berbeza. Pada masa ini, kami boleh melanjutkan kod di atas dan menambah lebih banyak fungsi penukaran format. Berikut ialah contoh untuk menukar format masa ke dalam bentuk "Tahun-Bulan-Hari Jam:Minit:Kedua".

$(document).ready(function() {
  $('#mydate').on('change', function() {
    var dateString = $(this).val();
    var dateObj = new Date(dateString);
    var year = dateObj.getFullYear();
    var month = addLeadingZero(dateObj.getMonth()+1);
    var date = addLeadingZero(dateObj.getDate());
    var hours = addLeadingZero(dateObj.getHours());
    var minutes = addLeadingZero(dateObj.getMinutes());
    var seconds = addLeadingZero(dateObj.getSeconds());
    var newDateString = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
    $(this).val(newDateString);
  });
  
  // 日期、月份、小时、分钟、秒钟前面加0
  function addLeadingZero(num) {
    return (num < 10) ? '0' + num : num;
  }
});

Dalam kod di atas, kami mentakrifkan fungsi yang dipanggil addLeadingZero untuk memformat nombor menjadi dua digit. Fungsi ini boleh digunakan untuk memformat bulan, tarikh, jam, minit dan saat.

Untuk meringkaskan, menggunakan jQuery untuk menukar format masa dalam kotak teks memerlukan langkah berikut: mula-mula dengar peristiwa perubahan kotak teks, kemudian dapatkan nilai dalam kotak teks dan tukarkannya kepada Tarikh objek, dan kemudian tukar objek Tarikh Tukarkannya kepada rentetan dalam format yang diperlukan, dan akhirnya tetapkan nilai rentetan kembali ke kotak teks. Jika anda ingin melakukan penukaran format yang lebih kompleks, anda boleh menggunakan objek Tarikh terbina dalam JavaScript dan beberapa fungsi tersuai untuk melengkapkannya.

Atas ialah kandungan terperinci kotak teks jquery menukar format masa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!