jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间

以下是一个使用jQuery UI DateTimePicker插件的简单示例，演示了如何在网页中同时显示日期和时间、只显示日期、以及只选择时间。

1. 首先，确保你已经包含了jQuery和jQuery UI库以及DateTimePicker插件的CSS和JS文件。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.min.js"></script>
 
<style>
    .only-date .ui-datepicker-calendar,.ui-timepicker-div .ui-timepicker-hour,.ui-timepicker-div .ui-timepicker-minute { display:none; }
    .only-time .ui-datepicker-calendar { display:none; }
</style>

2. 接着，在HTML中添加一个输入框来显示日期时间选择器。

<input id="datetimepicker" />
<input id="datepicker" class="only-date" />
<input id="timepicker" class="only-time" />

3. 最后，使用jQuery初始化DateTimePicker并设置相应的选项。

$(function() {
    $("#datetimepicker").datetimepicker();
 
    $("#datepicker").datetimepicker({
        dateFormat: 'yy-mm-dd',
        timeFormat: 'HH:mm'
    });
 
    $("#timepicker").datetimepicker({
        dateFormat: 'yy-mm-dd',
        timeFormat: 'HH:mm'
    });
});

这个示例代码展示了如何同时使用DateTimePicker插件来选择日期和时间，以及如何通过CSS样式隐藏日期和时间部分，只显示需要的部分。