Results 1 to 8 of 8

Thread: Forcing select on datefield

  1. #1
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72

    Default Forcing select on datefield

    I've implemented the date reange v-type in my application, used as follows:

    Code:
    
    xtype: 'datefield',
    id: 'planStartDt',
    format: 'Y-m-d',
    fieldLabel: 'Start Date',
    dataIndex: 'PlanningPhaseStartDate',
    allowBlank: true,
    vtype: 'daterange',
    endDateField: 'planEndDt'// id of the end date field
    
    Only problem is that the user can still manually enter a start date that is after the end date and the validator doesn't pick it up. Is it possible to disable text entry on the date field so that the user must use the date picker?

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    I didn't see anything in the API that looked like it would allow you to force the use of the datePicker only, but I did see "maxDate" as a config object. Might that work to keep the user from entering a start date after the end date specified?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. The validator should pick up this change on blur of the field (but there is a bug in Ext if you using a locale file; fix here).
    2. You could try editable:false (it's been added recently, so it could be that it isn't supported in Ext 2.2.1 yet).

  4. #4
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72

    Default

    I've swapped between two validators i have found in old threads on this forum:


    Code:
    daterange : function(val, field) {
            var date = field.parseDate(val);
            if(!date){
                return;
            }
            if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
                var start = Ext.getCmp(field.startDateField);
                start.setMaxValue(date);
                start.validate();
                this.dateRangeMax = date;
            } 
            else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
                var end = Ext.getCmp(field.endDateField);
                end.setMinValue(date);
                end.validate();
                this.dateRangeMin = date;
            }
            /*
             * Always return true since we're only using this vtype to set the
             * min/max allowed values (these are tested for after the vtype test)
             */
            return true;
        }
    this code caused a few problems... it was fine if i only had one set of date fields, but my panel uses 5, as soon as i introudced a second set of start and end date fields i'd get a 'too many recursions' error. so i swithed the code to the following:

    Code:
    
    var date = field.parseDate(val), otherFieldProp, dateProp, other;
    
    if (field.startDateField) {
    otherFieldProp = 'startDateField';
    dateProp = 'max';
    }
    elseif (field.endDateField) {
    otherFieldProp = 'endDateField';
    dateProp = 'min';
    }
    
    if (otherFieldProp && field[otherFieldProp]) {
    other = field[otherFieldProp];
    if (typeof other == 'string'){
    other = field[otherFieldProp] = field.ownerCt.getComponent(other) || Ext.getCmp(other);
    }
    if (!other[dateProp + 'OldValue'] || other[dateProp + 'OldValue'] != (date?date.getTime():undefined)) {
    other[dateProp + 'Value'] = date;
    if (other.menu && other.menu.picker) {
    other.menu.picker[dateProp + 'Date'] = date;
    other.menu.picker.update(other.menu.picker.activeDate, true);
    }
    other[dateProp + 'OldValue'] = date ? date.getTime() : undefined;
    }
    }
    
    returntrue;
    }
    
    I see that the first validator sets the Max and Min dates - which would catch any error in manual user entry. so maybe i could write one that is a combination of the two validators? or was i doing something wrong with my implementation of the first validator?


    thanks

  5. #5
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72

    Default

    Quote Originally Posted by Condor View Post
    1. The validator should pick up this change on blur of the field (but there is a bug in Ext if you using a locale file; fix here).
    2. You could try editable:false (it's been added recently, so it could be that it isn't supported in Ext 2.2.1 yet).
    1. I don't really understand what you mean
    2. Setting editable false doesn't seem to do anything so i'd assume its not supported in 2.2.1

    thanks

  6. #6
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72

    Default

    somethign else i've notioced... previously on my page the save button would automatically disable if any fields were invalid, i.e. a allowBlank:false is empty, but now i do get the squiggly red line but i can still click save. so this could play a part in why these invalid dates can be saved. is there something i need to do to reactivate this feature on my button (though it appeared to be automatic before as i never did anything to set this up).

    also, just wondering if i can set up a watermark/mask on the date field so that if the user does choose to manually type it in they can only enter it in yyyy-mm-dd format. and it will initially appear as something like xxxx-xx-xx.

    thanks

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Did you set monitorValid:true in the form config and formBind:true in the button config (only works if the button is in the buttons array of the form!).

    Alternatively you could set monitorValid:true and write a clientvalidation event handler that calls setDisabled(!valid) on the button.

  8. #8
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72

    Default

    I was missing the monitorValid:true. it appears to work now. thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •