easyui datebox操作
2014-05-07 10:56
351 查看
html部分:
<input type="text" id='astartTime'class="easyui-datebox" required="true"style="width:150px;"/>
js部分
//初始化控件,并设置选择时间显示格式
$('#astartTime').datebox({formatter:myformatter});
//设置初始时间为当前时间
$('#astartTime').datebox("setValue",myformatter(newDate()));
//获取选择时间
$("#astartTime").datebox('getValue');
//这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在dateboxonSelect 日期选中后,自动为input id="dd"type="text"赋值,然后我们就可以使用
$("#astartTime ").val()获取选中的日期值了。
具体代码如下:
$("#astartTime").datebox({
onSelect: function(date){
$("#astartTime ").val(date);
}
});
//---------------时间格式处理---------
function myformatter(date) {
var y =date.getFullYear();
var m =date.getMonth() + 1;
var d =date.getDate();
return y +'-' + (m < 10 ? ('0' + m) : m) + '-'
+ (d < 10? ('0' + d) : d);
}
function datetoymd(date) {
var y =date.getFullYear();
var m =date.getMonth() + 1;
var d =date.getDate();
return y + ''+ (m < 10 ? ('0' + m) : m) + ''
+ (d < 10? ('0' + d) : d);
}
//对应parser 属性,解析yyyy-MM-dd数据
function myparser(s) {
if (!s)
returnnew Date();
var ss =(s.split('-'));
var y =parseInt(ss[0], 10);
var m =parseInt(ss[1], 10);
var d =parseInt(ss[2], 10);
if (!isNaN(y)&& !isNaN(m) && !isNaN(d)) {
returnnew Date(y, m - 1, d);
} else {
returnnew Date();
}
}
function strtodate(str)
{
var y =str.substring(0,4);
var m =str.substring(4,6);
var d =str.substring(6,8);
returny+'-'+m+'-'+d;
}
function datahandler(s)
{
var ss =(s.split('-'));
var y =parseInt(ss[0], 10);
var m =parseInt(ss[1], 10);
var d =parseInt(ss[2], 10);
returny+''+(m < 10 ? ('0' + m) : m)+''+(d < 10 ? ('0' + d) : d);
}
属性
其属性扩展自combo,下列是为databox增加的属性
事件
方法
其方法扩展自combo,下列是为datebox重定的方法
<input type="text" id='astartTime'class="easyui-datebox" required="true"style="width:150px;"/>
js部分
//初始化控件,并设置选择时间显示格式
$('#astartTime').datebox({formatter:myformatter});
//设置初始时间为当前时间
$('#astartTime').datebox("setValue",myformatter(newDate()));
//获取选择时间
$("#astartTime").datebox('getValue');
//这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在dateboxonSelect 日期选中后,自动为input id="dd"type="text"赋值,然后我们就可以使用
$("#astartTime ").val()获取选中的日期值了。
具体代码如下:
$("#astartTime").datebox({
onSelect: function(date){
$("#astartTime ").val(date);
}
});
//---------------时间格式处理---------
function myformatter(date) {
var y =date.getFullYear();
var m =date.getMonth() + 1;
var d =date.getDate();
return y +'-' + (m < 10 ? ('0' + m) : m) + '-'
+ (d < 10? ('0' + d) : d);
}
function datetoymd(date) {
var y =date.getFullYear();
var m =date.getMonth() + 1;
var d =date.getDate();
return y + ''+ (m < 10 ? ('0' + m) : m) + ''
+ (d < 10? ('0' + d) : d);
}
//对应parser 属性,解析yyyy-MM-dd数据
function myparser(s) {
if (!s)
returnnew Date();
var ss =(s.split('-'));
var y =parseInt(ss[0], 10);
var m =parseInt(ss[1], 10);
var d =parseInt(ss[2], 10);
if (!isNaN(y)&& !isNaN(m) && !isNaN(d)) {
returnnew Date(y, m - 1, d);
} else {
returnnew Date();
}
}
function strtodate(str)
{
var y =str.substring(0,4);
var m =str.substring(4,6);
var d =str.substring(6,8);
returny+'-'+m+'-'+d;
}
function datahandler(s)
{
var ss =(s.split('-'));
var y =parseInt(ss[0], 10);
var m =parseInt(ss[1], 10);
var d =parseInt(ss[2], 10);
returny+''+(m < 10 ? ('0' + m) : m)+''+(d < 10 ? ('0' + d) : d);
}
属性
其属性扩展自combo,下列是为databox增加的属性
名称 | 类型 | 说明 | 默认值 |
panelWidth | number | 下拉日历面板的宽度 | 180 |
panelHeight | number | 下拉日历面板的高度 | auto |
currentText | string | 当前日期按钮上显示的文字 | Today |
closeText | string | 关闭按钮上显示的文字 | Close |
okText | string | 确定按钮上显示的文字 | OK |
disabled | boolean | 为true时禁用该域 | false |
formatter | function | 格式化日期的函数,此函数有一个'date'参数,并返回一个字符串值 | |
parser | function | 解析日期字符串的函数,此函数有一个'date'字符串参数,并返回一个日期值 |
事件
名称 | 参数 | 说明 |
onSelect | date | 当用户选择一个日期时触发 |
方法
其方法扩展自combo,下列是为datebox重定的方法
名称 | 参数 | 说明 |
options | none | 返回options对象 |
calender | none | 获取calender对象 |
setValue | value | 设置databox值 |
相关文章推荐
- HTML Jquery EasyUI 日期选择框[easyui-datebox]的使用【格式自定】
- EasyUI的DataGrid日期列(datebox)正确显示json时间格式
- easyui 1.3.6的datebox 添加清除按钮
- 批改easyui datebox默认日期格式
- 关于easyui datagrid中使用datebox设置默认值的方法
- 【Jqurey EasyUI+Asp.net】---修改DateBox的默认日期格式
- 【easyUI】date-box 设置默认时间
- EasyUi日期控件datebox设置,只显示年月,也只能选择年月
- [easyui] datebox源码阅读. 批注
- easyui-datebox 日期控件 只显示年月 不显示日
- easyui datebox 控件jquery赋值
- easyui的ComboBox和DateBox复制
- 修改easyui datebox默认日期格式
- jquery easyui datebox 的使用 .
- Easyui datebox单击文本框显示日期选择
- 扩展easyui 功能-datebox
- easyui如何获取日期datebox中的值
- Easyui的DateBox日期格式化
- 关于easyui datebox的记录
- Easyui dataGrid 动态insertRow 包含datebox、validatebox组件,样式失效问题