extjs 如何禁用日期时间控件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs 如何禁用日期时间控件相关的知识,希望对你有一定的参考价值。

就是点击日期图标不会弹出日历
或者日历被禁用了,是灰色的

回答:如果还想把日期的值传到后台,你可以在表单里多加一个Hidden项,name与日期框的name相同就可以了。Ext默认是disabled的表单项不会被提交的

这是一个解决问题的办法,我想知道有没有类似readonly(目前的满足不了需求)的属性,不仅不能手输入,而且重新选择的日期也不会改变原有的值。我是直接把xType改为textfield,并设置readonly为true,因为日期控件反正也用不着。这个东西涉及权限,有权限的可以改,没有的不可以改。但是,这样就需要维护两个页面了。

1、extjs日期控件禁用:设置editable:false这个属性即可。
editable:是否可编辑,默认为true 。

2、Extjs日期控件禁止用户输入(设置readOnly为true):
JScript 代码 :

xtype:"datefield",
format:"Y-m-d",
value:"1986-12-25",
readOnly:true, //设置为true为只读状态,禁止用户输入
fieldLabel:"Birth"


3、extjs DateField 的值用getValue()方法获取后是一大堆字符串,类似Tue Dec 07 2010 00:00:00 GMT 0800,存入数据库需要格式化一下,用EXT的Ext.util.Format.date()方法:
var gedt = Ext.util.Format.date(日期控件.getValue(), 'Y-m-d');
出来的日期格式就是 2010-10-10。
参考技术A 如果还想把日期的值传到后台,你可以在表单里多加一个Hidden项,name与日期框的name相同就可以了。Ext默认是disabled的表单项不会被提交的 参考技术B 可以这样迁就着解决:先设置日期控件 disable : false, 然后在formPanel 提交前,再取得控件把它 disable : true , 就可以满足你的需求了.追问

不行。这样,我就可以在你提交前修改了。

追答

用户在页面已经点了提交按钮,怎么会再修改呢?估计你没明白我的意思
if (conf.formPanel.getForm().isValid())
//在这里取得日期控件把disable : true ,
conf.formPanel.getForm().submit(
//这里提交就有日期那个参数了,
//假如你的表单提交完之后不关闭窗口,那可以在
success : function(action,e)
//在这里面再把日期控件disable : false就可以了

);

追问

你的意思是提交后再disable掉,我的需求是进到这个页面,没有权限的就不可以修改,所以用隐藏域算是一个比较好的解决方法了。而不是二次提交不准修改日期。

参考技术C 在日期配置中加
disabled : true
就行了追问

但是原来的数据是没法传到后台的。

追答

什么意思,你要禁用Ext日期控件,在日期控件配置中设置这句就行了,又关后台什么事了啊

参考技术D editable:false

EXTJS 6 - 日期控件 Date picker 只选年月

官方没有支持,只能自己写一下了。

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;
        return Ext.create('Ext.picker.Month', 
            pickerField: me,
            ownerCt: me.ownerCt,
            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();
                
            
        );
    ,
    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]);
    
);

如何使用?

Ext.create('Ext.form.field.Month', 
        format: 'F, Y',
        fieldLabel: 'Date',
        renderTo: Ext.getBody()
    );

以上是关于extjs 如何禁用日期时间控件的主要内容,如果未能解决你的问题,请参考以下文章

Extjs DateTime 日期时间选择控件 (非点击日期强制选择) 支持4.0以上

如果用户手动输入数据,如何禁用日历控件?

Extjs 5.x 日期时间控件DateTime源码

extjs日期控件使用

在jquery中禁用当前日期之前的日期并且输入在用户控件中并且用户控件在更新面板中

基于数据库选择在 ajax 日历控件中突出显示/禁用特定日期