Add Date validator to DataTable

Hello Plumsail,

I have a requirement to add a date validator to the DataTable control.

I need to check if the value in the "EndDate" column is less than the "StartDate" column. If this is TRUE, then I want this to throw an error to the user.

I'm not sure how to construct the code for this as I've never explored the DataTable option until now.

Is there anyway, you can stop users from selecting/entering a date prior to this in the calendar picker when they select a "StartDate"? For example, if they select 1/1/2024 as the "StartDate", the "EndDate" column will only show dates after this point in time and nothing prior to this date.

Thank you!

Hi @DryChips,

Try this:

var dt = fd.control('DataTable1');

dt.$on('edit', ev => {
    // get column which we want to edit
    const column = ev.column;
    //console.log(column)
    // model contains current row values
    const model = ev.model;

    // if it's not a target column then return do nothing
    if (column.field != 'EndDate') return;
    
    // use datetimepicker for Date and Time column type
    let dropdown = ev.container.find('input[data-role="datepicker"]');
    if (model.StartDate) {
        dropdown.kendoDatePicker({
            min: new Date(model.StartDate)
        })
    }
})

Sorry, I'm struggling to understand this code. Is this plug and play?

Can you please send me a video of the code in action?

@DryChips,

The code modifies the widget of the Date column. It sets the minimum date available in the calendar based on another column value:

If it you also need validation, you can add it to the entire Data Table.

1 Like