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. ORACLE11g R2【单实例 FS→单实例FS】

    ORACLE11g R2[单实例 FS→单实例FS] 本演示案例所用环境:   primary standby OS Hostname pry std OS Version RHEL6.5 RHEL6 ...

  2. visual studio code 中 debugger for chrome 插件的配置

    安装 debugger for chrome 插件后,把默认的 launch.json 改成: { "name": "谷歌浏览器", "type&qu ...

  3. vb.net structure 定义静态数组

    Const RAS95_MaxEntryName = 256 Const RAS95_MaxDeviceName = 128 Const RAS_MaxDeviceType = 16 Structur ...

  4. Redo 非current损坏

    Redo log 文件损坏或丢失,在启动数据库时在alert日志中会有如下错误: ORA-00313: open failed for members of log group 1 of thread ...

  5. Altium Designer如何调整鼠标形状

    在 里面有一个

  6. .netcore下的微服务、容器、运维、自动化发布

    原文:.netcore下的微服务.容器.运维.自动化发布 微服务 1.1     基本概念 1.1.1       什么是微服务? 微服务架构是SOA思想某一种具体实现.是一种将单应用程序作为一套小型 ...

  7. 微服务实践（五）：微服务的事件驱动数据管理 - DockOne.io

    原文:微服务实践(五):微服务的事件驱动数据管理 - DockOne.io [编者的话]本文是使用微服务创建应用系列的第五篇文章.第一篇文章介绍了微服务架构模式,并且讨论了使用微服务的优缺点:第二和第 ...

  8. PHP与Linux进程间的通信

    进程间通信预计是公司考察应届毕业生的必考点(嵌入式行业).当然非常多公司考的是算法. 不查阅资料,我脑子里能想到的 [1] 管道, (有名.无名) [2] 父子进程 [3] System V (消息队 ...

  9. C#调用oracle存储过程自定义表类型

    http://blog.csdn.net/studyzy/article/details/11524527

  10. 每日技术总结：setInterval,setTimeout,文本溢出,小程序，wepy

    前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...