|  | <!DOCTYPE html> | 
|  | <html> | 
|  |  | 
|  | <head> | 
|  | <title>calendar-input-sk</title> | 
|  | <meta charset="utf-8" /> | 
|  | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | 
|  | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | 
|  | <style> | 
|  | section { | 
|  | padding: 16px; | 
|  | } | 
|  | </style> | 
|  | </head> | 
|  |  | 
|  | <body class="body-sk font-sk"> | 
|  | <section class="body-sk font-sk"> | 
|  | <calendar-input-sk></calendar-input-sk> | 
|  | </section> | 
|  |  | 
|  | <section class="body-sk font-sk" id=invalid> | 
|  | <h2>invalid input</h2> | 
|  | <calendar-input-sk></calendar-input-sk> | 
|  | </section> | 
|  |  | 
|  | <section class="body-sk font-sk darkmode"> | 
|  | <h2>darkmode</h2> | 
|  | <calendar-input-sk></calendar-input-sk> | 
|  | </section> | 
|  |  | 
|  | <section class="body-sk font-sk darkmode"> | 
|  | <h2>zh-Hans-CN</h2> | 
|  | <calendar-input-sk></calendar-input-sk> | 
|  | </section> | 
|  |  | 
|  | <pre><code id=evt></code></code></pre> | 
|  | </body> | 
|  |  | 
|  | </html> |