Use datepicker in natural language form

[ghassen1khalil]

Use NxDatefield into NxNaturalLanguageForm

🎖 Goals

I'm creating a NxNaturalLanguageForm containung an NxDatefield

👌 Requirements

Add NxDatefield to NxWord

Details

Actually NxNaturalLanguageForm is compound with NxWord tags in which I want to use NxDatefield

[Phil147]

Hi @ghassen1khalil

in principle this is already possible but was not really supposed to be used. The nxDatefield is a directive you can add on the input you put into nx-word.

<nx-word nxLabel='Date'>
    <input nxDatefield nxInput required [(ngModel)]="currentDate"/>
    <div nxError>This field is required.</div>
  </nx-word>

I just saw that the width calculation is wrong because it uses the stringified date object and not the value of the input field but that can be mitigated right now with a max-width on the nx-word (see stackblitz example below). Be aware that the natural language form doesn't have supportive features like the hint from the formfields to assist the user about the date format. When the natural language form was designed it was only intended to be used with simple inputs and dropdowns, so right now it is not intended to add a datepicker calendar. Anything else than an input or a dropdown is not projected into the nx-word element.

Full example on stackblitz: https://stackblitz.com/edit/nlf-datefield?file=src/app/natural-language-form-basic-example.html

Does that help or what exactly are your intentions?

[ghassen1khalil]

Hi @Phil147

Thanks for helping.

Actually in my description I forgot to mention that I need to use an nxDateField with a nxDatePicker to let users choose the date from calendar and not only type it. I know that date was not intended to be part of the nxNaturalLanguageForm that's why I created this thread as a "feature suggestion" but I think when speaking about natural language we often use dates.

Thanks in advance :)

[Phil147]

Hi @ghassen1khalil yep that is some helpful addition :) I changed the title accordingly. We put it in our backlog but it's not a big priority right now. You could already help yourself and put the datepicker outside the nx-word element and with a little bit of CSS make it look like the line from the input is expanding under the datepicker icon.

[ghassen1khalil]

Hi @Phil147 Ok thanks for the hints 👍

[Phil147]

Hi @ghassen1khalil

we have deprioritized everything related to the NLF so I'm going to close this issue for now. There might be a general shift away from the NLF and we are waiting for more feedback here. The workaround as described above is still possible for this use case.