Add name and class property to DateInput

[bluepuma77]

It would be great to have a name and class property on DateInput. That would enable manual input/submit when having disabled JS and use something like bootstrap CSS to enable styling of the input box and to enable a red box upon wrong input.

[probablykasper]

There actually is an undocumented class property on DateInput

I can't add name to the actual <input>, but there could be a fake input for form submission. What format should the value be, unix timestamp?

[bluepuma77]

Great to have class already. Value I would set to ISO format.

[bluepuma77]

Ah, but the class is on the parent, not on the input field.

So the input field is not getting the right CSS

[bluepuma77]

@probablykasper Here a proposal: add properties name [as name] and inputClass (or innerClass) [as class] to input tag.

[probablykasper]

Adding name to the input tag would cause lots of headaches, so I would only go with the fake input solution.

It would be nice if there's a way to avoid having multiple class properties

[bluepuma77]

I doubt that you can avoid multiple class properties. Some need to go to the outer div, some to the input field if displayed. svelty-picker supports "inputClasses" for "input css class string".

What's the issue with the name property? Can't it simply be:

<script lang="ts">
    export let name = ''
</script>

<input name={name} />

[probablykasper]

See

• Add name prop #44

[bluepuma77]

It might also make sense to have an <DateInput inputId="id" /> to be able to use <label for="id" /> for accessibility.

Maybe right next to <DateInput inputClass="form-control" /> ;-)

[bluepuma77]

My last try regarding name: Maybe just use <DateInput inputName="creation" /> to assign a name to the input field as backup when SSR is used and no JS on client is allowed.

I don't worry about the format, as it is written in the input already, so the server can deal with it. And if you really want a fixed format, the Date().toISOString() is probably the common standard in JS/Node/JSON.

[probablykasper]

id is suggested in another issue for making <label> possible yeah.

All good that you don't worry about the format, but other people will so I'm pretty against that approach. I don't know if there's any good way to support SSR :/

[bluepuma77]

I forked and added a type check and inputClass, inputStyle, inputName. You want a pull request?

[probablykasper]

Nice! No thanks, I'd need to think about it

[wwmike]

+1
It would be a nice feature, I could solve it only this way:

<style lang="postcss">
	:global(.birthdayPlaceholder input) {
		@apply !w-2/3 !p-3 !pl-5 !my-4 !text-sm !text-gray-400 !border-solid !shadow-inner !placeholder-inherit !bg-gray-50;
	}
</style>

which looks terrible.