`
jiaguwen123
  • 浏览: 413944 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

ext 只显示年月的日期插件

    博客分类:
  • EXT
 
阅读更多
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 版本 只显示年月的日期插件

    标题中的“ext2,3,和4 版本 只显示年月的日期插件”指的是Linux操作系统中使用的ext2、ext3和ext4这三种文件系统格式。这些文件系统是Linux内核中最常见的默认文件系统,分别在不同的时期发展以优化性能和安全性。...

    Ext DateField控件 - 只选择年月插件

    接着,你需要在DateField配置中启用插件,指定显示的格式,如'Y-m',这将确保日期只显示到月份级别。此外,你可能还需要自定义其他属性,如预设的日期范围、默认值或者禁用某些年份和月份。 以下是一个简单的示例...

    ext里可以选择年月日时分秒的控件

    标题中的"ext里可以选择年月日时分秒的控件"很可能指的是EXT中的`Ext.picker.Date`或者更具体地,可能是`Ext.picker.DateTimePicker`组件。 `Ext.picker.Date`是EXT中基础的日期选择器,而`Ext.picker....

    EXT 选择年月 插件

    Ext中控件非常丰富,有各种格式的日期选择DateField,但是要选择月份,非常麻烦.往往是需要修改源码的方法 我添加了一个插件 代码及调用见 下载资源 本人已测 无问题

    extjs年份控件(只显示年,无月日时分秒)

    Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)

    Ext-datatimefield日期与时间选择器精确至时分秒

    1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题

    Extjs 年月日时分秒组件

    在压缩包中的"Ext年月日时分秒组件"可能包含了源码、示例、文档和样式文件。通过查看这些文件,你可以学习如何在自己的项目中集成并定制这个组件。一般来说,开发者会参考提供的示例代码,理解其工作原理,然后根据...

    EXT js 4带时间的日期控件

    默认情况下,它只显示日期部分,但通过扩展或配置,我们可以让它包含时间选择。这个控件基于浏览器的原生日期选择器进行增强,提供了一种用户友好的界面,确保了跨平台的一致性。 要创建一个带有时间选择的日期控件...

    为EXT写的月份选择控件

    往往是需要修改源码的方法,如: 修改Ext.DatePicker使得Ext.form.DateField只选择年月 等,但是修改源码有个不好的地方,如果ext升级了,又需要改一次,很不方便.干脆,就重写了一个月份选择控件.使用接口和DateField类似,...

    Ext4.2年月日时分秒控件

    本文将详细讨论基于Ext4.2的年月日时分秒时间选择控件,一个功能强大且经过验证的组件,它能为用户提供方便、直观的时间输入体验。 首先,我们来了解Ext4.2。Ext JS是Sencha公司开发的一款JavaScript框架,主要用于...

    Extjs4 日期控件,带年月日时分秒

    默认情况下,它只显示年、月、日,但可以通过配置扩展为包含时间元素。 2. **配置选项** - `format`: 这个配置项定义了日期的显示格式,例如 "Y-m-d H:i:s" 可以展示年月日时分秒。 - `showTime`: 如果设置为`...

    ExtJs4.2.1年月日时分秒、时分秒控件

    在标题提到的"年月日时分秒、时分秒控件",我们可以理解为这是ExtJS中的日期选择器和时间选择器组件,用于用户友好的日期和时间输入。 1. **日期选择器(Date Field)**:ExtJS的`Ext.form.field.Date`类提供了一个...

    js日历代码

    - `dateFmt`:指定日期格式,如`'yyyy-MM-dd'`表示年月日,`'yyyy-MM-dd HH:mm'`表示年月日加时分。 ##### 2.3 ASP.NET Web Forms - **概念介绍**:ASP.NET Web Forms是一种构建动态Web应用程序的技术,由...

    My97DatePicker皮肤,蓝色

    2. **多功能**:支持多种日期格式,如年月日、年/月/日等,并可以设置日期范围限制,防止用户输入无效日期。 3. **自定义**:开发者可以根据自己的需求调整日期选择器的样式、语言、显示模式等,蓝色皮肤提供了基础...

Global site tag (gtag.js) - Google Analytics