當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI中Datebox日期框的简单使用

發(fā)布時間：2025/3/19 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI中Datebox日期框的简单使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

場景

效果

屬性

該屬性擴展自組合（combo），下面是為日期框（datebox）添加的屬性。

名稱類型描述默認值

panelWidth	number	下拉日歷面板的寬度。	180
panelHeight	number	下拉日歷面板的高度。	auto
currentText	string	當前日期按鈕上顯示的文本。	Today
closeText	string	關(guān)閉按鈕上顯示的文本。	Close
okText	string	確定按鈕上顯示的文本。	Ok
disabled	boolean	設置為 true 時禁用該域。	false
buttons	array	日歷下面的按鈕。該屬性自版本 1.3.5 起可用。代碼實例： var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: 'MyBtn', handler: function(target){ alert('click MyBtn'); } }); $('#dd').datebox({ buttons: buttons });	?
sharedCalendar	string,selector	多個日期框（datebox）組件使用的共享日歷。該屬性自版本 1.3.5 起可用。代碼實例： <input class="easyui-datebox" sharedCalendar="#sc"> <input class="easyui-datebox" sharedCalendar="#sc"> <div id="sc" class="easyui-calendar"></div>	null
formatter	function	格式化日期的函數(shù)，該函數(shù)有一個 'date' 參數(shù)，并返回一個字符串值。下面的實例演示如何重寫默認的格式化（formatter）函數(shù)。 $.fn.datebox.defaults.formatter = function(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return m+'/'+d+'/'+y; }	?
parser	function	解析日期字符串的函數(shù)，該函數(shù)有一個 'date' 字符串，并返回一個日期值。下面的實例演示如何重寫默認的解析（parser）函數(shù)。 $.fn.datebox.defaults.parser = function(s){ var t = Date.parse(s); if (!isNaN(t)){ return new Date(t); } else { return new Date(); } }	?

事件

名稱參數(shù)描述

onSelect

date

當用戶選擇一個日期時觸發(fā)。
代碼實例：

$('#dd').datebox({

onSelect: function(date){

alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());

}

});

方法

該方法擴展自組合（combo），下面是為日期框（datebox）重寫的方法。

名稱參數(shù)描述

options	none	返回選項（options）對象。
calendar	none	獲取日歷（calendar）對象。下面的實例演示如何獲取日歷（calendar）對象，然后重現(xiàn)它。 // get the calendar object var c = $('#dd').datebox('calendar'); // set the first day of week to monday c.calendar({ firstDay: 1 });
setValue	value	設置日期框（datebox）的值。代碼實例： $('#dd').datebox('setValue', '6/1/2012'); // set datebox value var v = $('#dd').datebox('getValue'); // get datebox value

實現(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EasyUI中Calendar日历的简单
下一篇： EasyUI中Combox组合框的简单使