search

Sqrrl / wc-datepicker

A small, accessible and customizable datepicker written in TypeScript.
https://sqrrl.github.io/wc-datepicker
MIT License
54 stars 6 forks source link

[QUESTION] …example doesn't work #12

Closed felixq closed 1 year ago

felixq commented 1 year ago

I have tried to use your via script tags example and get error: TypeError: target.attributes is undefined. None of the page content is displayed. Excuse my English, my native language is Spanish.

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/wc-datepicker/dist/esm/wc-datepicker.js"
  />

  <!-- Loading the theme is optional. -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/wc-datepicker/dist/themes/light.css"
  />
</head>

<body>
  <wc-datepicker></wc-datepicker>
</body>

image

Sqrrl commented 1 year ago

Hey, I've created a minimal working example here: https://codesandbox.io/s/wonderful-wildflower-t216mv?file=/index.html

Based on your screenshot, I assume you are using an older version of Microsoft Edge. Is that correct? If so, please take a look at the browser matrix here and check if your browser version is supported. https://sqrrl.github.io/wc-datepicker/#browser-support

felixq commented 1 year ago

I'm using Firefox version 110.0, it's the latest at the moment. I can't see the demo that he gave me, it doesn't load several things due to a cors error. The page https://sqrrl.github.io/wc-datepicker/ works correctly for me. Using the code from that page I was able to get it to work, using the cdns doesn't work.

Work properly

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://sqrrl.github.io/wc-datepicker/themes/light.css" id="theme" />
<script type="module" src="https://sqrrl.github.io/wc-datepicker/dist/esm/wc-datepicker.js"></script>
</head>
<body>
<wc-datepicker id="datepicker"></wc-datepicker>
</body>
</html>

It does not work

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wc-datepicker/dist/themes/light.css"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/wc-datepicker/dist/esm/wc-datepicker.js"/>
</head>
<body>
<wc-datepicker id="datepicker"></wc-datepicker>
</body>
</html>

Using the first version loads a js that doesn't load the second one (wc-datepicker.entry.js). Is it possible to join all the js in one? How can I bind it to a text input?

Sqrrl commented 1 year ago

I've just tried it in FF 110 using the CDN, which works fine on my machine. I was missing a closing script tag in the example code (self-closing script tags aren't valid). Could you please try with a proper </script>? Any ad blocker or browser plugins that might interfere with the CDN?

Linking the picker to a text input is up to you. You can take the "value" and "start-date" property to update the value of the picker when a text input changes. With the "selectDate" event you can react to user interaction with the picker and adjust your text input value.

felixq commented 1 year ago

it works now.