Cuttlefish Docs
  • English

    • spz-date

    Supported layouts: container

    When to Use

    When a user needs to enter a date, you can specify the format of the date output.

    Code Demonstration

    Basic

    The most basic usage, using the default format to display the date.

    <spz-date layout="container" datetime="2021/6/6 18:09:12"></spz-date>

    Custom Format

    Use placeholders to customize the desired date format.

    <spz-date layout="container" datetime="2023/5/12 15:36:11" format="DD MMM, YYYY HH:mm:ss"></spz-date>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    datetimeThe date that needs formattingdateType-Yes
    formatThe format in which the date is displayedformatTypeYYYY-MM-DD hh:mm:ssNo

    dateType

    Supported Date Formats
    YYYY/MM/DD
    YYYY/MM/DD HH:mm
    YYYY/MM/DD HH:mm:ss

    Supported Formatting Placeholder List

    PlaceholderDescriptionOutput
    YYTwo-digit year23
    YYYYFour-digit year2023
    MMonth, starting from 11-12
    MMMonth, two digits01-12
    MMMAbbreviated month nameJan-Dec
    DDay of the month1-31
    DDDay of the month, two digits01-31
    dddAbbreviated weekday nameMon-Sun
    HHour0-23
    HHHour, two digits00-23
    hHour, 12-hour clock1-12
    hhHour, 12-hour clock, two digits01-12
    mMinute0-59
    mmMinute, two digits00-59
    sSecond0-59
    mmSecond, two digits00-59
    aAM or PM, lowercaseam | pm
    AAM or PM, uppercaseAM | PM

    AI Summary (LLM Ready)

    • Component ID: spz-date
    • One-line purpose: Format a given date.
    • Detected attribute rows: 0
    • Detected method subsections: 0
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: none (needs manual completion)
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/