amazeui時间部件✤的完成实例

日期：2021-03-24 类型：科技新闻 

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

一、小结

一句话小结：

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

 应用表明：

获得 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不工作中就要查询操纵台

便会发觉是由于jquery在時间软件js的后边引进而造成的

到此这篇有关amazeui時间部件的完成实例的文章内容就详细介绍到这了,大量有关amazeui 時间部件內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：提升一个网站如何追逐敌人？ 返回下一篇：没有了