Datepicker Validation Issue While Editing Record

Hello Team,

I am facing an issue with the datepicker control.

Suppose a record is saved with the current date, and the datepicker’s minimum and maximum range is set from the current date up to the next three months.

Now, if the user edits that same record after two days, the datepicker resets the value to the new current date and shows a validation message stating that the previously saved date is out of range.

However, my requirement is that when editing the record, the previously saved date should still be displayed in the calendar without triggering the “out of range” validation error. The min and max range can remain the same, and it is acceptable if the user is not allowed to reselect that older date again. But it should be visible when the record is opened in edit mode for the first time.

Example:
If a record was saved on 24 Feb 2026, and today is 26 Feb 2026, when editing the record, the datepicker should still display 24 Feb 2026 even though the current allowed range is from 26 Feb 2026 to the next three months.

Could you please help me with this? It is quite important.

Thank you.

Hello,

After an investigation, I have determined that your requirement could be achieved by displaying the validation message only when the date editor is focused and not when the row enters edit mode. This could be achieved by setting ‘OnBlur’ to false and ‘OnChange’ to true in the validator options.

cs.ColumnSetting().ColumnKey("Birthdate").EditorType(ColumnEditorType.DatePicker).DateEditorOptions(options =>
{
    options.ValidatorOptions(vo =>
    {
        vo.ValueRange(DateTime.Now, new DateTime(2026, 05, 29)).OnBlur(false).OnChange(true);
    });
});

However, if the user should be able to save the record if the date is not updated, even if it’s now outside the range, what I could suggest is using a custom validation method like this:

cs.ColumnSetting().ColumnKey("Birthdate").EditorType(ColumnEditorType.DatePicker).DateEditorOptions(options =>
{
    options.ValidatorOptions(vo =>
    {
        vo.Custom("validate", "Date should be in range");
    });
});

<script>
    let oldDate;
    function editRowStarting(evt, ui) {
        oldDate = $("#grid").igGrid("getCellValue", ui.rowID, "Birthdate")
    }
    function validate(value, fieldOptions) {
        let minRange = new Date();
        let maxRange = new Date();
        maxRange.setMonth(maxRange.getMonth() + 3);
        if (value.getTime() === oldDate.getTime()) {
            return true
        } else if (value >= minRange && value <= maxRange) {
            return true;
        } else {
            return false;
        }
    }
</script>

Please test this approach on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova
Infragistics

<p class=”isSelectedEnd”>Hello Monica,</p>
<p class=”isSelectedEnd”>Thank you for your response.</p>
<p class=”isSelectedEnd”>I have two date columns: action_date and action_due_date. If a row contains a date that is outside the currently allowed range and the user attempts to edit that row, the original (out-of-range) date should still be displayed. Additionally, the user should be able to save the row as long as they have not selected a new date outside the current valid range.</p>
<p class=”isSelectedEnd”>I am using a different syntax to bind the igGrid. Below is a sample column configuration for your reference:</p>
<p class=”isSelectedEnd”>{
columnKey: “action_date”,
editorType: “datepicker”,
required: true,
editorOptions: {
dateInputFormat: “yyyy-MM-dd”,
valueFormat: “date”,
datepickerOptions: {
changeMonth: true,
changeYear: true
},
validatorOptions: {
required: true,
notificationOptions: {
mode: “popover”
},
errorMessage: resource_d3_process.ActionDateReq
}
}
}</p>
<p class=”isSelectedEnd”>Could you please guide me on how to apply custom validation in this case?</p>
<p class=”isSelectedEnd”>Also, if I apply custom validation, will it interfere with the existing normal validation? Specifically, I want to ensure that the original out-of-range date is not reset automatically and that validation only applies when the user selects a new date. Even tho he wont be able to select a date out of range , it only happens during editing as user edits a record which was saved 2-3 days ago.</p>
<p class=”isSelectedEnd”>Looking forward to your response.</p>
Thanks and regards,
Rohit Rawat

Hello Monica,

Thank you for your response.

 

I have two date columns: action_date and action_due_date. If a row contains a date that is outside the currently allowed range and the user attempts to edit that row, the original (out-of-range) date should still be displayed. Additionally, the user should be able to save the row as long as they have not selected a new date outside the current valid range.

I am using a different syntax to bind the igGrid. Below is a sample column configuration for your reference:

{
columnKey: “action_date”,
editorType: “datepicker”,
required: true,
editorOptions: {
dateInputFormat: “yyyy-MM-dd”,
valueFormat: “date”,
datepickerOptions: {
changeMonth: true,
changeYear: true
},
validatorOptions: {
required: true,
notificationOptions: {
mode: “popover”
},
errorMessage: resource_d3_process.ActionDateReq
}
}
}

Could you please guide me on how to apply custom validation in this case?

Also, if I apply custom validation, will it interfere with the existing required validation? Specifically, I want to ensure that the original out-of-range date is not reset automatically and that validation only applies when the user selects a new date.

Is there any way i could turn off the max min range validation? As the date selected will always be in range during adding time and if user edit after 3 date still that day would be visible and user can change the date to new if he wants wihtin current new range?

Looking forward to your response.

Thanks and regards,
Rohit Rawat

Hello,

Both the required validation and a custom validation can be used together. With the custom validation in place, the user will not be able to select a date earlier than today. However, if an existing record is updated and the date field is not modified, the record could still be saved even if the stored date is now outside the allowed range. The validation is triggered only when a new date is selected.

The custom validation could be applied as follows:

{

          name: "Updating",

          editMode: "row",

          editRowStarting: function (evt, ui) {

            oldDate = $("#grid").igGrid("getCellValue", ui.rowID, "Date")

          },

          columnSettings: [
          {
            columnKey: "Date",
            editorType: "datepicker",
            required: true,
            editorOptions: {
                dateInputFormat: "yyyy-MM-dd/HH:mm:ss",
                valueFormat: "date",
                datepickerOptions: {
                    changeMonth: true,
                    changeYear: true
                },
                validatorOptions: {
                    required: true,
                    notificationOptions: {
                        mode: "popover"
                    },
                    errorMessage: "error",
                    custom: {
                        method: function(value, fieldOptions){
                            let minRange = new Date();
                            let maxRange = new Date();
                            maxRange.setMonth(maxRange.getMonth() + 3);
                            if (value.getTime() === oldDate.getTime()) {
                                return true
                            } else if (value >= minRange && value <= maxRange) {
                                return true;
                            } else {
                                return false;
                            }
                        },
                        errorMessage : "Value did not match"
                    }
                }
            }
          }]
        }

Please test the provided sample on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

Attachments:

1. igGridDateValidation.zip

Hello monica,

Thanks for the reply. I have checked it everything is fine but one issue. Can we  disabled the dates outside range? like if user has selected 3 march 2026 and he tries to edit it on 6 march 2026. The calendar rrange should be current  and current + 3 months rest disabled. But when he tries to edit calender should still show 3 march without out of range validation even tho its fine that he cannot selet that date again once change by opening calendaer.

If its possible do let me know. Looking forward to your response.

 

Thanks and regard

Rohit Rawat

Hello,

This could be achieved by using minDate and maxDate options of the jQuery datepicker – they set the minimum/maximum selectable date. This could be achieved as follows:

editorOptions: {

      dateInputFormat: "yyyy-MM-dd/HH:mm:ss",

      valueFormat: "date",

      datepickerOptions: {

            changeMonth: true,

            changeYear: true,

            minDate: 0,

            maxDate: "+3m"

     },

. . .

}

Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics