一、总结 一句话总结： 1、图标是字体样式：input右侧的字体图标是字体样式，所以要引入字体文件，随便找一个项目把内里的字体文件弄过来就ok了 2、多看官方文档：这个时间组件必要引入什么js，css，函数怎么调用，事件怎么初始化，官方的文档内里简直给的不能再详细了 二、amazeui时间组件测试 1、截图
2、代码 [code] <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/amazeui.min.css"> <link rel="stylesheet" href="css/amazeui.datetimepicker.css"> <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script src="js/jquery.min.js"></script> <script src="js/amazeui.min.js"></script> <script src="js/amazeui.datetimepicker.min.js"></script> <style> .datetimeTest{ width: 400px; margin:100px auto; border: 5px ridge #95a283; } .datetimeTest2{ width: 400px; margin:100px auto; border: 5px ridge #95a283; } </style> </head> <body> <!--官网下载地址及阐明文档--> <!--https://github.com/amazeui/datetimepicker--> <div class="datetimeTest" > <input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field"> </div> <div class="datetimeTest2"> <div class="am-input-group date" id="datetimepicker2" data-date="12-02-2012" data-date-format="yyyy-mm-dd hh:ii:ss"> <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly> <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span> </div> </div> <div class="datetimeTest2"> <div class="am-input-group date form_datetime-3" data-date="2015-02-14 14:45"> <input size="16" type="text" value="" class="am-form-field" readonly> <span class="add-on am-input-group-label"><i class="icon-remove am-icon-close"></i></span> <span class="add-on am-input-group-label"><i class="icon-th am-icon-calendar"></i></span> </div> </div> <script> $('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' }); $('#datetimepicker2').datetimepicker('update', new Date()); $('.form_datetime-3').datetimepicker('update', new Date()); </script> </body> </html>[/code]三、官网下载地址及详细阐明 https://github.com/amazeui/datetimepicker 利用阐明： 获取 Amaze UI Datetime Picker 引入 Datetime Picker 样式（[code]css[/code]目录下）以及 Amaze UI 样式： [code] <link rel="stylesheet" href="path/to/amazeui.min.css"/> <link rel="stylesheet" href="path/to/amazeui.datetimepicker.css"/>[/code]引入 jQuery 干系文件及 Datetime Picker JS 文件（下载包[code]js[/code]目录下）： [code] <script src="path/to/jquery.min.js"></script> <script src="path/to/amazeui.datetimepicker.min.js"></script>[/code]初始化 Datetime Picker: [code] <input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field">[/code] [code] $('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' });[/code]调用方法 设置时间格式：[code]format[/code]选项 [code] <input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field">[/code] [code] $('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' });[/code]也可以通过[code]data-date-format[/code]来设置时间格式 [code] <input type="text" value="2015-02-14 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">[/code] [code] $('#datetimepicker').datetimepicker();[/code]四、插件引入项目不工作的问题 1、多去F12控制台查看错误提示，js的我就是没有这个意识，还折腾半天 2、js不工作就去查看控制台
就会发现是因为jquery在时间插件js的背面引入而引起的 到此这篇关于amazeui时间组件的实现示例的文章就先容到这了,更多干系amazeui 时间组件内容请搜刮脚本之家从前的文章或继承浏览下面的干系文章，盼望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/741145.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-10 07:17 , Processed in 0.031566 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
