帝王谷资源网 Design By www.wdxyy.com
一、总结
一句话总结:
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--> <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>
三、官网下载地址及详细说明
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,时间组件
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年06月26日
2024年06月26日
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]