---
title: anura-date
url: 'https://doc.brix.ch/anura/webcomponents/components/date'
markdown: 'https://doc.brix.ch/anura/webcomponents/components/date.md'
lang: en
date: '2026-10-26'
description: 'Technical documentation for brix:anura webcomponents – Software developed by brix'
taxonomy:
  category:
    - docs
---

[](#) 

  [ Welcome ](https://doc.brix.ch/)     [ brix:anura ](https://doc.brix.ch/anura)     [ Anura Webcomponents ](https://doc.brix.ch/anura/webcomponents)     [ Components ](https://doc.brix.ch/anura/webcomponents/components)      anura-date    

# anura-date

#### Table of Contents

- [Attributes](#attributes)
- [Events](#events)
- [Parts](#parts)

```html
<anura-date adapter="some-adapter" source="123"></anura-date>
```

A date range selector

![Screenshot of anura-date](https://doc.brix.ch/user/pages/03.anura/01.webcomponents/02.components/date/anura-date.png)

## Attributes

### adapter

> **required: yes**, live: no, default: -

With which adapter to talk to (to load the values from)

`<anura-date adapter="#my-adapter"></anura-date>`

### source

> **required: yes**, live: on-load, default: -

What metadata field to query in order to get the possible values from. The value type will depend on the adapter that you're using (usually an ID or a UUID)

`<anura-date source="my-date"></anura-date>`

### min

> required: no, live: yes, default: -

Minimum date available, applied to the *from* field

`<anura-date min="1900-01-01"></anura-date>`

### max

> required: no, live: yes, default: -

Maximum date available, applied to the *to* field

`<anura-date max="2030-01-01"></anura-date>`

### decade-min

> required: no, live: yes, default: -

Activated the *decade* mode - minimum decade date available, applied to the *decade* field

`<anura-date decade-min="1900"></anura-date>`

### decade-max

> required: no, live: yes, default: current year

Maximum date available, applied to the *decade* field

`<anura-date decade-max="2030"></anura-date>`

### value

> required: no, live: set by component, default: -

The value deriving from both date inputs in the form of *from,to*, e.g. `2023-01-01,2023-12-31`. Can be used to set an initial value, but will only be written to by the component afterwards.

### type

> required: no, live: set by component, default: -

The type of field that should be affected. This will be set by your adapter and is specific to the implementation. Don't touch this.

### state

> required: no, live: on-load, default: true

Whether the date fields should maintain their state. This will use the components `id` to differentiate itself from other components. If you don't provide an ID, a hash of the component will be used. Set it to `false` to not keep any state at all.

`<anura-date state="false"></anura-date>`

### drill-down

> required: no, live: on-load, default: false

When enabled, these date values will become clickable in `<anura-details>`, whereafter this field will be filled with said date, and trigger a search. Basically, this imitates the behaviour of `<anura-select>` for drill-down searches, but for date fields. It's off by default, as it makes litte sense for things like a description.

`<anura-date drill-down></anura-date>`

You may also target a different field by setting the field's ID as:

`<anura-date drill-down="some-other-id"></anura-date>`

## Events

### change

> standard change event

Fired when the user selects values in the dropdown

## Parts

```html
<header part="header">
    <span part="header-title"></span>
    <span part="header-value"></span>
    <button part="date-button header-clear">
        <anura-icon part="header-icon header-icon-clear"></anura-icon>
    </button>
    <button part="date-button header-toggle">
        <anura-icon part="header-icon header-icon-toggle"></anura-icon>
    </button>
</header>
<fieldset part="fieldset">
    <div part="fieldset-title">
        <label part="fieldset-label"></label>
        <button part="date-button fieldset-close">
            <anura-icon part="date-icon date-icon-close"></anura-icon>
        </button>
    </div>
    <div part="fieldset-body">
        <label part="date-label date-label-from"></label>
        <input part="date-input date-input-from">
        <label part="date-label date-label-to"></label>
        <input part="date-input date-input-to">
        <button part="fieldset-reset"></button>
    </div>
</fieldset>
```

 [ ](https://doc.brix.ch/anura/webcomponents/components/basket) [](https://doc.brix.ch/anura/webcomponents/components/details)

---

## Navigation

- Parent: [Components](https://doc.brix.ch/anura/webcomponents/components.md)
- Previous: [anura-basket](https://doc.brix.ch/anura/webcomponents/components/basket.md)
- Next: [anura-details](https://doc.brix.ch/anura/webcomponents/components/details.md)