Date

Le composant date se compose d'une icone et d'une date.

Note : si la date fournie est vide, rien n'est affiché.

Classes du composant

Modificateurs de tailles

.date--sm : Small
.date--md : Medium
.date--lg : Large
.date--xl : Extra-large

Size

sm

Du 15 octobre 2023 au 17 juin 2024

md

Du 15 octobre 2023 au 17 juin 2024

lg

Du 15 octobre 2023 au 17 juin 2024

xl

Du 15 octobre 2023 au 17 juin 2024

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Size" level="3" />

<kuik:heading size="lg" title="sm" level="4" />
<p>
    <kuik:date size="sm" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>

<kuik:heading size="lg" title="md" level="4" />
<p>
    <kuik:date size="md" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>

<kuik:heading size="lg" title="lg" level="4" />
<p>
    <kuik:date size="lg" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>

<kuik:heading size="lg" title="xl" level="4" />
<p>
    <kuik:date size="xl" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>

Name	Type	Required	Description
date	java.lang.String	true	Données de la date à afficher
size	java.lang.String	false	Taille (défaut : sm)
icon	java.lang.String	false	Icône (défaut : calendar)

$prefix: 'date';
$prefix-item: 'date-item';

.date {
    @include custom-space($prefix, true);
    @include custom-border($prefix, true);
    @include custom-color($prefix, true);

    align-items: center;
    display: inline-flex;

    .icon {
        @include custom-icon;
    }
}

.date__item {
    @include custom-typo($prefix-item, true);
}

.date--sm, .date--md, .date--lg, .date--xl {
    @include custom-space($prefix);
    @include custom-border($prefix);

    .date__item {
        @include custom-typo($prefix-item);
    }

    .icon {
        @include custom-icon-size;
    }
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="date" required="true" type="java.lang.String" description="Données de la date à afficher" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icône (défaut : calendar)" %>

<c:if test="${not empty pageScope.date}">

    <c:if test="${empty pageScope.icon}">
        <c:set var="icon" value="icon://ui/calendar" />
    </c:if>

    <c:if test="${empty pageScope.size}">
        <c:set var="size" value="sm"/>
    </c:if>

    <c:set var="classesSize" value="date--${pageScope.size}"/>

    <c:set value="date ${pageScope.classesSize}" var="classes"/>

    <c:set var="attributes">
        <c:forEach items="${dynattrs}" var="a">
            <c:choose>
                <c:when test="${a.key == 'class'}">
                    <c:set value="${classes} ${a.value}" var="classes"/>
                </c:when>
                <c:otherwise>${a.key}="${a.value}" </c:otherwise>
            </c:choose>
        </c:forEach>
    </c:set>

    <time class="${pageScope.classes}" ${pageScope.attributes}>
        <kuik:icon title="" class="date__icon" source="${pageScope.icon}" />
        <span class="date__item"><c:out value="${pageScope.date}"/></span>
    </time>
</c:if>