Ext.ux.MonthPickerPlugin = function() {
var picker;
var oldDateDefaults;
this.init = function(pk) {
picker = pk;
picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
};
function setDefaultMonthDay() {
oldDateDefaults = Date.defaults.d;
Date.defaults.d = 1;
return true;
}
function restoreDefaultMonthDay(ret) {
Date.defaults.d = oldDateDefaults;
return ret;
}
function onClick(e, el, opt) {
var p = picker.menu.picker;
p.activeDate = p.activeDate.getFirstDateOfMonth();
if (p.value) {
p.value = p.value.getFirstDateOfMonth();
}
p.showMonthPicker();
if (!p.disabled) {
p.monthPicker.stopFx();
p.monthPicker.show();
p.mun(p.monthPicker, 'click', p.onMonthClick, p);
p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
p.mon(p.monthPicker, 'click', p.onMonthClick, p);
p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
}
}
function pickerClick(e, t) {
var el = new Ext.Element(t);
if (el.is('button.x-date-mp-cancel')) {
picker.menu.hide();
} else if(el.is('button.x-date-mp-ok')) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
function pickerDblclick(e, t) {
var el = new Ext.Element(t);
if (el.parent()
&& (el.parent().is('td.x-date-mp-month')
|| el.parent().is('td.x-date-mp-year'))) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
};
Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);
页面中使用方法:
items : [ {
xtype : 'datefield',
width : 130,
fieldLabel : '月 份',
name : 'cpMsgFlowStat.cpname',
plugins : 'monthPickerPlugin',
format : 'Y-m',
editable : false,
readOnly : true
} ]
分享到:
相关推荐
标题中的“ext2,3,和4 版本 只显示年月的日期插件”指的是Linux操作系统中使用的ext2、ext3和ext4这三种文件系统格式。这些文件系统是Linux内核中最常见的默认文件系统,分别在不同的时期发展以优化性能和安全性。...
接着,你需要在DateField配置中启用插件,指定显示的格式,如'Y-m',这将确保日期只显示到月份级别。此外,你可能还需要自定义其他属性,如预设的日期范围、默认值或者禁用某些年份和月份。 以下是一个简单的示例...
标题中的"ext里可以选择年月日时分秒的控件"很可能指的是EXT中的`Ext.picker.Date`或者更具体地,可能是`Ext.picker.DateTimePicker`组件。 `Ext.picker.Date`是EXT中基础的日期选择器,而`Ext.picker....
Ext中控件非常丰富,有各种格式的日期选择DateField,但是要选择月份,非常麻烦.往往是需要修改源码的方法 我添加了一个插件 代码及调用见 下载资源 本人已测 无问题
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题
在压缩包中的"Ext年月日时分秒组件"可能包含了源码、示例、文档和样式文件。通过查看这些文件,你可以学习如何在自己的项目中集成并定制这个组件。一般来说,开发者会参考提供的示例代码,理解其工作原理,然后根据...
默认情况下,它只显示日期部分,但通过扩展或配置,我们可以让它包含时间选择。这个控件基于浏览器的原生日期选择器进行增强,提供了一种用户友好的界面,确保了跨平台的一致性。 要创建一个带有时间选择的日期控件...
往往是需要修改源码的方法,如: 修改Ext.DatePicker使得Ext.form.DateField只选择年月 等,但是修改源码有个不好的地方,如果ext升级了,又需要改一次,很不方便.干脆,就重写了一个月份选择控件.使用接口和DateField类似,...
本文将详细讨论基于Ext4.2的年月日时分秒时间选择控件,一个功能强大且经过验证的组件,它能为用户提供方便、直观的时间输入体验。 首先,我们来了解Ext4.2。Ext JS是Sencha公司开发的一款JavaScript框架,主要用于...
默认情况下,它只显示年、月、日,但可以通过配置扩展为包含时间元素。 2. **配置选项** - `format`: 这个配置项定义了日期的显示格式,例如 "Y-m-d H:i:s" 可以展示年月日时分秒。 - `showTime`: 如果设置为`...
在标题提到的"年月日时分秒、时分秒控件",我们可以理解为这是ExtJS中的日期选择器和时间选择器组件,用于用户友好的日期和时间输入。 1. **日期选择器(Date Field)**:ExtJS的`Ext.form.field.Date`类提供了一个...
- `dateFmt`:指定日期格式,如`'yyyy-MM-dd'`表示年月日,`'yyyy-MM-dd HH:mm'`表示年月日加时分。 ##### 2.3 ASP.NET Web Forms - **概念介绍**:ASP.NET Web Forms是一种构建动态Web应用程序的技术,由...
2. **多功能**:支持多种日期格式,如年月日、年/月/日等,并可以设置日期范围限制,防止用户输入无效日期。 3. **自定义**:开发者可以根据自己的需求调整日期选择器的样式、语言、显示模式等,蓝色皮肤提供了基础...