datetimepicker-jquery 是一个基于 jQuery 的日期时间选择器插件，可以快速构建日期时间选择器功能，支持多种格式化日期和语言选项。
本篇教程将详细介绍 datetimepicker-jquery 的使用方法，包括如何安装、使用和自定义插件选项。
安装
使用 npm 安装 datetimepicker-jquery：
npm install datetimepicker-jquery --save
使用
引入插件
安装好插件后，需要在项目中引入插件：
<link rel="stylesheet" href="path/to/jquery.datetimepicker.css"> <script src="path/to/jquery.datetimepicker.js"></script>
初始化插件
将插件初始化并绑定到一个 input 元素上：
$(function () { $('#datetimepicker').datetimepicker(); });
这里的 #datetimepicker 是输入框的 ID，插件将绑定在这个输入框上。
选项
datetimepicker-jquery 支持多种选项，可以根据实际需求进行配置。
以下是一些常用的选项：
format：日期时间格式timepicker：是否显示时间选择器datepicker：是否显示日期选择器lang：语言选项minDate：最小日期时间maxDate：最大日期时间
可以在初始化时传入选项参数：
$('#datetimepicker').datetimepicker({ format: 'Y-m-d H:i', timepicker: true, datepicker: true, lang: 'zh', minDate: '2021/01/01', maxDate: '2022/12/31' });
事件
datetimepicker-jquery 还可以监听多种事件，比如选择日期时间后触发的事件。
例如，我们想在选择日期时间后打印选择的值：
$('#datetimepicker').datetimepicker({ onChangeDateTime: function (dp, $input) { console.log($input.val()); } });
自定义
datetimepicker-jquery 还支持自定义样式和选项。
样式
可以通过修改 CSS 文件来自定义样式。
例如，我们想将日期选择器的背景色改成蓝色：
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: blue; }
选项
datetimepicker-jquery 还允许自定义插件选项。
例如，我们想添加一个新的选项 showWeekNo，用于显示周数：
$.datetimepicker.setLocale('en', { showWeekNo: true }); $('#datetimepicker').datetimepicker({ lang: 'en' });
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----- ---------------- ------------------------------------------ ---------------------------- ---------- ------- ------ ------ ----------- -------------------- ------- ---------------------------------- ------- ------------------------------------------------- -------- ---------- -- - ------------------------------------- ------- ------ ----- ----------- ----- ----------- ----- ----- ----- -------- ------------- -------- ------------- ----------------- -------- ---- ------- - -------------------------- - --- --- --------- ------- -------展开代码
总结
datetimepicker-jquery 是一个功能强大的日期时间选择器插件，可以快速构建日期时间选择器功能。
本文详细介绍了 datetimepicker-jquery 的使用方法，包括如何安装、使用和自定义插件选项。
希望本文能对您在前端开发中使用 datetimepicker-jquery 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664d81e8991b448e26fb
