DateTime Field when set to required only applies when Date is entered

Good day

I created an attribute of data type DateTime and made it mandatory (required). Both the date and time is crucial and the user should enter them both. Currently the studio only focus on the date, once the date is entered, studio allows the user to commit changes without entering the time and automatically set the time to 00:00.
Date and time is crucial for my system and should both be entered by the user. I want commit to execute to true only if both the date and time is entered.

Please help with this.

Thank you in advance.
Date

In the above picture, i want studio to commit changes only when both date and time is entered and not only the date.

Hello, @Indileni!

You have to extend DateField in your project and add your logic to this component. I have prepared a small demo project that demonstrates this.

Custom dateField code
public MyWebDateField() {
    super();
    timeField.addValueChangeListener(event -> {
        LocalTime value = event.getValue();
        // remove error state from timeField if value is not null
        if (value != null) {
            timeField.setComponentError(null);
        }
    });
}

@Override
public void validate() throws ValidationException {
    super.validate();
    // when editor validates fields we check that timeField does not have "default" value
    if (isValueEqualToDefault(timeField.getValue())) {
        // if so, set error to this field and throw an exception
        timeField.setComponentError(new UserError(messages.getMessage(this.getClass(), "timeField.required")));
        throw new ValidationException(messages.getMessage(this.getClass(), "timeField.required"));
    }
}

protected boolean isValueEqualToDefault(LocalTime value) {
    if (value == null) {
        return false;
    }
    return value.compareTo(LocalTime.MIDNIGHT) == 0;
}

To register your custom component you need to add property

cuba.web.componentsConfig=+com/company/datefield/web/my-components.xml

Which contains information about your component (class, loader, etc).

See demo project: datefield.zip (84.1 KB)

Or another way split your DateTime attribute in the Entity to separated date and time attributes. It will be easy to handle values and you can show these attributes together something like this:

<form id="form" dataContainer="customerDc">
    <column width="250px">
        <textField id="nameField" property="name"/>
        <hbox spacing="true">
            <dateField id="dateField" property="date"/>
            <timeField id="timeField" property="time"/>
        </hbox>
    </column>
</form>

Hi, @Pinyazhin

Thank you for your response. I have been using CUBA Studio SE v.6.10.2 ever since i started this project and the version you used for demo project is not compatible with my version. Perhaps do a demo a version compatible to mine.

I have tried doing it by splitting DateTime.
I took a dateField and timeField as you showed in your response, then i would convert both field into values of long datatype which i then add to have a single value. I then again take this value convert it back into a date. BUT… whenever i convert this value back to a readable date so i can save it as a normal DateTime, it always displays the correct date but 2hours back.

Below is the code i use to do this, try it and help me solve this. Thank you.

Date date = getItem().getDate2();
Date time = getItem().getTime();

long completeDate = date.getTime() + time.getTime();
Date newDateTime = new Date(completeDate);

Example if date and time had values:
Date: 05/03/2020
Time: 12:00

newDateTime = 05/03/2020 10:00 instead of 05/03/2020 12:00

About two fields, I meant to save it to the separated attributes in Entity. I’ve made a demo project compatible with the 6.10 version. There you can find two ways how to make timeField required: datefielddemo.zip (94.1 KB)

You see such result because of system time zone. In 6.10 vesion you can use the following code to ignore it:

Date date = dateField.getValue();
Date time = timeField.getValue();

Calendar dateCalendar = Calendar.getInstance(userSession.getLocale());
dateCalendar.setTime(date);

Calendar timeCalendar = Calendar.getInstance(userSession.getLocale());
timeCalendar.setTime(time);

dateCalendar.set(Calendar.HOUR_OF_DAY, timeCalendar.get(Calendar.HOUR_OF_DAY));
dateCalendar.set(Calendar.MINUTE, timeCalendar.get(Calendar.MINUTE));
dateCalendar.set(Calendar.SECOND, timeCalendar.get(Calendar.SECOND));

Date completedDate = dateCalendar.getTime();

Thank you very much @Pinyazhin
I will try that out.