amazeui-js插件-ui增强-日期组件如何使用（把实例做一下）

一、总结

一句话总结：需要jquery.js和amazeui.js一切才能使用

1、amazeui中的各种js效果要怎么才能使用？

解答：需要jquery.js和amazeui.js一起才能使用。

2、html中如何引入一个css？

解答：用link标签，有个rel属性是stylesheet，然后href是引入的css的地址，link rel="stylesheet" href="css/amazeui.min.css"。

3、html中如何引入一个js？

解答： javascript标签，里面的src是要引入的js的路径，和img标签很像了，script src="js/jquery.min.js" script。

4、html中margin如何设置自动居中？

解答：需要先设置width，然后用margin：auto 。

5、html中的margin的参数是什么情况（有一个时，两个，四个）？

解答：四个：上又下左。两个：上下左右。一个：全部。

6、html中的border的几个参数是什么情况？

解答：依次是是边框宽度，边框样式，边框颜色。那说明是边框宽度最重要

7、html边框样式中需要记住哪个属性？

解答：ridge 。

8、html样式中的点和#号分别代表什么？

解答：点号代表类，#号代表id 。

9、如何使用amazeui的日期js插件？

解答：在input上面加上data-am-datepicker 当然和 readonly一起配合使用效果更佳，form上面也可以加上data-am-validator 。

10、让input不可以操作的两个属性是什么？

解答： readonly和disabled。

11、amazeui时间组件如何使用？

解答：日期组件上面有时间组件的github链接，而时间组件的github上面有使用的详细说明。

12、非 `input` 触发元素如何使用amazeui的日期js插件？

解答：非 input>触发元素需增加 .am-datepicker-add-on class。。结合 .am-input-group 使用，父类添加 class .am-datepicker-date ，非input>触发元素需增加 .am-datepicker-add-on class。 span class="am-input-group-btn am-datepicker-add-on" 。

13、amazeui的日期js插件如何更改颜色？

解答：通过theme属性，data-am-datepicker="{theme: 'success'}" 。

14、amazeui的日期js插件如何更改视图（就是选择的时候只显示年，还是年月日一起显示）？

解答：data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}" 。

15、amazeui的日期js插件有几种视图？

解答：三种：days: 显示天（默认，months: 显示月，years: 显示年。

16、amazeui的日期js插件更改多参数中间用什么符号连接？

解答：逗号，data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}"。

17、amazeui的日期js插件如何限制视图，比如限制只能选择到月份？

解答：data-am-datepicker="{format: 'yyyy-mm', viewMode: 'years', minViewMode: 'months'}" 。

18、amazeui的日期js插件如何限制只能选择到年份的时候的注意事项是什么？

解答：注意 format: 'yyyy ' 里面 yyyy 后面多加一个空格。 data-am-datepicker="{format: 'yyyy ', viewMode: 'years', minViewMode: 'years'}"。

19、amazeui的日期js插件如何用js操作？

解答：通过监听自定义事件 changeDate，可以在回调函数中进行验证等操作。通过 $().data('date') 获取改变后的日期。。

$('#my-start').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() > endDate.valueOf()) {
          $alert.find('p').text('开始日期应小于结束日期！').end().show();
        } else {
          $alert.hide();
          startDate = new Date(event.date);
          $('#my-startDate').text($('#my-start').data('date'));
        }
        $(this).datepicker('close');
      });

20、jquery中如何带事件event对象？

解答：参数传进来即可，$('#my-start').datepicker(). on('changeDate.datepicker.amui', function(event) {}。

21、amazeui的日期js插件可以设置禁止选择日期么？

解答：可以，初始化的时候通过 onRender 选项设置禁用日期。。

22、如何使用amazeui的日期js插件（两种方法）？

解答：添加 data-am-datepicker 属性，并设置相关选项，input class="" data-am-datepicker="{format: 'yyyy-mm'}"。通过 $().datepicker(options) 调用。$('#my-datepicker').datepicker({format: 'yyyy-mm'}); 。

23、amazeui的日期js插件如何设置语言？

解答：用locale属性，data-am-datepicker="{locale: 'en_US'}" 。

二、自己实例

1、截图

2、代码

 1 <!DOCTYPE html>
 2 <html lang="cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="css/amazeui.min.css">
 7     <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
 8     <script src="js/jquery.min.js"></script>
 9     <script src="js/amazeui.min.js"></script>
10     <style>
11         .testCenter{
12             /*有宽度之后加margin：auto才能实现自动居中*/
13             width: 400px;
14             height: 300px;
15             margin:100px auto;
16             border: 15px ridge #0b6fa2;
17             background: bisque;
18 
19         }
20         .formStyle{
21             width: 200px;
22             margin:100px auto;
23         }
24     </style>
25 </head>
26 <body>
27 <div class="testCenter" >
28     <div class="formStyle">
29         <form action="" class="am-form" data-am-validator>
30             <p>
31                 <input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
32             </p>
33             <p><button class="am-btn am-btn-primary">提交</button></p>
34         </form>
35     </div>
36 </div>
37 
38 </body>
39 </html>

三、amazeui日期组件如何使用文档

日期选择插件。需要时间选择的参见：DateTimePicker - 日期时间选择插件。

注意：

在触控设备上， <input> 获得焦点时会激活键盘，部分浏览器添加 readonly 属性以后可禁止键盘激活。

使用演示

基本形式

在 <input> 上增加 data-am-datepicker 属性，调用日期插件。

Copy

<form action="" class="am-form" data-am-validator>
  <p>
  <input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
  </p>
  <p><button class="am-btn am-btn-primary">提交</button></p>
</form>

结合组件使用

结合 .am-input-group 使用，父类添加 class .am-datepicker-date ，非 <input> 触发元素需增加 .am-datepicker-add-on class。

Copy

<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'dd-mm-yyyy'}">
  <input type="text" class="am-form-field" placeholder="日历组件" readonly>
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
</div>

更改颜色

默认为蓝色，设置 theme 选项可改变颜色：

success: 绿色
warning: 橙色
danger: 红色

Copy

<p><input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker="{theme: 'success'}" readonly/></p>

视图模式

通过参数 viewMode 设置日历初始视图模式：

days: 显示天（默认）
months: 显示月
years: 显示年

Copy

<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
  <input type="text" class="am-form-field" placeholder="日历组件" readonly>
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
</div>

限制视图模式

设置参数 minViewMode 可以限制视图模式。下面的示例中限制了只能选择到月份：

Copy

<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm', viewMode: 'years', minViewMode: 'months'}">
  <input type="text" class="am-form-field" placeholder="日历组件" readonly>
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
</div>

只能选择年份：

注意 format: 'yyyy ' 里面 yyyy 后面多加一个空格。

Copy

<div>
  <input type="text" class="am-form-field" data-am-datepicker="{format: 'yyyy ', viewMode: 'years', minViewMode: 'years'}" placeholder="日历组件" data-am-datepicker readonly/>
</div>

自定义事件

通过监听自定义事件 changeDate，可以在回调函数中进行验证等操作。通过 $().data('date') 获取改变后的日期。

Copy

2014-12-20

2018-06-20

<div class="am-alert am-alert-danger" id="my-alert" style="display: none">
  <p>开始日期应小于结束日期！</p>
</div>
<div class="am-g">
  <div class="am-u-sm-6">
    <button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始日期</button><span id="my-startDate">2014-12-20</span>
  </div>
  <div class="am-u-sm-6">
    <button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束日期</button><span id="my-endDate">2014-12-25</span>
  </div>
</div>
<script>
  $(function() {
    var startDate = new Date(2014, 11, 20);
    var endDate = new Date(2014, 11, 25);
    var $alert = $('#my-alert');
    $('#my-start').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() > endDate.valueOf()) {
          $alert.find('p').text('开始日期应小于结束日期！').end().show();
        } else {
          $alert.hide();
          startDate = new Date(event.date);
          $('#my-startDate').text($('#my-start').data('date'));
        }
        $(this).datepicker('close');
      });

    $('#my-end').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() < startDate.valueOf()) {
          $alert.find('p').text('结束日期应大于开始日期！').end().show();
        } else {
          $alert.hide();
          endDate = new Date(event.date);
          $('#my-endDate').text($('#my-end').data('date'));
        }
        $(this).datepicker('close');
      });
  });
</script>

设置禁止选择日期

初始化的时候通过 onRender 选项设置禁用日期。

v2.5：onRender 方法增加了 viewMode 参数，以便更准确的处理不同视图渲染。

viewMode 内部调用时使用了以下值：

0: 天视图
1: 月视图
2: 年视图

Copy

设置禁用日期

禁用日期

<div class="am-g">
  <div class="am-u-sm-6">
    设置禁用日期<br/>
    <p><input type="text" class="am-form-field" placeholder="今天之前的日期被禁用" id="my-start-2"/></p>
  </div>
  <div class="am-u-sm-6">
    禁用日期<br/>
    <p><input type="text" class="am-form-field" id="my-end-2" /></p>
  </div>
</div>
<script>
  $(function() {
    var nowTemp = new Date();
    var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
    var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
    var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
    var $myStart2 = $('#my-start-2');

    var checkin = $myStart2.datepicker({
      onRender: function(date, viewMode) {
        // 默认 days 视图，与当前日期比较
        var viewDate = nowDay;

        switch (viewMode) {
          // moths 视图，与当前月份比较
          case 1:
            viewDate = nowMoth;
            break;
          // years 视图，与当前年份比较
          case 2:
            viewDate = nowYear;
            break;
        }

        return date.valueOf() < viewDate ? 'am-disabled' : '';
      }
    }).on('changeDate.datepicker.amui', function(ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
          var newDate = new Date(ev.date)
          newDate.setDate(newDate.getDate() + 1);
          checkout.setValue(newDate);
        }
        checkin.close();
        $('#my-end-2')[0].focus();
    }).data('amui.datepicker');

    var checkout = $('#my-end-2').datepicker({
      onRender: function(date, viewMode) {
        var inTime = checkin.date;
        var inDay = inTime.valueOf();
        var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

        // 默认 days 视图，与当前日期比较
        var viewDate = inDay;

        switch (viewMode) {
          // moths 视图，与当前月份比较
          case 1:
            viewDate = inMoth;
            break;
          // years 视图，与当前年份比较
          case 2:
            viewDate = inYear;
            break;
        }

        return date.valueOf() <= viewDate ? 'am-disabled' : '';
      }
    }).on('changeDate.datepicker.amui', function(ev) {
      checkout.close();
    }).data('amui.datepicker');
  });
</script>

调用方式

通过 Data API

添加 data-am-datepicker 属性，并设置相关选项。

Copy

<input class="" data-am-datepicker="{format: 'yyyy-mm'}"/>

JS 调用

通过 $().datepicker(options) 调用。

Copy

$('#my-datepicker').datepicker({format: 'yyyy-mm'});

方法说明

方法名称	描述
`.datepicker('open')`	显示日历
`.datepicker('close')`	隐藏日历
`.datepicker('place')`	更新调用`datepicker`的相对位置
`.datepicker('setValue', value)`	设置`Datepicker`新值

选项说明

format: 日期格式，默认为 yyyy-mm-dd，可以选择 yy/mm/dd 、mm/dd、dd/mm/yyyy、dd/mm/yy、dd/mm等，中间分隔符可以使用 /、-、。
viewMode: 日期选择器初始视图模式，string|integer，默认为 0，可选值 days、months、years或者对应的 0、1、2。
minViewMode: 日期选择器初始视图模式限制，string|integer，默认为 0，可选值days、months、years或者对应的 0、1、2。
onRender: 渲染日历时调用的函数，比如 .am-disabled 设置禁用日期。
theme: 设置日期颜色主题，可选值为 success、danger、warning，对应为绿色、红色、橙色，默认为蓝色。
locale: 语言设置, 可选值为 zh_CN、en_US，默认为中文。
autoClose: 日期选定以后是否自动关闭日期选择器, 默认为 true (仅在 days 视图有效)。

设置 viewMode 和 minViewMode 需要注意日期格式 format 的设置。

事件说明

选择日期时，通过查看控制台选择的日期。

Copy

$(function() {
  $('#doc-datepicker').datepicker().
    on('changeDate.datepicker.amui', function(event) {
      console.log(event.date);
    });
});

事件名称	描述
`changeDate.datepicker.amui`	日期改变时触发

语言扩展

内置英语和简体中文支持，默认为中文，要支持更多语言可以通过 Datepicker.locales 扩展。

设置语言：

Copy

<p>
  <input type="text" class="am-form-field" placeholder="YYYY-MM-DD"
         data-am-datepicker="{locale: 'en_US'}" readonly/>
</p>

扩展语言：

Copy

<p>
  <input type="text" class="am-form-field" placeholder="来一丢丢 French"
         data-am-datepicker="{locale: 'fr', autoClose: 0}" readonly/>
</p>

<script>
(function($) {
  $.AMUI && $.AMUI.datepicker && ($.AMUI.datepicker.locales.fr = {
    days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
    daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"],
    daysMin: ["D", "L", "Ma", "Me", "J", "V", "S", "D"],
    months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
    monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jui", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    weekStart: 1
  });
})(window.jQuery);
</script>

Issue 列表

Bug: 表单验证与日期插件结合使用问题

四、测试题-简答题

1、amazeui中的各种js效果要怎么才能使用？

解答：需要jquery.js和amazeui.js一起才能使用。

2、html中如何引入一个css？

解答：用link标签，有个rel属性是stylesheet，然后href是引入的css的地址，link rel="stylesheet" href="css/amazeui.min.css"。

3、html中如何引入一个js？

解答： javascript标签，里面的src是要引入的js的路径，和img标签很像了，script src="js/jquery.min.js" script。

4、html中margin如何设置自动居中？

解答：需要先设置width，然后用margin：auto 。

5、html中的margin的参数是什么情况（有一个时，两个，四个）？

解答：四个：上又下左。两个：上下左右。一个：全部。

6、html中的border的几个参数是什么情况？

解答：依次是是边框宽度，边框样式，边框颜色。那说明是边框宽度最重要

7、html边框样式中需要记住哪个属性？

解答：ridge 。

8、html样式中的点和#号分别代表什么？

解答：点号代表类，#号代表id 。

9、如何使用amazeui的日期js插件？

解答：在input上面加上data-am-datepicker 当然和 readonly一起配合使用效果更佳，form上面也可以加上data-am-validator 。

10、让input不可以操作的两个属性是什么？

解答： readonly和disabled。

11、amazeui时间组件如何使用？

解答：日期组件上面有时间组件的github链接，而时间组件的github上面有使用的详细说明。

12、非 `input` 触发元素如何使用amazeui的日期js插件？

13、amazeui的日期js插件如何更改颜色？

解答：通过theme属性，data-am-datepicker="{theme: 'success'}" 。

14、amazeui的日期js插件如何更改视图（就是选择的时候只显示年，还是年月日一起显示）？

解答：data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}" 。

15、amazeui的日期js插件有几种视图？

解答：三种：days: 显示天（默认，months: 显示月，years: 显示年。

16、amazeui的日期js插件更改多参数中间用什么符号连接？

解答：逗号，data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}"。

17、amazeui的日期js插件如何限制视图，比如限制只能选择到月份？

解答：data-am-datepicker="{format: 'yyyy-mm', viewMode: 'years', minViewMode: 'months'}" 。

18、amazeui的日期js插件如何限制只能选择到年份的时候的注意事项是什么？

解答：注意 format: 'yyyy ' 里面 yyyy 后面多加一个空格。 data-am-datepicker="{format: 'yyyy ', viewMode: 'years', minViewMode: 'years'}"。

19、amazeui的日期js插件如何用js操作？

解答：通过监听自定义事件 changeDate，可以在回调函数中进行验证等操作。通过 $().data('date') 获取改变后的日期。。

$('#my-start').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() > endDate.valueOf()) {
          $alert.find('p').text('开始日期应小于结束日期！').end().show();
        } else {
          $alert.hide();
          startDate = new Date(event.date);
          $('#my-startDate').text($('#my-start').data('date'));
        }
        $(this).datepicker('close');
      });

20、jquery中如何带事件event对象？

解答：参数传进来即可，$('#my-start').datepicker(). on('changeDate.datepicker.amui', function(event) {}。

21、amazeui的日期js插件可以设置禁止选择日期么？

解答：可以，初始化的时候通过 onRender 选项设置禁用日期。。

22、如何使用amazeui的日期js插件（两种方法）？

23、amazeui的日期js插件如何设置语言？

解答：用locale属性，data-am-datepicker="{locale: 'en_US'}" 。

相关阅读:
3.Linux系统信息
 2.LINUX常用命令
 1.CMD命令
 8.变量内存CPU原理
 17.I/O系统访问方式和类型
 16.磁盘调度
 15.大容量存储结构
 cluvfy comp命令用法
 禁用DRM
Oracle数据库升级前必要的准备工作
原文地址：https://www.cnblogs.com/Renyi-Fan/p/9139038.html

amazeui-js插件-ui增强-日期组件如何使用（把实例做一下）

amazeui-js插件-ui增强-日期组件如何使用（把实例做一下）

一、总结

一句话总结：需要jquery.js和amazeui.js一切才能使用

1、amazeui中的各种js效果要怎么才能使用？

2、html中如何引入一个css？

3、html中如何引入一个js？

4、html中margin如何设置自动居中？

5、html中的margin的参数是什么情况（有一个时，两个，四个）？

6、html中的border的几个参数是什么情况？

7、html边框样式中需要记住哪个属性？

8、html样式中的点和#号分别代表什么？

9、如何使用amazeui的日期js插件？

10、让input不可以操作的两个属性是什么？

11、amazeui时间组件如何使用？

12、非 input 触发元素如何使用amazeui的日期js插件？

13、amazeui的日期js插件如何更改颜色？

14、amazeui的日期js插件如何更改视图（就是选择的时候只显示年，还是年月日一起显示）？

15、amazeui的日期js插件有几种视图？

16、amazeui的日期js插件更改多参数中间用什么符号连接？

17、amazeui的日期js插件如何限制视图，比如限制只能选择到月份？

18、amazeui的日期js插件如何限制只能选择到年份的时候的注意事项是什么？

19、amazeui的日期js插件如何用js操作？

20、jquery中如何带事件event对象？

21、amazeui的日期js插件可以设置禁止选择日期么？

22、如何使用amazeui的日期js插件（两种方法）？

23、amazeui的日期js插件如何设置语言？

二、自己实例

1、截图

2、代码

三、amazeui日期组件如何使用文档

使用演示

基本形式

结合组件使用

更改颜色

视图模式

限制视图模式

自定义事件

设置禁止选择日期

调用方式

通过 Data API

JS 调用

方法说明

选项说明

事件说明

语言扩展

Issue 列表

四、测试题-简答题

1、amazeui中的各种js效果要怎么才能使用？

2、html中如何引入一个css？

3、html中如何引入一个js？

4、html中margin如何设置自动居中？

5、html中的margin的参数是什么情况（有一个时，两个，四个）？

6、html中的border的几个参数是什么情况？

7、html边框样式中需要记住哪个属性？

8、html样式中的点和#号分别代表什么？

9、如何使用amazeui的日期js插件？

10、让input不可以操作的两个属性是什么？

11、amazeui时间组件如何使用？

12、非 input 触发元素如何使用amazeui的日期js插件？

13、amazeui的日期js插件如何更改颜色？

14、amazeui的日期js插件如何更改视图（就是选择的时候只显示年，还是年月日一起显示）？

15、amazeui的日期js插件有几种视图？

16、amazeui的日期js插件更改多参数中间用什么符号连接？

17、amazeui的日期js插件如何限制视图，比如限制只能选择到月份？

18、amazeui的日期js插件如何限制只能选择到年份的时候的注意事项是什么？

19、amazeui的日期js插件如何用js操作？

20、jquery中如何带事件event对象？

21、amazeui的日期js插件可以设置禁止选择日期么？

22、如何使用amazeui的日期js插件（两种方法）？

23、amazeui的日期js插件如何设置语言？

12、非 `input` 触发元素如何使用amazeui的日期js插件？

12、非 `input` 触发元素如何使用amazeui的日期js插件？