Clock

  • Clocks are used to display the current time in a specified timezone.
  • They can be displayed in various formats, including 12-hour and 24-hour time.
Overview API

Usage

Display the current local time with the default timezone.


   <wc-clock></wc-clock>

Use a specific IANA timezone string to display time in different regions.

Berlin
New York
Tokyo

   <div class="clock-grid">
      <div class="clock-card">
         <span class="clock-label">Berlin</span>
         <wc-clock timezone="Europe/Berlin"></wc-clock>
      </div>
      <div class="clock-card">
         <span class="clock-label">New York</span>
         <wc-clock timezone="America/New_York"></wc-clock>
      </div>
      <div class="clock-card">
         <span class="clock-label">Tokyo</span>
         <wc-clock timezone="Asia/Tokyo"></wc-clock>
      </div>
   </div>

On this page

Properties

Events

Methods

CSS Custom Properties