So legen Sie Datum und Uhrzeit in JQuery fest

Mit der Popularität von Webanwendungen ist die Verarbeitung von Datum und Uhrzeit zu einem sehr wichtigen Aspekt bei der Website-Entwicklung geworden. jQuery ist eine beliebte JavaScript-Bibliothek, die Entwicklern den einfachen Umgang mit Datums- und Uhrzeitangaben auf Websites erleichtert. In diesem Artikel erfahren Sie, wie Sie mit jQuery Datums- und Uhrzeitauswahlen festlegen und wie Sie mit jQuery Datum und Uhrzeit auf der Seite dynamisch ändern.

1. Datums- und Uhrzeitauswahl

jQuery UI ist eine UI-Bibliothek (Benutzeroberfläche), die speziell für Webanwendungen entwickelt wurde. Durch die Verwendung der jQuery-Benutzeroberfläche können Entwickler ganz einfach Datums- und Zeitauswahlfunktionen in Webseiten hinzufügen.

Das Hinzufügen einer Datumsauswahl ist mit der jQuery-Benutzeroberfläche ganz einfach. Zuerst müssen Sie der Seite die jQuery-Bibliothek und die jQuery-UI-Bibliothek hinzufügen. Fügen Sie dann ein Eingabeelement im HTML-Code hinzu und setzen Sie dessen Typattribut auf „Datum“.

Erstellen Sie eine Datumsauswahl mit dem folgenden Code:

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

Um die jQuery-UI-Bibliothek zur Seite hinzuzufügen, verwenden Sie den folgenden Code:

<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>

Dann kann die Datumsauswahl mit dem folgenden Code initialisiert werden:

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

Verwenden Sie „ datepicker“ Nachdem die Methode die Datumsauswahl initialisiert hat, wird automatisch eine Datumsauswahl unterhalb des Eingabefelds generiert.

Sie können auch den folgenden Code verwenden, um die Zeitauswahl zu initialisieren:

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

Um eine Zeitauswahl hinzuzufügen, müssen Sie die Zeitauswahl-Plug-in-Bibliothek vorstellen. Die Zeitauswahl-Plugin-Bibliothek finden Sie unter https://github.com/jonthornton/jquery-timepicker.

2. Datum und Uhrzeit auf der Seite dynamisch aktualisieren

Zusätzlich zur Verwendung der jQuery-UI-Bibliothek zum Hinzufügen von Datums- und Uhrzeitauswahlen beim Laden der Seite können Sie auch jQuery-Code verwenden, um Datum und Uhrzeit auf der Seite dynamisch zu aktualisieren .

Hier ist ein Beispielcode zum dynamischen Aktualisieren von Datum und Uhrzeit mithilfe von 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);
}

Dieser Code aktualisiert dynamisch ein Seitenelement, das die Element-IDs „Datum“ und „Uhrzeit“ enthält. Die Element-ID kann nach Bedarf geändert werden.

3. Zusammenfassung

Mit der jQuery-UI-Bibliothek können Sie ganz einfach Datums- und Zeitauswahlmöglichkeiten zu Webseiten hinzufügen. Sie können eine Datumsauswahl mit der Methode „datepicker“ und eine Zeitauswahl mit der Zeitauswahl-Plugin-Bibliothek hinzufügen.

Verwenden Sie jQuery-Code, um Datum und Uhrzeit auf der Seite beim Laden der Seite dynamisch zu aktualisieren. Sie können Methoden im Date-Objekt verwenden, um Datums- und Uhrzeitinformationen abzurufen, und diese dann mit jQuery Seitenelementen zuweisen. Verwenden Sie die Funktion setTimeout(), um die Zeit jede Sekunde zu aktualisieren.

Der obige Code ist ein einfaches Beispiel, das Website-Entwickler entsprechend ihren Anforderungen ändern und erweitern können.

Das obige ist der detaillierte Inhalt vonSo legen Sie Datum und Uhrzeit in JQuery fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!