EasyUI中Datebox日期框的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Datebox日期框的简单使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
場景
效果
屬性
該屬性擴展自組合（combo），下面是為日期框（datebox）添加的屬性。
| panelWidth | number | 下拉日歷面板的寬度。 | 180 |
| panelHeight | number | 下拉日歷面板的高度。 | auto |
| currentText | string | 當前日期按鈕上顯示的文本。 | Today |
| closeText | string | 關閉按鈕上顯示的文本。 | Close |
| okText | string | 確定按鈕上顯示的文本。 | Ok |
| disabled | boolean | 設置為 true 時禁用該域。 | false |
| buttons | array | 日歷下面的按鈕。該屬性自版本 1.3.5 起可用。 代碼實例： | ? |
| sharedCalendar | string,selector | 多個日期框（datebox）組件使用的共享日歷。該屬性自版本 1.3.5 起可用。 代碼實例： | null |
| formatter | function | 格式化日期的函數(shù)，該函數(shù)有一個 'date' 參數(shù)，并返回一個字符串值。下面的實例演示如何重寫默認的格式化（formatter）函數(shù)。 | ? |
| parser | function | 解析日期字符串的函數(shù)，該函數(shù)有一個 'date' 字符串，并返回一個日期值。下面的實例演示如何重寫默認的解析（parser）函數(shù)。 | ? |
事件
| onSelect | date | 當用戶選擇一個日期時觸發(fā)。 代碼實例： |
方法
該方法擴展自組合（combo），下面是為日期框（datebox）重寫的方法。
| options | none | 返回選項（options）對象。 |
| calendar | none | 獲取日歷（calendar）對象。下面的實例演示如何獲取日歷（calendar）對象，然后重現(xiàn)它。 |
| setValue | value | 設置日期框（datebox）的值。 代碼實例： |
實現(xiàn)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <input id="dd" type="text" class="easyui-datebox" required="required"> <input id="dd1" type="text" class="easyui-datebox" required="required"> <script type="text/javascript">$('#dd1').datebox({onSelect: function(date){alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());}}); </script> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的EasyUI中Datebox日期框的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中Calendar日历的简单
- 下一篇： EasyUI中Combox组合框的简单使