0

I am try to use input type= time and input type=date on safari. I install polyfill for time input and for date-time-input polyfil but both seems to be not working. I have created a empty stencil component application and in html just added below code and run on mac machine on safari.

!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport"  http-equiv="x-ua-compatible" content="IE=Edge" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>
    <script src="https://cdn.jsdelivr.net/npm/time-input-polyfill"></script>
    <script type="module" src="/build/time.esm.js"></script>

    <script nomodule src="/build/time.js"></script>
  </head>
  <body>
    Hello
    <input type="time"></input>
    <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
  </body>
</html>
Shardul Pendse
  • 304
  • 1
  • 4
  • 17
  • Can you confirm that the polyfill works without Stencil? – Simon Hänisch Dec 18 '20 at 12:30
  • SimonHänisch Yes it work without stencil. I have tested that – Shardul Pendse Dec 18 '20 at 14:18
  • @SimonHänisch Yes it work without stencil. This works in chrome browser issue is on mac os and safari browser – Shardul Pendse Dec 18 '20 at 14:27
  • I assume it works in Chrome because the polyfill detects whether the browser supports date/time inputs already, and doesn't do anything if no polyfill is needed. So I'd assume the issue is that your polyfill clashes with another polyfill of Stencil. If you're using Safari 10, maybe you need to add `{ safari10: true }` to the `extras` of your stencil config. (https://stenciljs.com/docs/config-extras) – Simon Hänisch Dec 21 '20 at 11:25
  • @SimonHänisch I will check that out. but here i do not want to restrict to work with only safari 10. So it should support on safari browser. I am using safari Version 14.0.2 (15610.3.7.1.10, 15610) Still not working. – Shardul Pendse Dec 21 '20 at 12:31
  • Ok the `safari10` flag is only to enable support for Stencil in Safari 10 (otherwise it's 11+ by default). Issues with polyfills are not so easy to debug, are you getting any errors in the dev tools console? What you could try is importing `defineCustomElements` from the loader and not use `applyPolyfills`. See this example: https://stenciljs.com/docs/angular#edge-and-ie11-polyfills (just skip `applyPolyfills`). – Simon Hänisch Dec 22 '20 at 11:23

0 Answers0