Memorable Date

A memorable date component allows users to enter a date they know well, such as a birthday, using three separate fields for month, day, and year.

Props

Prop	Default	Description
`id`		Base ID for the component fields
`name`		Base name for form submission
`legend`		Fieldset legend text
`hint`	`For example: January 19 2000`	Hint text shown below the legend
`month_value`		Pre-selected month value (1-12)
`day_value`		Pre-filled day value
`year_value`		Pre-filled year value
`required`		Makes all fields required when set
`disabled`		Disables all fields when set
`error`		Shows error state on form groups

Example Usage

Default Memorable Date

<c-memorable_date
    id="date_of_birth"
    name="date_of_birth"
    legend="Date of Birth"
    hint="For example: January 19 2000"
/>

Pre-filled Memorable Date

<c-memorable_date
    id="event_date"
    name="event_date"
    legend="Event Date"
    hint="For example: April 15 2025"
    month_value="4"
    day_value="15"
    year_value="2025"
/>

Required Memorable Date

<c-memorable_date
    id="required_date"
    name="required_date"
    legend="Start Date"
    hint="For example: January 1 2026"
    required="true"
/>

Disabled Memorable Date

<c-memorable_date
    id="disabled_date"
    name="disabled_date"
    legend="End Date"
    hint="For example: December 31 2026"
    month_value="12"
    day_value="31"
    year_value="2026"
    disabled="true"
/>

Error State Memorable Date

<c-memorable_date
    id="error_date"
    name="error_date"
    legend="Expiration Date"
    hint="For example: June 30 2024"
    error="true"
/>

{% load cotton %}

<div class="component-variants">
    <h1>Memorable Date Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton memorable_date id="{{ variant.id }}" name="{{ variant.name }}" legend="{{ variant.legend }}" hint="{{ variant.hint }}" month_value="{{ variant.month_value }}" day_value="{{ variant.day_value }}" year_value="{{ variant.year_value }}" required="{{ variant.required }}" disabled="{{ variant.disabled }}" error="{{ variant.error }}" %}{% endcotton %}
    </div>
    {% endfor %}
</div>

name: Memorable Date
context:
  variants:
    - title: "Default Memorable Date"
      id: "date_of_birth"
      name: "date_of_birth"
      legend: "Date of Birth"
      hint: "For example: January 19 2000"
      day_value: ""
      year_value: ""
      required: ""
      disabled: ""
      error: ""
    - title: "Pre-filled Memorable Date"
      id: "event_date"
      name: "event_date"
      legend: "Event Date"
      hint: "For example: April 15 2025"
      month_value: "4"
      day_value: "15"
      year_value: "2025"
      required: ""
      disabled: ""
      error: ""
    - title: "Required Memorable Date"
      id: "required_date"
      name: "required_date"
      legend: "Start Date"
      hint: "For example: January 1 2026"
      month_value: ""
      day_value: ""
      year_value: ""
      required: "true"
      disabled: ""
      error: ""
    - title: "Disabled Memorable Date"
      id: "disabled_date"
      name: "disabled_date"
      legend: "End Date"
      hint: "For example: December 31 2026"
      month_value: "12"
      day_value: "31"
      year_value: "2026"
      required: ""
      disabled: "true"
      error: ""
    - title: "Error State Memorable Date"
      id: "error_date"
      name: "error_date"
      legend: "Expiration Date"
      hint: "For example: June 30 2024"
      month_value: ""
      day_value: ""
      year_value: ""
      required: ""
      disabled: ""
      error: "true"