浅谈如何实现easyui的datebox格式化

看了网上有很多的解决方法，我也写一个比较简单方法。实现easyui的datebox格式化。效果如下，用“++”隔开，看你喜欢用什么都可以。

1、html

<span class="span1">证件有效期至：</span>
<span><input id="passvali" name="hotel.passvali"></span>

2、js

/* 证件有效期至 */
 $('#passvali').datebox({
 formatter: function(date){
 var years=date.getFullYear();//获取年
 var months=date.getMonth()+1;//获取日
 var dates=date.getDate();//获取月

 if(months<10){//当月份不满10的时候前面补0，例如09
 months='0'+months;
 }

 if(dates<10){//当日期不满10的时候前面补0，例如09
 dates='0'+dates;
 }
 return years+"++"+months+"++"+dates;//根据自己需求进行改动
 }
 });

补充：

DateBox 日期显示默认的格式为“dd/mm/yyyy”，如果想自定义成我们的格式需要实现两个函数，formatter和parser。
formatter函数使得选择日期后将其格式化为我们需要的格式，parser函数在选择好日期后告诉控件如何去解析我们自定义的格式。
定义如下：
formatter：A function to format the date, the function take a 'date' parameter and return a string value.
parser：A function to parse a date string, the function take a 'date' string and return a date value.
如将日期格式化为yyyy-mm-dd的格式：

$('#dd1').datebox({
 formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
 parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
});

以上就是为大家分享的easyui的datebox格式化最简单方法，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • easyui validatebox验证

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script> <script src="easyui1.2.4/jquery.easyui.min.js" type="te

  • jQuery插件EasyUI校验规则 validatebox验证框

    Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较

  • 给easyui datebox扩展一个清空的实例

    如下所示: /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: function (target) { return $(target).datebox("options").cleanText }, h

  • jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt').datagrid({ title:'Formatting Columns', width:550, height:250, url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'p

  • jQuery EasyUI API 中文文档 - DateBox日期框

    jQuery EasyUI API 中文文档 - DateBox日期框

    扩展自 $.fn.combo.defaults.用 $.fn.datebox.defaults 重写了 defaults. 依赖 combo calendar 用法 复制代码 代码如下: <input id="dd" type="text"></input> 复制代码 代码如下: $('#dd').datebox({ required:true }); 特性 其特性扩展自 combo,下列是为 datebox 增加的特性. 名称 类型 说明

  • 浅谈jQuery.easyui的datebox格式化时间

    方法很简单,这里就不多废话了,直接奉上代码: $.fn.datebox.defaults.formatter = function (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); } 以上所述就是本文的全部内容了,

  • jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框

    用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

  • JQuery EasyUI 数字格式化处理示例

    设置显示时间戳 <% request.setAttribute("currentTimeStamp",Calendar.getInstance().getTime()); %> 显示:2009-11 <fmt:formatDate pattern="yyyy-MM" value="${currentTimeStamp}"/> <br/> 显示:2009-11-30 23:47:06 <fmt:format

  • 浅谈如何实现easyui的datebox格式化

    浅谈如何实现easyui的datebox格式化

    看了网上有很多的解决方法,我也写一个比较简单方法.实现easyui的datebox格式化.效果如下,用"++"隔开,看你喜欢用什么都可以. 1.html <span class="span1">证件有效期至:</span> <span><input id="passvali" name="hotel.passvali"></span> 2.js /* 证件有效期至 *

  • 浅谈MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载表格!!! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替条纹 fitColumns: true, //防止水平滚动 fit: true,//自动补全 iconCls: "icon-sav

  • 浅谈EasyUI常用控件的禁用方法

    如下所示: input和textarea: $('#controlid').prop('disabled', true); $('input:not(:button,:hidden)').prop('disabled', true);//禁用除button和hidden控件外的所有input控件 $('textarea').prop('disabled', true); radio和checkbox: $('input:radio[name="radioname"]').prop('d

  • 浅谈Python 字符串格式化输出(format/printf)

    Python 字符串格式化使用 "字符 %格式1 %格式2 字符"%(变量1,变量2),%格式表示接受变量的类型.简单的使用例子如下: # 例:字符串格式化 Name = '17jo'   print 'www.%s.com'%Name   >> www.17jo.com Name = '17jo' Zone = 'com' print 'www.%s.%s'%(Name,Zone) >> www.17jo.com 字符串格式化时百分号后面有不同的格式符号,代表

  • 浅谈EasyUi ComBotree树修改 父节点选择的问题

    本人在使用 Easy UI 期间发现了一个不太适合项目的bug,可能也不算bug把 . 毕竟不同项目背景 取舍不同. 我在做网元树选择的时候  发现当选取父节点后,子节点都会被选择  返回  .但是如果我们选中父节点后没有必要选择子节点. 故对源脚本作适当修改 下拉框树修改 父节点选中后只显示父节点  取消返回子节点 修改方法 找到树的选择函数 进行遍历判断  查找关键字 combotree multiple 大约行数 10564 function _7d5(_7d6) { var opts=$

  • 浅谈JavaScript 浏览器对象

    浅谈JavaScript 浏览器对象

    window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

  • Python入门_浅谈for循环、while循环

    Python入门_浅谈for循环、while循环

    Python中有两种循环,分别为:for循环和while循环. 1. for循环 for循环可以用来遍历某一对象(遍历:通俗点说,就是把这个循环中的第一个元素到最后一个元素依次访问一次).for循环的基本结构如下: 具体看这个案例: 设计一个函数,在桌面创建10个文本,用数字从1-10依次给它们命名. def text_create(): path = '/Users/duwangdan/Desktop/' for text_name in range(1,11): # 1-10的范围需要用到r

  • EasyUI修改DateBox和DateTimeBox的默认日期格式示例

    EasyUI修改DateBox和DateTimeBox的默认日期格式示例

    最近整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是因为这两个控件没有什么区别,如果你非得说这两个控件有区别,也无非是DateTimeBox控件后面除了基本的年月日之外带上了小时或者分钟或者秒什么的,更何况,这两个控件在进行日期格式化时所采用的方法也是一样的. DateBox介绍: Demo实例参看:http://www.jeasyui.com/de

  • 浅谈异常结构图、编译期异常和运行期异常的区别

    浅谈异常结构图、编译期异常和运行期异常的区别

    异常处理一般有2种方式,要么捕获异常try-catch,要么抛出异常throws 如果一个方法后面抛出一个运行时期异常(throws RuntimeException),调用者无须处理 如果一个方法后面抛出一个编译时期异常,调用者必须处理,或者抛出或者try-catch: 运行时期的异常一般都不处理,一般是程序逻辑上的错误,比如分母为0作为除数了... 注意如果在try里面出现了异常后,try下面的语句就不会执行,回去寻找catch匹配异常处理会,接下来的语句会处理的(也就是在try-catch

随机推荐