extjs修改 datefiled 只显示年月

//MonthPickerPlugin.js文件,年月选择的关键代码
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();
   // if you want to click,you can the dblclick event change click
            p.mun(p.monthPicker, ‘click‘, p.onMonthClick, p);
            p.mun(p.monthPicker, ‘click‘, 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, ‘click‘, 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);

使用方法:  只需在属性里加上  plugins:‘monthPickerPlugin‘

时间: 2024-12-13 14:37:06

extjs修改 datefiled 只显示年月的相关文章

extjs 时间控件只显示年月

调用代码一: [javascript] view plain copy print ? var monthField = new Ext.ux.MonthField({ id:'month', fieldLabel: '月份', allowBlank:false, readOnly : true, format:'Y年m月', listeners:{"blur":function(){ alert() }} ); 调用代码二(部分): [javascript] view plain c

easyui datebox 只显示年月

在网上看了好多的js源码 点击12月份都会变成2017-0 这样的 调试后发现了问题,在此发修改后的方法 //只显示年月 function convertDatebox(domId) { $("#" + domId).datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(func

wpf 时间控件只显示年月

最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.com/questions/1798513/wpf-toolkit-datepicker-month-year-only 原文是用了两个类,其中一个是为了让DatePicker下的Calendar只显示年月,不显示日,另一个类是为了让DatePicker格式化为yyyy-MM格式,但是从文章中可以看出,

easyui datebox 扩展 只显示年月

一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式的,要么就是截取字符串,不可取,自己没有写过类似的扩展,但是也算是实现功能了,先来张图吧 本人水平有限写不出高深的东西,代码大家都能看懂,但是还是贡献出来,让大家提提意见共同进步吧 $.extend($.fn.combobox.methods, { yearandmonth: function (jq) { return jq.each(function () { var obj = $(this).combo

easyui的datebox只显示年月

要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就行. 当然我学习到的一点就是调试,之前只会用类似alert和console.info进行调试,然而这两种方法对easyui中的这种方法不奏效,比我我想知道parser中的function中的参数date值到底是什么,用这两种方法是没用的,用console.log(date);就可以看到date的值,

Android DataPickerDialog组建只显示年月或月日

最近几天再做一个App开发,开发时需要使用DatePickerDialog来只显示年月,在网上参考了不少的例子,有的自己琢磨不透,所幸看到了(这里请参考http://whb198900.blog.163.com/blog/static/766453542012108111920879)这位朋友的文章以及http://download.csdn.net/detail/u010372772/6027761这里边的代码,自己又进行了总结,总之,完成了自己的任务. 1 public class Seco

zui框架配置日期控件只显示年月

zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/res/zui-1.9.1-dist/dist/js/zui.min.js"></script> <script src="~/res

easyui datebox只显示年月隐藏日期的实现

工作中两次遇到需要实现只实现年月的时间控件效果,特地把网上查到的实现方法记录下来,以备再次需要时用到.上代码 var dateobj=function(obj){ var need_obj={ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的

JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ================================================================= <input id="dlgReleaseTime" class="easyui-datebox"></input> $('#dl