Date validation on DateColumn

[janan]

https://www.bryntum.com/examples/grid/columntypes/.
In the following example, is it possible to do a date validation for the date column. We are trying to use start and end date. Is it supported to have a onchange and set min and max value for date?

[sergey.maltsev]

Hi!

You can use DateField min/ max config for cell editor
https://www.bryntum.com/docs/grid/#Common/widget/DateField

        {
            text   : 'Date',
            field  : 'start',
            type   : 'date',
            editor : { min : '09/01/2019', max : '09/10/2019' }
        },

[kerstin]

Thanks,
Is it possible to do this when one of the dates are changed? Like this:

 {
    text: 'Starting',
    id: 'start',
    type: 'date',
    field: 'start',
    format: 'YYYY-MM-DD',
    width: '9em',
    editor: {
      type: 'datefield',
      format: 'YYYY-MM-DD',
      listeners: {
        change: function(ev) {
          // Set min on finish date field based on new value
          finish_editor = undefined; // find editor
          finish_editor.min = ev.value;
          // Update finish to start if finish is before start
          finish_value = undefined; // find current value of finish
          if (finish_value < ev.value) {
            // Update finish value to same as start
          }
        },
      }
    }
  }, {
    text: 'Finish',
    id: 'finish',
    type: 'date',
    field: 'finish',
    format: 'YYYY-MM-DD',
    width: '9em',
    editor: {
      type: 'datefield',
      format: 'YYYY-MM-DD',
      listeners: {
        change: function(ev) {
          // Set max on start date field based on new value
          start_editor = undefined; // find editor
          start_editor.max = ev.value;
          // Update start to finish if start is after finish
          start_value = undefined; // find current value of start
          if (start_value > ev.value) {
            // Update start value to same as finish
          }
        },
      }
    }
  },

Is it possible to find the paired field editor and if needed set the paired value?

[sergey.maltsev]

Hi!

Sure you can.

            editor : {
                format    : 'YYYY-MM-DD',
                listeners : {
                    change : ({ source, value }) => {
                        // value - current value
                        // source - DateField
                    }
                }
            }

[janan]

Hi,
When we have start date and finish date column, is it possible to access the finish date in change function of start date ? Can you check the example above Kerstin has written? We need to validate that start date is not greater than finish date and so.

[sergey.maltsev]

Hi!
You can use startCellEdit event to update editor parameters.
https://www.bryntum.com/docs/grid/#Grid/feature/CellEdit#event-startCellEdit

Use editorContext.editor.inputField to access DateField.
https://www.bryntum.com/docs/grid/#Common/widget/Editor#config-inputField

grid.on('startCellEdit', ({ editorContext }) => {
    if (editorContext.column.field === 'start') {
        editorContext.editor.inputField.min = yourMethodToGetStartMinValue();
    }
});

[kerstin]

Thanks,
Could you please show an example of how I can find the value in the functions "yourMethodToGetStartMaxValue()/yourMethodToGetStartMinValue()".
When editorContext.column.field == 'start' I want to find the current end date, and when in editorContext.column.field == 'end' I want to find the current start date. How can I find the "other" value?

[sergey.maltsev]

Hi!

You can use editorContext.record to access current record and you could the set any editor fields depending on record's data.
Please refer to the startCellEdit docs for available event data.

Simple demo.

const grid = new Grid({

    appendTo : 'container',

    columns : [
        {
            text  : 'Name',
            field : 'name'
        },
        { text  : 'Start date',
            field : 'start',
            type  : 'date'
        },

        { text  : 'End date',
            field : 'finish',
            type  : 'date'
        },
        {
            type : 'rating',
            text : 'Rating'
        }
    ],

    data : DataGenerator.generateData(50)
});

grid.on('startCellEdit', ({ editorContext }) => {
    const
        { column, editor, record } = editorContext,
        inputField = editor.inputField;

    if (column.field === 'start') {
        console.log(`Edit start field for record ${record.id}`);
        inputField.max = record.finish;

    }
    else if (column.field === 'finish') {
        console.log(`Edit finish field for record ${record.id}`);
        inputField.min = record.start;
    }
});