Ability to bind date object

[bluepuma77]

Trying to get svelty-picker to work with sveltekit-superforms and my own form input builder.

<SveltyPicker
    name={name}
    aria-invalid={$errors[name] ? "true" : undefined}
    bind:value={form[name]}
    mode="date"
    i18n={de}
    format="yyyy-mm-dd"
    manualInput={true}
    displayFormat="dd.mm.yyyy"
    inputClasses="form-control {$errors[name]?'errorField':''}"
/>

My current issue is that after submit and reload, svelty-picker breaks, I assume because the bind:value is null or undefined.

Uncaught (in promise) TypeError: (intermediate value).split is not a function
    watchExternalValueChange SveltyPicker.svelte:172
    update SveltyPicker.svelte:135
    update scheduler.js:115
    flush scheduler.js:79
    promise callback*schedule_update scheduler.js:20
    make_dirty Component.js:81
    ctx Component.js:139
    $$set root.svelte:638

Is it possible to improve this, so even if null or undefined is supplied, the date is shown empty and not breaking the component? Maybe some more checking or using try catch?

[mskocik]

This is weird, because setting value to null works correctly. I would need reproducible example.

The error from your log is probably referring to this line:

(stringValue || '').split(',')

but as you can see, null value is handled properly by replacing with empty string

[mskocik]

@bluepuma77 Are you sure you are binding string as a value?

[bluepuma77]

@mskocik Sorry, it's a big setup, so reproduction would take some time.

Today I got a slightly different error:

TypeError: value.split is not a function
    at Module.initProps (/Users/Develop/node_modules/svelty-picker/dist/utils/state.js:22:66)
    at /Users/Develop/node_modules/svelty-picker/dist/components/SveltyPicker.svelte:94:47
    at Object.$$render (/Users/Develop/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at /Users/Develop/src/routes/incident/InputDate.svelte:13:54

which points to this line:

    22	  let valueArray = value ? (Array.isArray(value) ? value : value.split(',')) : [];

I think I might bind a Date instead of a String.

And when I turn it into a String, then SuperForms using its schema indicates the field as error...

[mskocik]

yes, passing the Date would explain given error. String is expected, Date objects are used internally. But they are exported on dateChange event, if that would help your use case.

[bluepuma77]

@mskocik Would the current architecture allow for an extension like

<SveltyPicker
    name={name}
    bind:date={form[name]}
/>

to enable a date variable to be passed in and out?

[mskocik]

I would need to try it out, but I think it might be possible but I wouldn't recommend it due possible issues across timezones

[mskocik]

@bluepuma77 Is this still relevant for you?

[bluepuma77]

For now I switched to date-picker-svelte because that uses Date and therefore works better with SuperForms.

[mskocik]

Sure, no problem. Btw to you know, you could use proxy for that?