[REACT] Display error message/ dialog in editEvent

[pavithrapronto]

Hi,

I want to validate date field. when the user enters a previous date, I want to ,

• Display an inline error message under the appropriate field OR

• Display an error dialog/message box on top of the edit event dialog and then returning to the edit event dialog on closing the message.

Please refer the below image

[pmiklashevich]

Hello,

The easiest solution would be to set new min value, for example on change. For that you can configure startDateField on the feature:

let scheduler = new Scheduler({
    features : {
        eventEdit : {
            startDateConfig : {
                listeners : {
                    change({ source : dateField, value, oldValue, userAction }) {
                        if (!oldValue || value > oldValue) {
                            console.log('New min value set', value);
                            dateField.min = value;
                        }
                    }
                }
            }
        }
    },

Запись активности на экране 2020-06-02 в 11.27.03.gif (3.9 MiB) Viewed 1876 times

Or for example using beforeEventEditShow hook, if you need to set current value as a min and do not update it on change before it is saved.

let scheduler = new Scheduler({
    listeners : {
        beforeEventEditShow({ editor, eventRecord }) {
            editor.widgetMap.startDateField.min = eventRecord.startDate;
        }
    },

Best,
Pavel

[pavithrapronto]

Hi,
Thanks Pavel. This is working..
But my requirement is to give a WARNING
for example: -

• Dialog
  "The selected start date/time occurs in the past. Do you want to continue with the change?"
  Yes, continue with save
  No, stay on Edit dialog

• Inline (does not prevent, just warns)
  The selected start date/time occurs in the past.

Can yo please give a solution for this

[pmiklashevich]

Well, sure. You can implement your own Tooltip and show it whenever you want. Please see DateField events:
https://www.bryntum.com/docs/scheduler/#Core/widget/DateField#event-change
https://www.bryntum.com/docs/scheduler/#Core/widget/DateField#event-input

Here is an example:

import DateHelper from '../../lib/Core/helper/DateHelper.js';
import Tooltip from '../../lib/Core/widget/Tooltip.js';

function showStartDateWarning({ source : dateField, value }) {
    if (dateField.warningMin && dateField.isValid && value) {
        if (dateField.warningMin > value) {
            if (!dateField.warningTooltip || dateField.warningTooltip.isDestroyed) {
                dateField.warningTooltip = new Tooltip({
                    html        : 'WARNING!!!!',
                    forElement  : dateField.element,
                    autoShow    : true,
                    closeAction : 'destroy'
                });
            }
        }
        else if (dateField.warningTooltip && !dateField.warningTooltip.isDestroyed) {
            dateField.warningTooltip.close();
        }
    }
}

const scheduler = new Scheduler({
    listeners : {
        beforeEventEditShow({ editor, eventRecord }) {
            // set your custom property
            editor.widgetMap.startDateField.warningMin = DateHelper.clearTime(eventRecord.startDate);
        }
    },
    features : {
        eventEdit : {
            startDateConfig : {
                listeners : {
                    input  : showStartDateWarning,
                    change : showStartDateWarning
                }
            }
        }
    },

Снимок экрана 2020-06-02 в 16.28.03.png (176.1 KiB) Viewed 1872 times

Best,
Pavel

[pavithrapronto]

This is working.. Thanks.. Anyway can we have this text color in red without effecting to the other tool tips

[pavithrapronto]

Hi ,

I want this to be done for time field as well.. when I change the value, it gives a value with 1970 jan something

[pmiklashevich]

Hello,

Time field and date field are 2 different fields and they operate different values. When we load data to the editor we clone the date and clear time of the date and set it to the date field. So date field doesn't have info about time. The same happens to the time field. We clone original date, clear year info (in your case it's 01-01-1970, but it's changed to 01-01-2020 in future releases due to some problems with date parsing in Safari and Edge) and set it to the time field. When we save dates we merge date info and hour info into a one date and set it to the data field. So if you need to do complex checking you need to subscribe to all fields changes, and get values from old fields (you can check editor.widgetMap to see what fields are registered), merge the values for example using our DateHelper class, and do your comparison.

Anyway can we have this text color in red without effecting to the other tool tips

Yes, you can style the message the way you want. You can set css class to your tooltip (see cls) and add corresponding styles to your stylesheets.

Cheers,
Pavel

UPDATED: We are going to refactor Event Editor in next major release and introduce a new component for date and time, so it will be easy to get the value. Stay tuned! https://github.com/bryntum/support/issues/873