DateRangeItem

[Abdulaziz A.]

Dear Team,

I tried using a Date Range Item in my Dynamic Form.
But I have a requirement specifying both the from and to dates appearing in the Date Range Item as mandatory.

How should I validate this. Please suggest me a solution.

We are working on the below environment:
SmartClient version : Isomorphic SmartClient/SmartGWT Framework (10.0p_2014-12-23/PowerEdition Deployment 2014-12-23)

Browser : IE9

Thanks in advance.

[Isomorphic]

If DateRangeItem.required doesn't do it, you can set the required flag on the autoChild items, like this:

{ 
    name: "someItem", 
    type: ["date" / "datetime"], 
    editorType: "DateRangeItem",
    fromFieldProperties: { required: true },
    toFieldProperties: { required: true }
}

[Abdulaziz A.]

Issue not resolved

Thanks Team for the reply but when I try to search

fromFieldProperties and toFieldProperties in the documentation, I dont find any references regarding this. Please update the documentation accordingly. I am referring to the below link.

http://www.smartclient.com/docs/10.0...ieldProperties


More over the problem is not yet rectified.
I tried the below code in the link below. But its not working. Please suggest.

http://www.smartclient.com/?skin=Gra...onallyRequired

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 250,
    titleOrientation: "top",
    fields: [
         { 
    name: "someItem", 
    colSpan: "*",
    required:true,
    useTextField:true,
    editorType: "DateRangeItem",
    fromFieldProperties: { required: true },
    toFieldProperties: { required: true }
    },
        {name: "willAttend",
         type: "radioGroup",
         colSpan: "*",
         required: true,
         vertical: false,
         valueMap: ["Yes", "No"],
         redrawOnChange:true,
         title: "Will you be attending the meeting on April 4th? If no, please provide a reason"
        },
        {name: "reason",
         type: "text",
         title: "Reason",
         validators : [{
            type: "requiredIf",
            expression: "exampleForm.getValue('willAttend') == 'No'",
            errorMessage: "Please provide a reason"
         }]
        },
        {name: "validate",
         title: "Validate",
         type: "button",
         click: "form.validate()"
        }
    
    ]
});

[Isomorphic]

It seems like you need to read up on the use of AutoChildren.

Search the doc for "using autochildren" instead - that explains how to proceed.

[Isomorphic]

As to that change not actually working, you didn't include a "type" setting, as our sample code does - and you *did* include useTextField:true, which is not a supported attribute of DateRangeItem.

[Abdulaziz A.]

Problem is not resolved

Is there any problem with this - even this is not working.

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 250,
    titleOrientation: "top",
    fields: [
         { 
    name: "someItem", 
    colSpan: "*",
    required:true,
    type: "date",
    editorType: "DateRangeItem",
    fromFieldProperties: { required: true },
    toFieldProperties: { required: true }
    },
        {name: "validate",
         title: "Validate",
         type: "button",
         click: "form.validate()"
        }
    
    ]
});

[Isomorphic]

hmm - so, what's failing here is the isDate validator - this is automatically assigned by giving the outer item type: "date", as we suggested you should, but it is not dealing with a DateRange object, which is what DateRangeItem returns.

We'll look at how best to deal with that.

In the meantime, don't set a type on the outer DateRangeItem, and have your validate code specifically call validateRange() on the DRI - like this:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 250,
    titleOrientation: "top",
    fields: [
        { 
            name: "someItem", 
            colSpan: "*",
            editorType: "DateRangeItem",
            fromFieldProperties: { required: true },
            toFieldProperties: { required: true }
        },
        {
            name: "validate",
            title: "Validate",
            type: "button",
            click : function (form) {
                var valid = form.getItem(0).validateRange() && form.validate();
                return valid;
            }
        }
    
    ]
});

[Abdulaziz A.]

Please also take care of the below

When the DateRangeItem itself has a property required:false
then when I do

 form.getItem(0).validateRange()

as you have specified, still its showing that these 2 are mandatory.

Please use the below code for your reference.

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 250,
    titleOrientation: "top",
    fields: [
         { 
    name: "someItem", 
    colSpan: "*",
    required:false,
    editorType: "DateRangeItem",
    fromFieldProperties: { required: true },
    toFieldProperties: { required: true }
    },
        {name: "validate",
         title: "Validate",
         type: "button",
         click: "form.validate() && form.getItem(0).validateRange()"
        }
    
    ]
});

[Isomorphic]

That's expected behavior - the inner items are still required:true - and you're calling a method that validates the inner items....

[Isomorphic]

Just to confirm - the previous solution (post 7) is the correct one.

A field in a form with a DateRangeItem should not be declared type:"date" because it does not produce Date objects, it produces DateRange objects.

Setting the "required" flag via the AutoChild system is the right way to require both dates to be entered.

For any other kind of validation - startDate within a certain range for example - provide a validator of type "custom" and implement logic that expects a DateRange object as the value of the field and performs whatever checks you require.

[Abdulaziz A.]

Thanks.