Calendar using locale date format

[NoFr1ends]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior
Currently it is only possible to provide a date format string to the Calendar component.

Expected behavior
It would be nice to also have the ability to have a prop where I can give an instance of Intl.DateTimeFormat and use that instead of a date format string.
We should consider what we should do if this is not implemented in the current browser (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Browser_compatibility).

If it is okay to add a new optional property to the Calendar component and modify the formatDateTime method accordingly I can submit a PR.

[carlesfelix]

I have the same problem. I guess it would be better accepting a callback in the dateFormat prop. So we can pick the value and return an any string as the parsed value in the input.

<Calendar
      className={rootClassName}
      inputId={id}
      value={value}
      ref={ref}
      inputRef={inputRef}
      name={name}
      onChange={changeHandler}
      disabled={disabled}
      onBlur={blurHandler}
      minDate={minDate}
      maxDate={maxDate}
      readOnlyInput
      showButtonBar
      showIcon
      dateFormat={d => {
        // This callback will let us to have freedom to parse whatever
        return d.toLocaleDateString();
      }}
    />

I went for this temporary solution. I don't like this way because if we transform a date containing letters like 'y', 'm' the library will replace by years, or months. For me it fits fine for now because I want to display always numbers and slashes but I don't think it's de best solution if we want non limitations.

return (
    <Calendar
      className={rootClassName}
      inputId={id}
      value={value}
      ref={ref}
      inputRef={inputRef}
      name={name}
      onChange={changeHandler}
      disabled={disabled }
      onBlur={blurHandler}
      minDate={minDate}
      maxDate={maxDate}
      readOnlyInput
      showButtonBar
      showIcon
      dateFormat={value instanceof Date ? value.toLocaleDateString() : ''}
    />
  );

[melloware]

Implemented in 8.6.2. See: #3381