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-->

 <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

使用说明：

  1. 获取 Amaze UI Datetime Picker
  1. 引入 Datetime Picker 样式（css 目录下）以及 Amaze UI 样式：
<link rel="stylesheet" href="path/to/amazeui.min.css"/>

<link rel="stylesheet" href="path/to/amazeui.datetimepicker.css"/>
  1. 引入 jQuery 相关文件及 Datetime Picker JS 文件（下载包 js 目录下）：
<script src="path/to/jquery.min.js"></script>

<script src="path/to/amazeui.datetimepicker.min.js"></script>
  1. 初始化 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时间组件测试的更多相关文章

  1. surging如何使用swagger 组件测试业务模块

    1.前言 微服务架构概念的提出已经有非常长一段时间了,但在近期几年却开始频繁地出现,大家都着手升级成微服务架构,使用着各种技术,大家认为框架有服务治理就是微服务,实现单一协议的服务调用,微服务虽然没有 ...

  2. javascript学习之时间组件

    写了一个时间组件,哪里需要哪里调(菜鸟级别,大牛路过就Ok了): 先有一个HTML文件: <!doctype> <html> <head> <title> ...

  3. yii2超好用的日期组件和时间组件

    作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  4. laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题

    遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题); 解决办法: 给laydate绑定id; 解决前代码: <input ...

  5. laydate时间组件

    laydate时间组件使用笔记 /*! laydate-v5.0.9 日期与时间组件 MIT License http://www.layui.com/laydate/ By 贤心 */ ;!func ...

  6. stenciljs 学习八 组件测试

    测试对于框架来说比较重要,对于web 组件的测试同样很重要,类似的jest 很方便,stenciljs也是基于jest 开发的 包含两个核心api render(), flush() 测试配置 pac ...

  7. iView开始结束时间组件

    演示地址:https://run.iviewui.com/TGIKGkIt 测试页面文件: <template> <div> <startEndTime @newEndT ...

  8. AlwaysOn 同步时间的测试

    背景 <SQL Server 2012实施与管理实战指南>中指AlwaysON同步过程如下: 任何一个SQL Server里都有个叫Log Writer的线程,当任何一个SQL用户提交一个 ...

  9. AmazeUI常用组件

    按钮样式 <span class="am-badge">1</span>  #正方形 <span class="am-badge am-ba ...

随机推荐

  1. Nginx日志优化

    一 日志轮训切割 [root@centos7 tools]# cat nginx_log.sh #!/bin/bash cd /var/log/nginx/ &&\ /bin/mv a ...

  2. JS 数字格式千分位相互转换

    /** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousa ...

  3. 软件——机器学习与Python，Python3的输出与输入

    输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, world') p ...

  4. Hibernate3.5.4---java application的xml和annotation环境搭建（hibernate.cfg.xml配置文件说明，映射文件Student.hbm.xml说明

    http://blog.csdn.net/centre10/article/details/6050466 来自于:http://blog.csdn.net/centre10/article/deta ...

  5. SSH进阶（2）——用Struts拦截器实现登陆限制

    拦截器从字面意思来看就是限制.限制用户訪问某些网页.在Action提出请求之前用拦截器来做权限设置,让符合的用户跳入对应的界面中.近期做的一个商城项目中就用到了自己定义的拦截器,实现了一个简单的ses ...

  6. 【例题 6-14 UVA-816】Abbott's Revenge

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 预处理出某个方向的左边.前边.右边是哪个方向就好了. 然后就是普通的bfs了. hash存到某个点,走到这里的方向的最小距离. df ...

  7. [Android5.1]ActivityManagerService启动过程分析

    ActivityManagerService(简称AMS)是Android系统的关键服务之中的一个.它的主要作用例如以下: 管理系统中全部应用进程的整个生命周期 管理应用进程中的Activity.Se ...

  8. java学习笔记之基础语法（一）

    1.java语言基础由关键字.标识符.注释.常量和变量.运算符.语句.函数和数组等组成. 2.1关键字 定义:被java语言赋予了特殊含义的单词 特点:关键字中所有的字母都是小写. 2.2用于定义数据 ...

  9. 2019年Angular7——安装搭建路由

    Angular 中文官方:https://www.angular.cn/ 为什么要看Angular?我也不知道,因为公司有个Angular的项目要维护.听说Angular的版本已经到7了.以前没怎么玩 ...

  10. Maven项目中mvn clean后找不到測试类问题

    在Maven项目中进行单元測试,但mvn clean后又一次mvn install项目,再次进行单元測试.会有下面的错误. <span style="font-family:KaiTi ...