修改Ext.DatePicker使得Ext.form.DateField只选择年月

在最近一个项目中用到了Ext,学到了很多新的东西,同时JS水平得到了大大的提升。项目中需要一个年月输入框,不带日期的,可是Ext本身不带这样的功能,没办法只能自己扩展。
G了一下得到2篇文章
http://www.javaeye.com/topic/105492
http://blog.csdn.net/forgetdavi/archive/2007/09/07/1776079.aspx
按照他的做法,依葫芦画瓢,做出来了,但是出现了问题。
首先他用的ID识别,这使得在一个页面中如果只有一个这样的控件是有效的,但是多个时,第二个被触发的控件的日期选择还是会显示,因此不能采用ID识别。
琢磨了下,修改Ext.DatePicker,把onRender 下的修改部分改为
if (this.format.indexOf('d') == -1) {
    this.el.select("table.x-date-inner").hide();
    this.el.child("td.x-date-bottom").hide();
}
来隐藏日期选择。
同时把update方法修改的部分改为
if (this.format.indexOf('d') == -1 && this.getValue() != date) {
   this.setValue(date);
   this.fireEvent("select", this, this.value);
}
来获得选择的年月比较好。
而Ext.form.DateField则不需要做任何修改。
用法如下
var date = new Ext.form.DateField({
...
format: 'Y年m月',
...
});
其中format也可以为'Ym','m/Y'等之类的只要不带d的都会按照只选择年月去执行
实现日期选择:
var grid=new Ext.grid.GridPanel({
title:'详细信息',
tbar: new Ext.Toolbar({
        id:'grid-tbar',
        height:40,
        items:[
        '按日期搜索: ',
       
        field,
                    {
                    text:'查询',
                  handler:function(){
                  var valuee=field.getValue();
                  if(valuee==""){
                  alert("查询信息不能为空!");
                  }else {
                        var value=field.getValue().format('Y-m-d');
                    store.reload({params:{'dob':value,start:0, limit:25}});
                  }
                  }
                    }
        ]
}),
store:store,
maxSize:700,
minSize:700,
height:500,
disableSelection:true,
autoScroll:true,
columns:[{header:"明细ID",width:40,dataIndex:'ID',sortable:true},
{header:"表名",width:80,dataIndex:'TABLENAME',sortable:true},
{header:"错误描述",width:200,dataIndex:'ERROR_DESCRIP',sortable:true},
{header:"数据描述",width:200,dataIndex:'DATA_DESCRIP',sortable:true}]
});


var field=new Ext.form.DateField({
                        fieldLabel: 'Date of Birth',
                        name: 'dob',
                        width:190,
                        height:30,
                        allowBlank:false
                    })
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: com.eltima.components.ui.datepicker是一个Maven插件,可用于在Java应用程序中添加日期选择器。该插件是由Eltima Software开发的,可以直接从Maven中心库中下载。这个日期选择器插件具有优美的界面和高度的自定义性,可以满足不同的用户需求。 使用Maven来构建Java应用程序有很多好处,例如,Maven可以管理应用程序的依赖关系,自动下载和安装必要的库,简化了开发过程。要使用com.eltima.components.ui.datepicker插件,您需要将其添加到您的项目依赖列表中,然后在代码中实例化一个日期选择器对象。您可以使用插件自带的CSS样式表自定义选择器的外观,并指定默认选定日期、最小值、最大值和其他操作。 总的来说,com.eltima.components.ui.datepicker是一个非常有用的Java插件,可以帮助您轻松地添加日期选择器到您的应用程序中。不管是为了提高用户体验还是避免手动编写日期选择器代码,这个插件都值得一试。 ### 回答2: com.eltima.components.ui.datepicker是一个Java日期选择器组件,可通过maven来管理依赖。使用maven可以很方便地集成com.eltima.components.ui.datepicker到你的项目中,并且不需要手动下载和导入jar包。 要使用maven集成com.eltima.components.ui.datepicker,首先需要在你的pom.xml文件中添加以下依赖: ``` <dependency> <groupId>com.eltima.components</groupId> <artifactId>datepicker</artifactId> <version>3.3.3</version> </dependency> ``` 这将下载com.eltima.components.ui.datepicker的最新版本(目前为3.3.3)并将其添加到你的项目中。然后,你可以在你的代码中使用该组件,例如: ``` import com.eltima.components.ui.DatePicker; ... DatePicker datePicker = new DatePicker(); datePicker.setSelectedDate(Calendar.getInstance()); frame.add(datePicker); ``` 这将创建一个可供用户选择日期的日期选择器,并将其添加到图形用户界面中。 总之,maven提供了一种方便的方式来管理Java依赖项,并且通过添加com.eltima.components.ui.datepicker依赖项,你可以轻松地集成该组件到你的项目中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值