# Date

## No attribute

**Nothing** is displayed.

<sonic-code>
  <template>
    <sonic-date></sonic-date>
  </template>
</sonic-code>

## Now

Displays the **current date**.

<sonic-code>
  <template>
    <sonic-date now></sonic-date>
  </template>
</sonic-code>


## Date  

Displays a date from a **timestamp**.

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

## Date_string  

Displays a date from a **string**.

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

## 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**. 

<sonic-code>
  <template>
    <!-- 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>
  </template>
</sonic-code>


## Start_date_string / end_date_string

<sonic-code>
  <template>
    <!-- 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>
  </template>
</sonic-code>

## Wording_billet_periode_validite

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


## Weekday

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Day

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Month

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Year

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

## Hour

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Minute

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Language  

<sonic-button href="https://www.w3schools.com/tags/ref_language_codes.asp" target="_blank" type="info" size="sm">ISO 639-1 Language Codes</sonic-button>

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Time_zone

For the list of supported timeZones, run <b class="text-info">Intl.supportedValuesOf('timeZone')</b> in the console

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Era  

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## .renderIf  

<sonic-alert status="error" background>Deprecated</sonic-alert>

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## DesignMode  

<sonic-code>
  <template>
    <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>
        </template>
        <template data-value="day">
          <span class="text-4xl block uppercase leading-none font-bold"></span>
        </template>
        <template data-value="month">
          <span class="text-xl block uppercase leading-tight font-bold"></span>
        </template>
        <template data-value="year">
          <span class="text-lg  mb-1 font-bold  block uppercase leading-tight "></span>
        </template>
        <template data-value="to">
          <span class="font-medium block my-1 text-3xl leading-none">↓</span>
        </template>
      </sonic-date>
      <sonic-image 
      ratio="1/1" src="https://picsum.photos/id/237/700/700">
      </sonic-image>
    </div>
  </template>
</sonic-code>