[BUG]: Insufficient customisation options in ConditionBuilder

[pjborowiecki]

Package

Carbon for IBM Products

Description

There is currently no way to customize a date format for a built-in date picker of the ConditionBuilder. Looking at the source code, both the fate format and the placeholder format appear to be hardcoded as d/m/Y:

  const onCloseHandler = (selectedDate) => {
    onChange(
      selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID'
    );
  };
  return (
    <div className={`${blockClass}__item-date `}>
      {datePickerType == 'single' && (
        <DatePicker
          ref={DatePickerInputRef}
          dateFormat="d/m/Y"
          datePickerType="single"
          value={conditionState.value}
          onClose={onCloseHandler}
          appendTo={parentRef?.current}
        >
          <DatePickerInput
            id="datePicker"
            placeholder="dd/mm/yyyy"
            labelText={conditionState.property}
          />
        </DatePicker>
      )}
...

Component(s) impacted

ConditionBuilder

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.57.0

Suggested Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

IBM

CodeSandbox or Stackblitz example

https://codesanbox.io

Steps to reproduce the issue (if applicable)

Use a ConditionBuilder component with any filter of type "date". The built-in picker that shows up cannot be customised and in our use case, forces the team to implement a custom component.

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues