...
✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Jak zaimplementować jQuery Datepicker z Timepicker?

43

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.

Jak zaimplementować jQuery Datepicker z Timepicker?

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.

Jak zaimplementować jQuery Datepicker z Timepicker?

Na stronie CDNJS możesz zobaczyć kilka adresów URL dla dodatku timepicker. Skopiuj poniższe 2 linki JS i CSS.

Jak zaimplementować jQuery Datepicker z Timepicker?

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

Źródło nagrywania: artisansweb.net

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów