designdialog and dialog date format issue

[naveenp1258706]

Hi team,

in design dialog i have created 3 different date formats when i am calling in dialog using "displayed format" property like changing value dynamically. i'm getting unknow language error in dialog.

dialog screenshot:

design dialog screenshot:

it is dropdown 

on page it is displaying unknown language.

[Mahedi_Sabuj]

The ${cqDesign.propertyName} variable works with the 'value' and 'granite:hide' properties in the component dialog. In case of other properties, act as static strings without executing expressions. 
https://myaemlearnings.blogspot.com/2018/04/cqdesign-variable-in-expression.html 

HTML code generates "displayFormat=${cqDesign.dateFormat}" as indicated in the screenshot below.

 

As an alternative, I believe you can use standard date format on Component Dialog. Later, you can show the date in the HTML based on the chosen selection in the design dialog using Sling Model.

@ScriptVariable
protected Style currentStyle;

if(this.currentStyle != null) {
  String displayFormat = currentStyle.get("displayFormat", DEFAULT_FORMAT);
  //format your date here
}

[Mahedi_Sabuj · Accepted solution]

By researching further of granite coral datepicker, found that value uses Expression Language using getExpressionHelper, hence value transform into design dialog value. 

String value = cmp.getValue().val(
  cmp.getExpressionHelper().getString(cfg.get("value", "")));​​​​​

On the other hand, dateFormat is evaluated as static string. 

attrs.add("displayformat", 
  i18n.getVar(cfg.get("displayedFormat", String.class)));

It appears that this behavior is expected. The reason you're encountering random values is due to certain characters coinciding with date format placeholders like 'D', 'e', and 'a'. As a result, these characters are being substituted with the corresponding values.

Reference:
/libs/granite/ui/components/coral/foundation/form/datepicker/init.jsp
/libs/granite/ui/components/coral/foundation/form/datepicker/render.jsp