DatePicker broken? about carbon-components-svelte HOT 5 CLOSED

Thanks for raising this bug.

In CodeSandbox, the DatePicker for type "single" or "range" is throwing an error. Strangely, the Storybook works.

from carbon-components-svelte.

After some more debugging, I'm having trouble reproducing the error outside of CodeSandbox. However, I believe the error results from base (first parameter of flatpickr) being read as "null."

The DatePicker component works fine in:

• Storybook
• Non-CodeSandbox Webpack set-up

Furthermore, I've isolated the DatePicker component in CodeSandbox, and it is working fine: https://codesandbox.io/s/datepicker-xcuo6

@drop1down Could you provide more info on your set-up? Were you just using the CodeSandbox linked in the README?

from carbon-components-svelte.

i used on local machine with fresh template from here:
https://github.com/sveltejs/template/archive/master.zip

add carbon-components-svelte to package.json
npm install

replace App.svelte with this:

<script>
	import { Datepicker } from 'carbon-components-svelte';
</script>

<main>
	<DatePicker />
</main>

npm run dev

this is my result in any browser / win 10:

<div class="bx--form-item"><div class="bx--date-picker bx--date-picker--simple" id="0.6775614213691941"></div></div>

from carbon-components-svelte.

Sorry, i added your example to my code and this works:

<script>
 import { DatePicker,DatePickerInput}  from "carbon-components-svelte";

 let value = "";
</script>

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/css/carbon-components.min.css" />
</svelte:head>

<DatePicker
  id="date-picker"
  bind:value
  datePickerType="single"
  on:change={({ detail }) => {
    console.log('change', detail);
  }}>
  <DatePickerInput id="date-picker-input"
    placeholder='mm/dd/yyyy'
    on:close={() => {
      console.log('on:close');
    }}
    on:input={() => {
      console.log('on:input');
    }} />
</DatePicker>

Is this correct way how to use it?
I thought at first <DatePicker /> was enough

I had some problems with carbon documentation @ StoryBook,
because examples and info was hidden. I need to click "Show Info".

from carbon-components-svelte.

@drop1down Yes, that's the correct way to use it. The Storybook story source code is in same folder as the component; it's a bit hidden right now.

We're rewriting the documentation from scratch where the code usage is as the forefront (#100).

from carbon-components-svelte.