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. php网页跳转无法获取session值

    今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...

  2. 51Nod——N1284 2 3 5 7的倍数

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1284 基准时间限制:1 秒 空间限制:131072 KB 分值: 5  ...

  3. Ubuntu 14.04安装teamviewer 远程桌面

    teamviewer 真是一款非常强大的远程登录软件,可以跨Windows和Ubuntu远程登录,但是在64bit的Ubuntu下安装时,按照官方安装方法总是会遇到问题,下面说一下如何安装: 安装i3 ...

  4. python获取序列中最大值

    test =[ [1, 2, 3], [4, 5, 6], [7, 8, 9]]   #这个就可以看做是二维数组了,直接创建print(test)print(test[:][1])           ...

  5. [React Intl] Use a react-intl Higher Order Component to format messages

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...

  6. php实现 查找输入整数二进制中1的个数

    php实现 查找输入整数二进制中1的个数 一.总结 一句话总结: 1.if($j&intval($num)){}的作用是什么? 1 <?php 2 while($num=trim(fge ...

  7. C语言深度剖析-----函数

    认清函数的真面目 函数的意义 面向过程的程序设计 函数声明和定义 函数参数 编写代码的时候,不要编写类似先后调用的代码 f(k,k++) C语言中的顺序点 a--&&a  ,& ...

  8. Java中compareTo()方法比较字符串详解

    中心:String 是字符串,它的比较用compareTo方法,它从第一位开始比较, 如果遇到不同的字符,则马上返回这两个字符的ascii值差值.返回值是int类型 1.当两个比较的字符串是英文且长度 ...

  9. python中有关字符串的处理

    原文 Python 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) 去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字 ...

  10. Spring的任务调度@Scheduled注解——task:scheduler和task:executor的解析

    原文地址: https://blog.csdn.net/yx0628/article/details/80873774 一个简单的Spring定时任务的 demo,全部代码见下载地址:https:// ...