$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {// datetimebox就是你要自定义editor的名称
init: function (container, options) {
var input = $('<input class="easyuidatetimebox">').appendTo(container);
return input.datetimebox({
formatter: function (date) {
return new Date(date).format("yyyy-MM-dd hh:mm:ss");
}
});
},
getValue: function (target) {
return $(target).parent().find('input.combo-value').val();
},
setValue: function (target, value) {
$(target).datetimebox("setValue", value);
},
resize: function (target, width) {
var input = $(target);
if ($.boxModel == true) {
input.width(width - (input.outerWidth() - input.width()));
} else {
input.width(width);
}
}
}
});
// 时间格式化
Date.prototype.format = function (format) {
/*
* eg:format="yyyy-MM-dd hh:mm:ss";
*/
if (!format) {
format = "yyyy-MM-dd hh:mm:ss";
} var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
}; if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
} for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
};

使用方法:

<th field="datetime" width="150" editor="datetimebox">datetime</th>

或者:

在配置里面

{

field:"dataTime",

editor:"datetimebox"

}

validatebox增加对time、date、datetime的验证

$.extend($.fn.validatebox.defaults.rules, {
/*13:04:06*/
time: {
validator: function (value) {
var a = value.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
if (a == null) {
return false;
} else if (a[1] > 24 || a[3] > 60 || a[4] > 60) {
return false;
}
},
message: '时间格式不正确,请重新输入。'
},
/*2014-01-01*/
date: {
validator: function (value) {
var r = value.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if (r == null) {
return false;
}
var d = new Date(r[1], r[3] - 1, r[4]);
return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
},
message: '时间格式不正确,请重新输入。'
},
/*2014-01-01 13:04:06*/
datetime: {
validator: function (value) {
var r = value.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
if (r == null) return false;
var d = new Date(r[1], r[3] - 1, r[4], r[5], r[6], r[7]);
return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4] && d.getHours() == r[5] && d.getMinutes() == r[6] && d.getSeconds() == r[7]);
},
message: '时间格式不正确,请重新输入。'
}
});

datagrid行内编辑时为datetimebox的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

  2. datagrid行内编辑

    编辑属性 :editor: { type: 'text'} $('#listShow').datagrid({ height : 478, pagesize : 20, pageList : [20, ...

  3. easyui datagrid行内编辑

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】

    前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的 ...

  5. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  6. jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)

    可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  8. EasyUI 启用行内编辑

    创建数据网格(DataGrid) $(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', w ...

  9. 第一节:EasyUI样式,行内编辑,基础知识

    一丶常用属性 $('#j_dg_left').datagrid({ url: '/Stu_Areas/Stu/GradeList', fit: true, // 自动适应父容器大小 singleSel ...

随机推荐

  1. redux 知识点

    redux原理:store中维护了一个state,我们dispatch一个action,接下来reducer根据这个action更新state. react-redux提供两个关键模块:Provide ...

  2. Java面试题 corejava(一)

    1.面向对象的特征有哪些方面? [基础] 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问 ...

  3. Action<T> Delegate

    来源:https://docs.microsoft.com/zh-cn/dotnet/api/system.action-1?view=netframework-4.7.2 Action<T&g ...

  4. InfluxDB学习之InfluxDB的基本操作| Linux大学

    来源地址:https://www.linuxdaxue.com/influxdb-study-series-manual.html 本文属于<InfluxDB系列教程>文章系列,该系列共包 ...

  5. java线程实现的四种方式

    java多线程的实现可以通过以下四种方式 1.继承Thread类,重写run方法 2.实现Runnable接口,重写run方法 3.通过Callable和FutureTask创建线程 4.通过线程池创 ...

  6. 【ThreadLocal】使用ThreadLocal实现线程安全

    非线程安全 public class UnSafeThreadLocalDemo { private int count = 0; public static void main(String[] a ...

  7. 筛选法求n以内所有的素数

    求n以内所有的素数? 筛选法:将2到n中所有的数都列出来,然后从2开始,先化掉所有2的倍数,然后每次从下一个剩下的数(必然是素数)开始,划掉其内所有的倍数,最后剩下来的数就都是素数 例:13  红色为 ...

  8. centos6.5网络虚拟化技术

    一.配置KVM虚拟机NAT网络 1.创建脚本执行权限 下面是NAT启动脚本 # vi /etc/qemu-ifup-NAT 赋予权限 # chmod +x /etc/qemu-ifup-NAT 下载镜 ...

  9. Schiff Move Free维骨力这个牌子的保健效果怎么样,是要给中老年人群服用的

    Schiff Move Free维骨力这个牌子的保健效果怎么样,是要给中老年人群服用的.? https://www.zhihu.com/question/46399868 服move free还要补钙 ...

  10. [UE4]加入音效