Skip to content

date knob incorrectly deserializes value #4

@cellog

Description

@cellog

Describe the bug
https://github.com/storybookjs/storybook/blob/next/addons/knobs/src/converters.ts#L18 has this deserialization code:

 (value: any): number => new Date(value).getTime() || new Date().getTime(),

However, since value is a Date when used in the iframe, but is a number when used in a new tab (by clicking on the open Canvas in new tab button), it always initializes to the current date.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

When deserializing, the value is a string instead of a number, and so will be the string representation of the timestamp. The Date object then tries to parse this string as a date string, fails, and falls back to today's date.

fix is straightforward:

 (value: string | number): number => new Date(+value).getTime() || new Date().getTime(),

To Reproduce
Steps to reproduce the behavior:

  1. add a date knob
  2. set a value
  3. open the canvas in a new tab

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System
Please paste the results of npx sb@next info here.

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions