Using the calender with an editable input - need highlighted to be set as a property

[laviniaLupsa]

We are trying to use the svelte-calender in our project and we need to have an input that will display the selected date. The input should be editable, meaning that the data can be changed and it should reflect in the calender selection.

The code I am using: `<Datepicker bind:formattedSelected={selectedDateFormatted} bind:selected={selectedDate} bind:dateChosen={userHasChosenDate}
format={'#{Y}-#{m}-#{d}'}

<input type="text" value={dateToString(selectedDate)} on:keyup={updateOnKeyUp} /> `

On the updateOnKeyUp method I convert the input, validate the date and if everything is ok it will set the new values for selectedDate and selectedDateFormatted. The new date is set correctly on the calendar view, BUT if the next thing that I do is click ENTER the event is caught by the Datepicker component and the selected date will be set with the value from highlighted variable. From my tests, having the highlighted variable set as a property would help with this issue.

[6eDesign]

Hi @laviniaLupsa. I have recently been experimenting on a complete re-write of this component and this use case (allowing user to input date via keyboard) is something I'd like to support. The re-factor is coming along quite well but I'm not sure exactly when it will be ready for publishing at this time.

In the meantime, do you think you might be able to listen for the keydown event on your input and call stopPropagation on the associated event when the enter key is detected? Ex:

<script>
  const handleKeyDown = (evt) => {
    if (!evt.keyCode === 13) return;
    evt.stopPropagation();
    // ... handle enter key here (perhaps close the svelte-calendar Datepicker)
  }
</script>

<input on:keydown={handleKeyDown} type="text" />

If the input in question has focus then I think this would stop svelte-calendar from intercepting the event.

[laviniaLupsa]

Hi @6eDesign , Thank you for your quick response, I have tried to catch the keyDown event and it works ok, but I do have a problem closing the Datepicker. I have tried different approaches but none were successful. Do you have any tips on this?

[jonathangreenemeier-vizio]

It does not look like I've exposed the open property for you to manipulate. I'll change this in a future/new version. I'm not sure of a clean workaround in the meantime. Perhaps you could trigger a click somewhere outside of the calendar to get it to close but this would be hacky at best.

[laviniaLupsa]

Hi @6eDesign, I have implement the workaround by clicking a hidden input used only for this purpose and also called blur on the event.target so that the input loses focus too. Thanks a lot for your support, waiting for the new version so that I can get rid of all this workarounds.

[6eDesign]

v3 is published and does not support keyboard input for dates, yet. V3 does, however, allow you to bind to the internal store and control the behavior of the datepicker and popover more directly. Please feel free to give it a shot. Please be aware that there are several breaking changes to the component props and overall functionality of the calendar. You can see the docs/demos here.

I will close this issue for now but feel free to comment or re-open with questions/feedback/etc or open a new issue if necessary.