amaze软件(amazeui时间组件的实现示例)
类别:Web前端 浏览量:2503
时间:2021-10-20 08:44:36 amaze软件
amazeui时间组件的实现示例一、总结
一句话总结:
1、图标是字体样式:input右侧的字体图标是字体样式,所以要引入字体文件,随便找一个项目把里面的字体文件弄过来就ok了
2、多看官方文档:这个时间组件需要引入什么js,css,函数怎么调用,事件怎么初始化,官方的文档里面简直给的不能再详细了
二、amazeui时间组件测试
1、截图
2、代码
<!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--> <li class="datetimeTest" > <input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field"> </li> <li class="datetimeTest2"> <li 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> </li> </li> <li class="datetimeTest2"> <li 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> </li> </li> <script> $('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' }); $('#datetimepicker2').datetimepicker('update', new Date()); $('.form_datetime-3').datetimepicker('update', new Date()); </script> </body> </html>
三、官网下载地址及详细说明
https://github.com/amazeui/datetimepicker
使用说明:
获取 Amaze UI Datetime Picker
直接下载
引入 Datetime Picker 样式(css
目录下)以及 Amaze UI 样式:
<link rel="stylesheet" href="path/to/amazeui.min.css"/> <link rel="stylesheet" href="path/to/amazeui.datetimepicker.css"/>
引入 jQuery 相关文件及 Datetime Picker JS 文件(下载包js
目录下):
<script src="path/to/jquery.min.js"></script> <script src="path/to/amazeui.datetimepicker.min.js"></script>
初始化 Datetime Picker:
<input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field">
$('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' });
调用方法
设置时间格式:format
选项
<input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field">
$('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' });
也可以通过data-date-format
来设置时间格式
<input type="text" value="2015-02-14 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">
$('#datetimepicker').datetimepicker();
四、插件引入项目不工作的问题
1、多去F12控制台查看错误提示,js的我就是没有这个意识,还折腾半天
2、js不工作就去查看控制台
就会发现是因为jquery在时间插件js的后面引入而引起的
到此这篇关于amazeui时间组件的实现示例的文章就介绍到这了,更多相关amazeui 时间组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- 小程序ui设计样式(AmazeUI 平滑滚动效果的示例代码)
- 2020app前端ui框架(amazeui页面分析之登录页面的示例代码)
- amazeui 费用(AmazeUI的下载配置与Helloworld的实现)
- 前端app开发适配消息栏(AmazeUI 导航条的实现示例)
- ui界面的测试用例(AmazeUI中模态框的实现)
- amazeui图标(AmazeUI 折叠面板的实现代码)
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- 安卓app开发用什么设计ui(AmazeUI框架搭建的方法步骤图文)
- 前端树结构数据很多怎么展示(amazeui树节点自动展开折叠面板并选中第一个树节点的实现)
- 后端ui框架排名(前后端结合实现amazeUI分页效果)
- 小程序推荐ui库(AmazeUI 列表的实现示例)
- 小程序ui图与移动ui(AmazeUI 缩略图的实现示例)
- 前端轮播图效果(AmazeUI图片轮播效果的示例代码)
- treeview怎么加载节点(AmazeUi Tree树形结构 应用小结)
- amazeui怎么设置侧边栏(AmazeUI 等分网格的实现示例)
- 前端表单验证(AmazeUI的JS表单验证框架实战示例分享)
- 越南特产(越南特产首饰)
- TVB负评王连续挑战警察角色《使徒行者3》中将饰演卧底(TVB负评王连续挑战警察角色使徒行者3中将饰演卧底)
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
热门推荐
- php上传大文件教程(PHP实现带进度条的Ajax文件上传功能示例)
- python 怎么解析中文(Python中一般处理中文的几种方法)
- docker容器使用redis服务(在Docker中使用Redis的步骤详解)
- 微信公众号怎么获取用户openid(微信公众平台开发教程①获取用户Openid及个人信息图文详解)
- js柯里函数的应用场景(深入详解JS函数的柯里化)
- python 微信二维码接口(python实现微信防撤回神器)
- MVC过滤器的用法
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- linuxmongodb安装路径(Linux安装MongoDB启动及常见问题解决)
- python numpy 安装(python3.6下Numpy库下载与安装图文教程)