Bagaimana untuk menetapkan datetime dalam jquery

Dengan populariti aplikasi web, pemprosesan tarikh dan masa telah menjadi aspek yang sangat penting dalam pembangunan laman web. jQuery ialah perpustakaan JavaScript popular yang membantu pembangun mengendalikan tarikh dan masa dengan mudah dalam tapak web. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan pemilih tarikh dan masa, dan cara menggunakan jQuery untuk mengubah suai tarikh dan masa secara dinamik pada halaman.

1. Pemilih tarikh dan masa

UI jQuery ialah perpustakaan UI (antara muka pengguna) yang direka khas untuk aplikasi web. Dengan menggunakan jQuery UI, pembangun boleh menambah pemilih tarikh dan masa dengan mudah dalam halaman web.

Menambah pemilih tarikh adalah mudah menggunakan UI jQuery. Pertama, anda perlu menambah perpustakaan jQuery dan perpustakaan UI jQuery ke halaman. Kemudian, tambahkan elemen input dalam kod HTML dan tetapkan atribut jenisnya kepada "tarikh".

Buat pemilih tarikh menggunakan kod berikut:

<input type="date" id="datepicker">

Untuk menambah perpustakaan UI jQuery pada halaman, gunakan kod berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Kemudian, Anda boleh menggunakan kod berikut untuk memulakan pemilih tarikh:

$( function() {
  $( "#datepicker" ).datepicker();
});

Selepas memulakan pemilih tarikh menggunakan kaedah "pemilih tarikh", pemilih tarikh akan dijana secara automatik di bawah kotak input.

Anda juga boleh menggunakan kod berikut untuk memulakan pemilih masa:

$( function() {
  $( "#timepicker" ).timepicker();
});

Untuk menambah pemilih masa, anda perlu memperkenalkan pustaka pemalam pemilih masa. Pustaka pemalam pemilih masa boleh didapati di https://github.com/jonthornton/jquery-timepicker.

2. Kemas kini tarikh dan masa pada halaman secara dinamik

Selain menggunakan perpustakaan UI jQuery untuk menambah pemilih tarikh dan masa apabila halaman dimuatkan, anda juga boleh menggunakan kod jQuery untuk secara dinamik kemas kini tarikh dan masa.

Berikut ialah contoh kod untuk mengemas kini tarikh dan masa secara dinamik menggunakan jQuery:

$( function() {
//获取当前时间
  var date = new Date();
  //使用getFullYear()、getMonth()、getFullYear()等方法获取年、月、日等日期信息
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  //将日期信息赋值给页面元素
  $("#date").html(day + "/" + month + "/" + year);
  //使用getHours()、getMinutes()、getSeconds()等方法获取时、分、秒等时间信息
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  //将时间信息赋值给页面元素
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  //使用setTimeout()函数每秒钟更新时间
  setTimeout( function() {
    updateTime();
  }, 1000);
});

function updateTime(){
  //获取当前时间
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  $("#date").html(day + "/" + month + "/" + year);
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  setTimeout( function() {
    updateTime();
  }, 1000);
}

Kod ini akan mengemas kini elemen halaman secara dinamik yang mengandungi ID elemen "tarikh" dan "masa". ID elemen boleh ditukar mengikut keperluan.

3. Ringkasan

Dengan menggunakan perpustakaan UI jQuery, anda boleh menambah pemilih tarikh dan masa dengan mudah pada halaman web. Anda boleh menambah pemilih tarikh menggunakan kaedah "pemilih tarikh" dan pemilih masa menggunakan perpustakaan pemalam pemilih masa.

Gunakan kod jQuery untuk mengemas kini tarikh dan masa secara dinamik pada halaman semasa halaman dimuatkan. Anda boleh menggunakan kaedah dalam objek Tarikh untuk mendapatkan maklumat tarikh dan masa, dan kemudian gunakan jQuery untuk menetapkannya kepada elemen halaman. Gunakan fungsi setTimeout() untuk mengemas kini masa setiap saat.

Kod di atas adalah contoh asas yang pembangun laman web boleh mengubah suai dan melanjutkan mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan datetime dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!