# @sb1/ffe-datepicker

> FFE Datepicker

Latest version **101.0.13** (published 2026-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sb1/ffe-datepicker
pnpm add @sb1/ffe-datepicker
yarn add @sb1/ffe-datepicker
bun add @sb1/ffe-datepicker
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 101.0.13 |
| Published | 2026-09-14 |
| First published | 2018-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 27.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 115 |
| Author | SpareBank 1 |
| Maintainers | antidecaf, sb1-designsystem, erlingk, dagfrode |

## Links

- npm: https://www.npmjs.com/package/@sb1/ffe-datepicker
- Repository: https://github.com/SpareBank1/designsystem
- Homepage: https://github.com/SpareBank1/designsystem#readme
- Issues: https://github.com/SpareBank1/designsystem/issues
- npm.io page: https://npm.io/package/@sb1/ffe-datepicker

## Dependencies (2)

- [@sb1/ffe-core](https://npm.io/package/@sb1/ffe-core.md) ^101.0.13
- [@sb1/ffe-form](https://npm.io/package/@sb1/ffe-form.md) ^101.0.13

## Recent versions

- 101.0.13 (latest) — 2026-09-14
- 101.0.12 — 2026-08-24
- 101.0.11 — 2026-08-17
- 101.0.10 — 2026-08-12
- 101.0.9 — 2026-08-10
- 101.0.8 — 2026-08-07
- 101.0.7 — 2026-08-05
- 101.0.6 — 2026-08-05
- 101.0.5 — 2026-06-15
- 101.0.4 — 2026-05-13
- 101.0.3 — 2026-04-28
- 101.0.2 — 2026-04-21
- 101.0.1 — 2026-04-17
- 101.0.0 — 2026-04-15
- 100.12.4 — 2026-04-13
- … 330 more at https://npm.io/package/@sb1/ffe-datepicker/versions

## README

# @sb1/ffe-datepicker

This package contains styles for the ffe-datepicker.

## Install

```bash
npm install --save @sb1/ffe-datepicker
```

## Usage

Full documentation on datepicker usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/#datepicker.

The styles for this package can be used in 3 different ways depending on what you want.
For All styles or Only date input you will need the `@sb1/ffe-form` package in your project.

### All styles

You need styles for both the dateinput field and the calendar.

```css
@import 'node_modules/@sb1/ffe-datepicker/less/datepicker.less';
@import 'node_modules/@sb1/ffe-form/less/form.less';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-datepicker/css/datepicker.css';
```

Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)

```html
<div class="ffe-datepicker">
    <!-- see dateinput section below -->
    <!-- see calendar section below -->
</div>
```

### Only date input styles

```css
@import 'node_modules/@sb1/ffe-datepicker/less/dateinput.less';
@import 'node_modules/@sb1/ffe-form/less/form.less';
```

Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)

```html
<div class="ffe-dateinput">
    <input class="ffe-dateinput__field ffe-input-field" type="text" />
    <svg class="ffe-dateinput__icon">
        <path ... />
    </svg>
</div>
```

### Only the calendar styles

```css
@import 'node_modules/@sb1/ffe-datepicker/less/calendar.less';
```

Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)

```html
<div class="ffe-calendar ffe-calendar--datepicker">
    <div class="ffe-calendar__header">
        <div class="ffe-calendar__header-inner-wrapper">
            <button class="ffe-calendar__month-nav ffe-calendar__previous">
                <svg class="ffe-calendar__icon-prev">
                    <path ... />
                </svg>
            </button>
            <header class="ffe-calendar__title">
                <div id="ffe-calendar-499__month-label">
                    <span class="ffe-calendar__month">Juni</span>
                    <span class="ffe-calendar__year">2016</span>
                </div>
            </header>
            <button class="ffe-calendar__month-nav ffe-calendar__next">
                <svg class="ffe-calendar__icon-next">
                    <path ... />
                </svg>
            </button>
        </div>
    </div>
    <table class="ffe-calendar__grid">
        <thead>
            <tr>
                <th class="ffe-calendar__weekday">
                    <span>Man</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Tir</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Ons</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Tor</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Fre</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Lør</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Søn</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">1</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">2</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">3</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">4</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">5</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">6</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">7</span>
                </td>
            </tr>
            <tr>
                ... More td
            </tr>
            <tr>
                ... More td
            </tr>
            <tr>
                ... More td
            </tr>
            <tr>
                ... More td
            </tr>
        </tbody>
    </table>
</div>
```

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.

---
_Source: https://npm.io/package/@sb1/ffe-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._