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、代码

 <!DOCTYPE html>

 <html lang="cn">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" href="css/amazeui.min.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>

     <style>

         .testCenter{

             /*有宽度之后加margin：auto才能实现自动居中*/

             width: 400px;

             height: 300px;

             margin:100px auto;

             border: 15px ridge #0b6fa2;

             background: bisque;

         }

         .formStyle{

             width: 200px;

             margin:100px auto;

         }

     </style>

 </head>

 <body>

 <div class="testCenter" >

     <div class="formStyle">

         <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>

     </div>

 </div>

 </body>

 </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'}" 。