Jak zaimplementować jQuery Datepicker z Timepicker?
Czy chcesz dodać selektor czasu do istniejącego selektora daty jQuery UI? Dodając selektor czasu, można wybrać czas wraz z datą. W tym artykule pokażę prosty sposób na zaimplementowanie jQuery Datepicker z timepickerem.
Przechodzimy krok po kroku przez dodanie timepickera do Datepickera jQuery UI. Jeśli ktoś nie chce podążać za każdym krokiem, może bezpośrednio skopiować końcowy kod z ostatniej sekcji tego artykułu.
Kiedy zakończymy naszą integrację, ostateczny datetimepicker będzie wyglądał następująco.
Zacznijmy od jQuery UI Datepicker
Naszym celem jest dodanie timepickera do jQuery UI Datepicker. jQuery Datepicker udostępnia nam wbudowany kalendarz do wyboru daty. Dodajmy ten selektor dat, korzystając z poniższego kodu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery Datetimepicker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function($) {
$("#datepicker").datepicker();
});
</script>
</body>
</html>
Przejdź do przeglądarki i uruchom powyższy plik, powinieneś zobaczyć Datepicker na swojej stronie.
Zaimplementuj jQuery Datepicker z Time Pickerem
W celu dodania selektora czasu użyję wtyczki Timepicker, która jest łatwa do zintegrowania z jQuery UI Datepicker.
Po odwiedzeniu witryny przewiń w dół do sekcji pobierania i kliknij link CDNJS. Z tego linku skopiuj pliki JS i CSS wtyczki. Oto link CDNJS, który otrzymasz z ich strony internetowejhttps://cdnjs.com/libraries/jquery-ui-timepicker-addon.
Na stronie CDNJS możesz zobaczyć kilka adresów URL dla dodatku timepicker. Skopiuj poniższe 2 linki JS i CSS.
Dla ułatwienia poniżej znajdują się te linki. Użyj tych linków w następnym kroku samouczka.
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js
Po uzyskaniu wymaganego kodu JS i CSS możesz dodać selektor czasu. To, co musisz zrobić, to dołączyć skopiowane pliki do HTML i zastąpić datepicker()
funkcję datetimepicker()
.
Nasz ostateczny kod wygląda następująco:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery Datetimepicker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<script>
jQuery(function($) {
$("#datepicker").datetimepicker();
});
</script>
</body>
</html>
Otóż to! Teraz, jeśli przeładujesz stronę, powinieneś zobaczyć na swojej stronie zarówno selektor daty, jak i selektor czasu. Proszę, spróbuj tego. Chciałbym usłyszeć twoje przemyślenia w sekcji komentarzy poniżej.
Powiązane artykuły
- Wdróż witrynę statyczną w Hostingu Firebase za darmo
- Przeciągnij i upuść przesyłanie wielu plików za pomocą JavaScript i PHP
- SweetAlert – piękny zamiennik okien dialogowych JavaScript