在前端开发中，处理日期和时间是一个常见的任务。而通过使用jQuery UI datepicker插件，我们可以轻松地使用户选择日期和时间。本文将介绍如何使用jQuery UI datepicker设置时间格式并获取时分秒信息。
步骤 1：导入jQuery UI和相关CSS
在HTML文件中，首先需要导入jQuery库和jQuery UI库，并且需要引入相关的CSS文件。可以使用以下代码：
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
步骤 2：设置datepicker选项
接下来，我们需要设置datepicker选项。为了让用户选择日期和时间，我们需要将dateFormat属性设置为日期和时间格式。例如，使用“yy-mm-dd”表示“年-月-日”的格式，使用“yy-mm-dd HH:mm:ss”表示“年-月-日 时:分:秒”的格式。此外，我们还需要设置showTimepicker属性为true来显示时间选择器。由于datepicker默认不包含时间选择器，所以需要借助timepicker插件来实现。
$('#datetimepicker').datetimepicker({
dateFormat: 'yy-mm-dd',
showTimepicker: true
});步骤 3：获取时分秒信息
通过上述设置，我们可以显示一个带有时间选择器的datepicker。现在，需要获取用户选择的日期和时间，以便进行后续处理。可以通过以下代码来获取时分秒信息：
var date = $('#datetimepicker').datepicker('getDate');
var hours = $('#datetimepicker').datetimepicker('getHours');
var minutes = $('#datetimepicker').datetimepicker('getMinutes');
var seconds = $('#datetimepicker').datetimepicker('getSeconds');以上代码中，getDate()方法用于获取日期信息，而getHours()、getMinutes()和getSeconds()方法则用于获取小时、分钟和秒数。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -- --------------------
----- ---------------- -------------------------------------------------------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------------------
------- -----------------------
------------ -
-------------------------------------
----------- -----------
--------------- ----
---
--------------------------------- -
--- ---- - -------------------------------------------
--- ----- - ------------------------------------------------
--- ------- - --------------------------------------------------
--- ------- - --------------------------------------------------
----------------------- - ---- - - - - ----- - --- - ------- - --- - ---------
---
---
---------
-------
------
-----
------ --------------------------------------
------ ----------- --------------------
------
-----
------- ---------------------------
------
-------
-------以上示例代码中，我们使用了jquery-ui-timepicker-addon插件来实现时间选择器的功能。当用户选择日期和时间后，可以通过点击“提交”按钮来获取结果并在控制台打印出来。
希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24782