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. C8815 用 USB网卡（Asix AX88772 ）上网

    C8815 用 USB网卡(Asix AX88772 )上网 C8815不支持给USB外设供电,不过可以使用自供电的OTG线带动USB设备 C8815最新固件中没有Asix AX88772驱动,需要自 ...

  2. C# 文件转byte数组，byte数组再转换文件

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  3. 【习题 6-11 UVA - 10410】Tree Reconstruction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以先确定当前这棵子树的dfs序的范围. 然后第一个元素肯定是这棵子树的根节点. 那么只要在这棵子树的范围里面枚举节点. 看看有没有 ...

  4. 洛谷 P1211 [USACO1.3]牛式 Prime Cryptarithm

    P1211 [USACO1.3]牛式 Prime Cryptarithm 题目描述 下面是一个乘法竖式,如果用我们给定的那n个数字来取代*,可以使式子成立的话,我们就叫这个式子牛式. *** x ** ...

  5. 并发，one

    引言 最近工作当中写了一个有关并发的程序,引起了LZ对并发的强烈兴趣.这一下一发不可收拾,LZ用了一个多星期,看完了这本共280+页的并发编程书.之所以能看这么快,其实这主要归功于,自己之前对并发就有 ...

  6. 如何把别人的原理图和pcb图建立一个完整的工程

    这里是我从网友那里下载的pcb图和原理图 我们怎么通过这两个文件建立一个完整的工程 我们选中pcb图文件,通过下面的操作,就可以导出pcb封装库: 同样的方法,我选中pcb图,然后用下面图的方法,就可 ...

  7. jvisualvm 工具使用

    VisualVM 是Netbeans的profile子项目,已在JDK6.0 update 7 中自带(java启动时不需要特定参数,监控工具在bin/jvisualvm.exe). https:// ...

  8. Mosquito的优化——订阅树优化（八）

    本文由逍遥子撰写.转发请标注原址: http://blog.csdn.net/houjixin/article/details/46413783 或 http://houjixin.blog.163. ...

  9. memcached缓存分布式部署方案

    一.分布式方案介绍 比较流行的两种方案: 1.取余分布: 计算key的哈希值,与服务器数量取余,得到目标服务器.优点:实现简单,当某台服务器不可用时,故障转移方便:缺点:当增减服务器时, Key与服务 ...

  10. LA 3887 - Slim Span 枚举+MST

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...