`
musicbox95351
  • 浏览: 229182 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

easyui datebox onchange 输入框改变事件的变通处理

 
阅读更多
easyui 的 datebox控件只对外提供了一个onSelect事件。
其基类combobox有一个onChange事件。

如果需要在日期控件中手动输入日期时处理一些逻辑,onSelect事件就不能满足了。

比如当手动输入了一个合法的日期后需要获取这个日期然后进行其它逻辑处理。

这个时候可以用onChange事件。



但是如果要在输入的过程中进行对输入的字符串进行处理然后对当前日期控件进行赋值,用onChange事件就麻烦了。
会碰到赋值后显示不出来的问题。

但datebox有一个属性暴露出来。就是parser。这是一个函数,日期控件中的内容有变化时改属性函数会被调用。可以在这个函数中进行特殊处理。虽然这样做可能并不是最安全的。

$("#enddate").datebox({
	 parser:function(s){
                 //格式为yyyy-mm-dd
		 var DateRegExp = /^[1-2]\d{3}-(0[1-9]|1[0-2]){1}-(0[1-9]|[1-2][0-9]|3[0-1]){1}$/g;
			
			if(DateRegExp.test(s)){
				
			}else{
				return null;
			}
                        //字符转日期 
			var t = parseDate(s);
			if (!isNaN(t)){
				
				var firstDate = new Date(t.getFullYear(),t.getMonth(),1);

				var endDate = new Date(firstDate);

				endDate.setMonth(firstDate.getMonth()+1);
				
				endDate.setDate(0);
                                //日期转字符
				var result = endDate.format('yyyy-MM-dd');
				if(s != result){
					$("#enddate").datebox('setValue',result);
				}
				
				return endDate;
			} else {
				
				return null;
			}
		}
});


在这个例子中,对输入的日期字符进行处理,算出用户要输入的日期对应月份的最后一天,填充到日期控件中。
分享到:
评论

相关推荐

    easyui的datebox限定范围

    总之,EasyUI的DateBox组件结合适当的JavaScript处理,可以轻松实现日期范围的限制。通过监听和响应用户的选择,我们可以动态地调整可用的日期范围,从而确保用户遵循预设的规则。这种功能在很多场景下都非常实用,...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    对于 `easyui-combobox`,我们则使用 `data-options` 属性的 `onChange` 键来指定处理函数 `handleComboboxChange`,该函数接收新旧值作为参数,同样弹出警告框展示变化。 这个实例展示了如何有效地利用 `onchange`...

    更改easyui-datebox日期格式

    解决easyui-datebox日期格式,只需引入此包即可,不需改源码

    easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码

    在JavaScript中,我们需要监听"contractBegtime"这个Datebox的选择事件(onSelect)。当用户选择了一个起始日期后,我们将更新"contractEndtime"的验证规则,确保所选的截止日期必须大于或等于起始日期。以下是相应...

    给Easyui-Datebox设置隐藏或者不可用的解决方法

    最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加...下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的解决方法

    easyui 扩展 带单位输入框

    本文将深入探讨如何在EasyUI中扩展一个带有单位输入框的自定义插件,这在处理需要指定单位(如长度、重量等)的数据输入场景时非常有用。 ### 标题解析:“easyui 扩展 带单位输入框” 标题明确了本文的主题是关于...

    jquery easyui 周历 周选择下拉控件

    以上便是关于“jquery easyui 周历 周选择下拉控件”的详细知识点介绍,这个控件的实现涉及到了组件扩展、事件处理、样式定制和配置选项等多个方面,充分展示了JavaScript和jQuery EasyUI在前端开发中的强大功能。

    easyui textbox失去焦点事件及获取文本框的内容

    EasyUI文本框失去焦点事件和获取文本框内容的实现 EasyUI文本框是一种常用的UI组件,它提供了许多实用的功能,如文本框失去焦点事件和获取文本框内容等。下面我们将详细介绍EasyUI文本框失去焦点事件和获取文本框...

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

    在本文中,我们将深入探讨如何为EasyUI Datebox组件扩展一个清空功能,这是一个非常实用的增强,使得用户能够方便地清除已选择的日期,从而提高用户体验。EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一...

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

    在 EasyUI 中,DateBox 和 DateTimeBox 是两个常用的日期选择控件,它们提供了方便的方式来输入和显示日期或日期时间信息。这两款控件在功能上非常相似,主要的区别在于 DateTimeBox 还包含了时间部分。 DateBox ...

    easy-ui onchange/easy-ui添加onchange

    在Easy-UI中,`onchange`事件是用于监听用户在组件(如Combobox)中做出改变时触发的事件,这对于实现动态交互和数据处理至关重要。 首先,我们来看如何为Easy-UI的Combobox添加`onchange`事件。在HTML结构中,我们...

    EasyUI Datebox 日期验证之开始日期小于结束时间

    EasyUI Datebox 是一款基于jQuery和EasyUI框架的日期选择插件,它提供了丰富的样式和功能,使得用户在界面上能够方便地选择日期。本文将详细讲解如何使用EasyUI Datebox 进行日期验证,特别是实现开始日期小于结束...

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

    实现easyui的datebox格式化。效果如下,用“++”隔开,看你喜欢用什么都可以。   1、html 证件有效期至: <span><input id=passvali name=hotel.passvali> 2、js /* 证件有效期至 */ $('#passvali')....

    EasyUI textbox事件,EasyUI textbox input events

    在使用UasyUI的时候,在一般的input输入框上添加class="easyui-textbox"属性,则在该输入框上添加的事件将不起作用,但是如果去掉class="easyui-textbox"变成一般的input则起作用。 控件的生成原理,它是把你原有的...

    easyui的eas-text绑定输入时监听值变化 提供两种方式,亲测可用

    自己花了 一晚上搞出来的,没有找到合适的,最后自己根据观看博客的总结,做了此demo 下载运行即可

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

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发人员提供了构建现代 Web 应用程序的各种控件,其中 DateBox 是 jQuery EasyUI 中用于处理日期输入的控件。DateBox 控件允许用户通过一个文本输入框来选择或...

Global site tag (gtag.js) - Google Analytics