Concorde functional component — Date. Nothing is displayed. Doc ID: core/components/functional/date/date. Keywords: Concorde, supersoniks, core/components/functional/date/date, date, Date, functional component, sonic-date, web component. URL: https://concorde.supersoniks.org/crawl/core/components/functional/date/date.html.

Date

No attribute

Nothing is displayed.

<sonic-date></sonic-date>

Now

Displays the current date.

<sonic-date now></sonic-date>

Date

Displays a date from a timestamp.

<sonic-date date= "1640265629"></sonic-date>

Date_string

Displays a date from a string.

<sonic-date date_string="July 20, 69 20:17:40 GMT+00:00"></sonic-date>

Start_date / end_date

Displays a period of time from start_date to end_date.
When by itself start_date will act as date
if a start_date is not specified it will be set by the current date.
if the end_date is anterior to start date date it will be used as the start_date.

<!-- from start_date to end_date -->
    <sonic-date start_date="1640265629" end_date= "1640365629"></sonic-date>
    <br>
    <!-- start_date is not specified -->
    <sonic-date end_date= "2640365629"></sonic-date>
    <br>
    <!-- end_date is anterior -->
    <sonic-date end_date= "640365629"></sonic-date>

Start_date_string / end_date_string

<!-- from start_date to end_date -->
    <sonic-date date_string="July 20, 90 20:17:40 GMT+00:00" end_date_string= "June 20, 94 20:17:40 GMT+00:00"></sonic-date>
    <br>
    <!-- start_date is not specified -->
    <sonic-date end_date_string= "May 20, 34 20:17:40 GMT+00:00"></sonic-date>
    <br>
    <!-- end_date is anterior -->
    <sonic-date end_date_string= "April 20, 06 20:17:40 GMT+00:00"></sonic-date>

Wording_billet_periode_validite

<sonic-date wording_billet_periode_validite= "À partir du %s jusqu'au %s" start_date="1640265629" end_date= "1640365629"></sonic-date>

Weekday

<b>narrow : </b>
    <sonic-date weekday="narrow" now></sonic-date>
    <br>
    <b>short (default) : </b>
    <sonic-date weekday="short" now></sonic-date>
    <br>
    <b>long : </b>
    <sonic-date weekday="long" now></sonic-date>
    <br>
    <b>hidden : </b>
    <sonic-date weekday="hidden" now></sonic-date>

Day

<b>numeric : </b>
    <sonic-date day="numeric" date_string="July 01, 69"></sonic-date>
    <br>
    <b>2-digit (default) : </b>
    <sonic-date day="2-digit" date_string="July 01, 69"></sonic-date>

Month

<b>numeric : </b>
    <sonic-date month="numeric" now></sonic-date>
    <br>
    <b>2-digit : </b>
    <sonic-date month="2-digit" now></sonic-date>
    <br>
    <b>narrow : </b>
    <sonic-date month="narrow" now></sonic-date>
    <br>
    <b>short (default) : </b>
    <sonic-date month="short" now></sonic-date>
    <br>
    <b>long : </b>
    <sonic-date month="long" now></sonic-date>

Year

<b>numeric (default) : </b>
    <sonic-date year="numeric" now></sonic-date>
    <br>
    <b>2-digit : </b>
    <sonic-date year="2-digit" now></sonic-date>

Hour

<b>numeric : </b>
    <sonic-date hour="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
    <br>
    <b>2-digit (default) : </b>
    <sonic-date hour="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
    <br>
    <b>hidden : </b>
    <sonic-date hour="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>

Minute

<b>numeric : </b>
    <sonic-date minute="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
    <br>
    <b>2-digit (default) : </b>
    <sonic-date minute="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
    <br>
    <b>hidden : </b>
    <sonic-date minute="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>

Language

ISO 639-1 Language Codes

<b>fr : </b>
    <sonic-date language="fr" now></sonic-date>
    <br>
    <b>en : </b>
    <sonic-date language="en" now></sonic-date>
    <br>
    <b>zh : </b>
    <sonic-date language="zh" now></sonic-date>
    <br>
    <b>ja : </b>
    <sonic-date language="ja" now></sonic-date>

Time_zone

For the list of supported timeZones, run Intl.supportedValuesOf('timeZone') in the console

<b>Europe/London : </b>
    <sonic-date time_zone="Europe/London" now></sonic-date>
    <br>
    <b>Europe/Paris : </b>
    <sonic-date time_zone="Europe/Paris" now></sonic-date>
    <br>
    <b>America/Tijuana : </b>
    <sonic-date time_zone="America/Tijuana" now></sonic-date>

Era

<b>narrow : </b>
    <sonic-date era="narrow" now></sonic-date>
    <br>
    <b>short : </b>
    <sonic-date era="short" now></sonic-date>
    <br>
    <b>long : </b>
    <sonic-date era="long" now></sonic-date>

.renderIf

Deprecated

<b>True statement : </b>
    <sonic-date data-bind ::render-if="|10>2" now></sonic-date>
    <br>
    <b>False statement : </b>
    <sonic-date data-bind ::render-if="|10<2" now></sonic-date>

DesignMode

<div class="relative max-w-lg rounded-lg overflow-hidden">
      <div class="absolute top-0 h-1/2 w-full bg-gradient-to-b from-[rgba(0,0,10,.2)] z-10 "></div>
      <sonic-date
        designMode
        noShadowDom
        start_date= "1640265629"
        end_date= "1640365629"
        language= "fr"
        wording_billet_periode_validite= "Du %s au %s"
        year= "numeric"
        month= "short"
        weekday= "short"
        hour= "2-digit"
        minute= "2-digit"
        class="py-4 drop-shadow-lg text-contrast-content p-4 inline-block text-center absolute left-0 z-20 text-sm"
      >
        <template data-value="weekday">
          <span class="hidden"></span>