Date Range Picker

A date range picker helps users select a start and end date. Uses the c-label and c-date-picker sub-components internally.

Props

Prop	Default	Description
`start_date_id`		ID for the start date input
`start_date_name`		Name attribute for the start date input
`start_date_label`		Label text for the start date field
`start_date_hint`		Hint text for the start date (e.g., "mm/dd/yyyy")
`end_date_id`		ID for the end date input
`end_date_name`		Name attribute for the end date input
`end_date_label`		Label text for the end date field
`end_date_hint`		Hint text for the end date (e.g., "mm/dd/yyyy")
`required`		Makes both date fields required when set
`disabled`		Disables both date fields when set

Example Usage

Default Date Range Picker

<c-date-range-picker
    start_date_id="event-date-start"
    start_date_name="event-date-start"
    start_date_label="Event start date"
    start_date_hint="mm/dd/yyyy"
    end_date_id="event-date-end"
    end_date_name="event-date-end"
    end_date_label="Event end date"
    end_date_hint="mm/dd/yyyy"
/>

Disabled Date Range Picker

```django

{% load cotton %}

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

        {% cotton date-range-picker start_date_id="{{ variant.start_date_id }}" start_date_name="{{ variant.start_date_name }}" start_date_label="{{ variant.start_date_label }}" start_date_hint="{{ variant.start_date_hint }}" end_date_id="{{ variant.end_date_id }}" end_date_name="{{ variant.end_date_name }}" end_date_label="{{ variant.end_date_label }}" end_date_hint="{{ variant.end_date_hint }}" required="{{ variant.required }}" disabled="{{ variant.disabled }}" %}{% endcotton %}
    </div>
    {% endfor %}
</div>

name: Date Range Picker
context:
  variants:            
    - title: "Default Date Range Picker"
      start_date_id: "event-date-start"
      start_date_name: "event-date-start"
      start_date_label: "Event start date"
      start_date_hint: "mm/dd/yyyy"
      end_date_id: "event-date-end"
      end_date_name: "event-date-end"
      end_date_label: "Event end date"
      end_date_hint: "mm/dd/yyyy"
      required: ""
      disabled: ""
    - title: "Disabled Date Range Picker"
      start_date_id: "disabled-date-start"
      start_date_name: "disabled-date-start"
      start_date_label: "Start date"
      start_date_hint: "mm/dd/yyyy"
      end_date_id: "disabled-date-end"
      end_date_name: "disabled-date-end"
      end_date_label: "End date"
      end_date_hint: "mm/dd/yyyy"
      required: ""
      disabled: "true"