amazeui-js插件-ui加強-日期組件如何使用（把實例作一下）

時間 2020-04-29

標籤 amazeui 插件加強日期組件如何使用實例一下欄目 JavaScript 简体版

原文原文鏈接

amazeui-js插件-ui加強-日期組件如何使用（把實例作一下）

1、總結

一句話總結：須要jquery.js和amazeui.js一切才能使用

一、amazeui中的各類js效果要怎麼才能使用？

解答：須要jquery.js和amazeui.js一塊兒才能使用。javascript

二、html中如何引入一個css？

解答：用link標籤，有個rel屬性是stylesheet，而後href是引入的css的地址，link rel="stylesheet" href="css/amazeui.min.css"。css

三、html中如何引入一個js？

解答： javascript標籤，裏面的src是要引入的js的路徑，和img標籤很像了，script src="js/jquery.min.js" script。html

四、html中margin如何設置自動居中？

解答：須要先設置width，而後用margin：auto 。java

五、html中的margin的參數是什麼狀況（有一個時，兩個，四個）？

解答：四個：上又下左。兩個：上下左右。一個：所有。jquery

六、html中的border的幾個參數是什麼狀況？

解答：依次是是邊框寬度，邊框樣式，邊框顏色。那說明是邊框寬度最重要git

七、html邊框樣式中須要記住哪一個屬性？

解答：ridge 。github

八、html樣式中的點和#號分別表明什麼？

解答：點號表明類，#號表明id 。瀏覽器

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

解答：在input上面加上data-am-datepicker 固然和 readonly一塊兒配合使用效果更佳，form上面也能夠加上data-am-validator 。ide

十、讓input不能夠操做的兩個屬性是什麼？

解答： readonly和disabled。函數

十一、amazeui時間組件如何使用？

解答：日期組件上面有時間組件的github連接，而時間組件的github上面有使用的詳細說明。

十二、非 `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" 。

1三、amazeui的日期js插件如何更改顏色？

解答：經過theme屬性，data-am-datepicker="{theme: 'success'}" 。

1四、amazeui的日期js插件如何更改視圖（就是選擇的時候只顯示年，仍是年月日一塊兒顯示）？

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

1五、amazeui的日期js插件有幾種視圖？

解答：三種：days: 顯示天（默認，months: 顯示月，years: 顯示年。

1六、amazeui的日期js插件更改多參數中間用什麼符號鏈接？

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

1七、amazeui的日期js插件如何限制視圖，好比限制只能選擇到月份？

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

1八、amazeui的日期js插件如何限制只能選擇到年份的時候的注意事項是什麼？

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

1九、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) {}。

2一、amazeui的日期js插件能夠設置禁止選擇日期麼？

解答：能夠，初始化的時候經過 onRender 選項設置禁用日期。。

2二、如何使用amazeui的日期js插件（兩種方法）？

解答：添加 data-am-datepicker 屬性，並設置相關選項，input class="" data-am-datepicker="{format: 'yyyy-mm'}"。經過 $().datepicker(options) 調用。$('#my-datepicker').datepicker({format: 'yyyy-mm'}); 。

2三、amazeui的日期js插件如何設置語言？

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

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>

3、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: 表單驗證與日期插件結合使用問題

4、測試題-簡答題

一、amazeui中的各類js效果要怎麼才能使用？

解答：須要jquery.js和amazeui.js一塊兒才能使用。

二、html中如何引入一個css？

解答：用link標籤，有個rel屬性是stylesheet，而後href是引入的css的地址，link rel="stylesheet" href="css/amazeui.min.css"。

三、html中如何引入一個js？

解答： javascript標籤，裏面的src是要引入的js的路徑，和img標籤很像了，script src="js/jquery.min.js" script。

四、html中margin如何設置自動居中？

解答：須要先設置width，而後用margin：auto 。

五、html中的margin的參數是什麼狀況（有一個時，兩個，四個）？

解答：四個：上又下左。兩個：上下左右。一個：所有。

六、html中的border的幾個參數是什麼狀況？

解答：依次是是邊框寬度，邊框樣式，邊框顏色。那說明是邊框寬度最重要

七、html邊框樣式中須要記住哪一個屬性？

解答：ridge 。

八、html樣式中的點和#號分別表明什麼？

解答：點號表明類，#號表明id 。

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

解答：在input上面加上data-am-datepicker 固然和 readonly一塊兒配合使用效果更佳，form上面也能夠加上data-am-validator 。

十、讓input不能夠操做的兩個屬性是什麼？

解答： readonly和disabled。

十一、amazeui時間組件如何使用？

解答：日期組件上面有時間組件的github連接，而時間組件的github上面有使用的詳細說明。

十二、非 `input` 觸發元素如何使用amazeui的日期js插件？

1三、amazeui的日期js插件如何更改顏色？

解答：經過theme屬性，data-am-datepicker="{theme: 'success'}" 。

1四、amazeui的日期js插件如何更改視圖（就是選擇的時候只顯示年，仍是年月日一塊兒顯示）？

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

1五、amazeui的日期js插件有幾種視圖？

解答：三種：days: 顯示天（默認，months: 顯示月，years: 顯示年。

1六、amazeui的日期js插件更改多參數中間用什麼符號鏈接？

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

1七、amazeui的日期js插件如何限制視圖，好比限制只能選擇到月份？

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

1八、amazeui的日期js插件如何限制只能選擇到年份的時候的注意事項是什麼？

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

1九、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'); });