mskocik / svelty-picker

Simple date & time picker in svelte
https://mskocik.github.io/svelty-picker/
202 stars 46 forks source link

Ability to bind `date` object #145

Open bluepuma77 opened 1 year ago

bluepuma77 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

bluepuma77 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@bluepuma77 Is this still relevant for you?

bluepuma77 commented 1 year ago

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

mskocik commented 1 year ago

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