amazeui时间组件的实现示例


Posted in HTML / CSS onAugust 18, 2020

一、总结

一句话总结:

1、图标是字体样式:input右侧的字体图标是字体样式,所以要引入字体文件,随便找一个项目把里面的字体文件弄过来就ok了

2、多看官方文档:这个时间组件需要引入什么js,css,函数怎么调用,事件怎么初始化,官方的文档里面简直给的不能再详细了

二、amazeui时间组件测试

1、截图

amazeui时间组件的实现示例

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不工作就去查看控制台

amazeui时间组件的实现示例

就会发现是因为jquery在时间插件js的后面引入而引起的

到此这篇关于amazeui时间组件的实现示例的文章就介绍到这了,更多相关amazeui 时间组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 #HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 #HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 #HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 #HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 #HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 #HTML / CSS
AmazeUI 面板的实现示例
Aug 17 #HTML / CSS
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
用Python解决x的n次方问题
2019/02/08 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python实现双色球随机选号
2020/01/01 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
《有趣的发现》教学反思
2014/04/15 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
骨干教师申报材料
2014/12/17 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL