1、注册xtype类型

2、保存文件为xxxx.js

3、使用 xtype : monthfield

   return this.buildToolbar({
items: [
{ xtype: 'monthfield', cId: 'dfBeginDate', labelWidth: 40, width: 150, format: 'Y-m', fieldLabel: '日期' },
{ xtype: 'monthfield', cId: 'dfEndDate', labelWidth: 20, width: 125, format: 'Y-m', fieldLabel: '至' },
{ cId: 'btnSearch', text: "查询", operationName: 'Search' }
]
});

4、效果

  

-------------------------------------------------------------------

Ext.define('Ext.form.field.Month', {
extend: 'Ext.form.field.Date',
alias: 'widget.monthfield',
requires: ['Ext.picker.Month'],
alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
selectMonth: null,
createPicker: function () {
var me = this,
format = Ext.String.format,
pickerConfig;
pickerConfig = {
pickerField: me,
ownerCmp: me,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
listeners: {
select: { scope: me, fn: me.onSelect },
monthdblclick: { scope: me, fn: me.onOKClick },
yeardblclick: { scope: me, fn: me.onOKClick },
OkClick: { scope: me, fn: me.onOKClick },
CancelClick: { scope: me, fn: me.onCancelClick }
},
keyNavConfig: {
esc: function () {
me.collapse();
}
}
};
if (Ext.isChrome) {
me.originalCollapse = me.collapse;
pickerConfig.listeners.boxready = {
fn: function () {
this.picker.el.on({
mousedown: function () {
this.collapse = Ext.emptyFn;
},
mouseup: function () {
this.collapse = this.originalCollapse;
},
scope: this
});
},
scope: me,
single: true
}
}
return Ext.create('Ext.picker.Month', pickerConfig);
},
onCancelClick: function () {
var me = this;
me.selectMonth = null;
me.collapse();
},
onOKClick: function () {
var me = this;
if (me.selectMonth) {
me.setValue(me.selectMonth);
me.fireEvent('select', me, me.selectMonth);
}
me.collapse();
},
onSelect: function (m, d) {
var me = this;
me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]);
}
});

Ext5.1日期控件仅显示年月的更多相关文章

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

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  2. ExtJs4.0日期控件只显示年月按年月格式会跳月的解决办法

    如果是Ext.form.panel的话,只要设置一下属性就可以.如下代码: { text : '期间', width : 80, sortable : true, dataIndex : 'accou ...

  3. WPF DatePicker日期控件只显示年月

    1.需要引用2个类,第一个类DatePickerCalendar public class DatePickerCalendar { public static readonly Dependency ...

  4. js 日期控件 可以显示为和历

    日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...

  5. 转 EasyUi日期控件datebox设置,只显示年月,也只能选择年月

    1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...

  6. jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  7. JGUI源码:实现日期控件显示(17)

    本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了, 为了使程序逻辑看起 ...

  8. 关于JSON日期格式显示及My97日期控件

    1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...

  9. my97日期控件弹出位置显示异常

    使用my97日期选择控件的时候,如果整个页面是有滚动条的,根据触发显示日期的控件的父控件的position不同会显示不同的情况 1.position不为fixed则滑动滚动条,显示的日期层不会出现异常 ...

随机推荐

  1. linux下Java程序中插入DB中国的数据乱码问题

    首先,插入到DB数据,在Linux在查询时,现场展示??. 再次,在windows连接到db上,查看的结果并非乱码. 改动Eclipse软件中的编码:如上图:windows菜单->prefere ...

  2. 使用ant编译项目技能

    ant编译时指定jdk的版本号 系统的jdk版本号是1.6,而项目使用的jdk版本号是1.5.所以在编译时须要指定jdk的版本号为1.5,能够使用以下的方法为javac 任务指定fork和execut ...

  3. 通过一次SpringBoot打成war包部署到tomcat启动总结一般jar包冲突的解决方法

    启动时,报错信息如下: 28-Sep-2018 16:55:41.567 严重 [localhost-startStop-1] org.apache.catalina.core.StandardCon ...

  4. [Android]对话框样式Activity获得窗口外点击事件

    Dialog除了使用Dialog类来实现之外,还可以使用Dialog样式的Activity来实现,只需要在注册Activity时指明theme为adnroid:Theme.Dialog就行,这样的Di ...

  5. WPF 拼音输入法

    原文:WPF 拼音输入法 本文来告诉大家如何使用 WPF 来写一个输入法,使用的方式是钩子. 目录 键盘 解析键盘 获得按键 输入流向 算法 实际上本文是在使用一个好用的软件 希沃白板 的时候发现在里 ...

  6. DDD实战7 对项目进行单元测试

    此次采用的方法是 创建一个单元测试项目 在其中利用HttpClient 模拟浏览器 webapi 进行post请求来验证程序. [TestClass] public class ProductTest ...

  7. 1.开始第一个MVC项目

    安装就不说了 1.在指定路径创建好项目文件夹之后,打开cmd,进去这个文件夹路径下 输入命令 dotnet new mvc 就会在文件夹内创建一个mvc项目 2.创建好项目之后 直接在这个路径下输入 ...

  8. WPF中Auto与*的区别

    原文:WPF中Auto与*的区别 Auto 表示自动适应显示内容的宽度, 如自动适应文本的宽度,文本有多长,控件就显示多长. * 则表示按比例来分配宽度. <ColumnDefinition W ...

  9. 神户制钢坑了500家企业 百年老店为何走上邪路?(企业经营再艰难,也不能降低产品质量,甚至偷工减料,同样适用于IT行业)

    神户制钢这颗烂萝卜,拔出它之后带出的泥越来越多.上周五社长川崎博也又开了记者会,再次道歉,而受到其数据造假影响的客户数量也从200家飙升到500家. 日本政府给神户制钢两周时间调查,还要在一个月内公布 ...

  10. .net reactor 学习系列(三)---.net reactor代码自动操作相关保护功能

    原文:.net reactor 学习系列(三)---.net reactor代码自动操作相关保护功能         接上篇,上篇已经学习了界面的各种功能以及各种配置,这篇准备学习下代码控制许可证. ...