[Feature] Datepicker (Experimental)

[shinokada]

Experimental

Date picker component.

• [x] Default
• [ ] Inline date picker
• [x] Date range picker
• [ ] Autohide
• [x] Action buttons
• [x] Date format
• [x] Orientation
• [x] Title

[reaper-king]

Hi, using datepicker in sveltekit , breaking my app, the browser console shows follwing error Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.

[oyenmwen]

Hi, using datepicker in sveltekit , breaking my app, the browser console shows follwing error Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.

In addition to getting this error, when using range, the calendar popup just does not show up at all. And with no browser console error either

[Suyashtnt]

It would be nice to add a way to exclude dates from the datepicker. This can be used to e.g block users for preventing holiday dates for a delivery or not book already booked dates

[DrewRidley]

There is also no way to collect the value selected by the user, or any events that you can even use.

[fabiot21]

There is also no way to collect the value selected by the user, or any events that you can even use.

Any known workaround to get the value from user?

[outranker]

Hi, using datepicker in sveltekit , breaking my app, the browser console shows follwing error Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.

@reaper-king were you able to find a solution to this? i'm facing the same issue currently

[outranker]

anyone having this error: Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.

Datepicker component expects attribute prop to be non falsy value. meaning you need to pass something to it. the problem resolves

ex:

<Datepicker
    attribute="aria-label"
    placeholder="some placeholder"
    for="some_for"
    datepickerFormat="dd/mm/yyyy"
    datepickerTitle="some title"
/>

[sachinaugi07]

anyone having this error: Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.

Datepicker component expects attribute prop to be non falsy value. meaning you need to pass something to it. the problem resolves

ex:

<Datepicker
  attribute="aria-label"
  placeholder="some placeholder"
  for="some_for"
  datepickerFormat="dd/mm/yyyy"
  datepickerTitle="some title"
/>

This did resolve the issue but when I click on the input field the date dropdown does not pop up.

[outranker]

anyone having this error: Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. Datepicker component expects attribute prop to be non falsy value. meaning you need to pass something to it. the problem resolves ex:

<Datepicker
    attribute="aria-label"
    placeholder="some placeholder"
    for="some_for"
    datepickerFormat="dd/mm/yyyy"
    datepickerTitle="some title"
/>

This did resolve the issue but when I click on the input field the date dropdown does not pop up.

that's odd. it's working fine for me. tho i have one more prop defined which is datepickerButtons set to false. you will need to show some code and any error message that might exist in order for others to help you out with this

[RichardJohnn]

If you use Datepicker in a form and submit it, you can read the values that way, at least with range. The inputs are named 'start' and 'end'

[...]
  function handleSubmit(event) {
    event.preventDefault();
    console.log(event.target.elements['start'].value);
    console.log(event.target.elements['end'].value);
  }
</script>

<form on:submit={handleSubmit}>
  <Datepicker 
      range 
      datepickerFormat="yyyy-mm-dd" 
      datepickerButtons=true />
  <button type="submit">
    Submit
  </button>
</form>