# govuk-datepicker-testing

> GOV.UK datepicker

Latest version **0.0.30** (published 2021-12-02) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install govuk-datepicker-testing
pnpm add govuk-datepicker-testing
yarn add govuk-datepicker-testing
bun add govuk-datepicker-testing
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.30 |
| Published | 2021-12-02 |
| First published | 2021-12-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 30 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | James Nelson, Michael Jones |
| Maintainers | jamesnelson117 |

## Links

- npm: https://www.npmjs.com/package/govuk-datepicker-testing
- npm.io page: https://npm.io/package/govuk-datepicker-testing

## Dependencies (1)

- [govuk-frontend](https://npm.io/package/govuk-frontend.md) ^3.14.0

## Recent versions

- 0.0.30 (latest) — 2021-12-02
- 0.0.29 — 2021-12-02
- 0.0.28 — 2021-12-02
- 0.0.27 — 2021-12-02
- 0.0.26 — 2021-12-02
- 0.0.25 — 2021-12-02
- 0.0.24 — 2021-12-02
- 0.0.23 — 2021-12-02
- 0.0.22 — 2021-12-02
- 0.0.21 — 2021-12-02
- 0.0.20 — 2021-12-02
- 0.0.16 — 2021-12-02
- 0.0.15 — 2021-12-02
- 0.0.14 — 2021-12-02
- 0.0.13 — 2021-12-02
- … 10 more at https://npm.io/package/govuk-datepicker-testing/versions

## README

# Accessible Date picker (GOV.UK Theme)

A Date picker design and developed to be used within GOV.UK projects. Full support for 'keyboard only' users. Supports both English and Welsh.  

See a preview [here](https://still-headland-16463.herokuapp.com)

### Table of Contents

* [Installation](#installation)
* [Basic Usage](#basic-usage)
* [Configuration options](#options)

## Installation

### Via NPM

```
npm install accessible-date-picker
```

Files & locations:

|        File        |             Folder              |               Description               |
| ------------------ | ------------------------------- | --------------------------------------- |
| datepicker.min.js  | node_modules/js-datepicker/     | production build - (ES5, 5.9kb gzipped) |
| datepicker.min.css | node_modules/js-datepicker/     | production stylesheet                   |

## Basic Usage

Importing the library if you're using it in Node:
```javascript
import datepicker from 'accessible-date-picker';
// or
const datepicker = require('accessible-date-picker');
```

Add a class of `.date-picker` (can be named differently) to your HTML form wrapper.

Ensure day, month and year inputs have a class of `.date-picker-day`, `.date-picker-month`, `.date-picker-year`.

See recommended HTML - 

```html
<div class="govuk-form-group">
 <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
   <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">When was your passport issued?</h1>
   </legend>
   <div class="govuk-hint">For example, 27 3 2007</div>
   <div class="govuk-date-input date-picker" id="passport-issued">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="passport-issued-day">Day</label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 date-picker-day" id="passport-issued-day" name="passport-issued-day" type="text" pattern="[0-9]*" inputmode="numeric" />
      </div>
    <div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="passport-issued-month">Month</label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 date-picker-month" id="passport-issued-month" name="passport-issued-month" type="text" pattern="[0-9]*" inputmode="numeric" />
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="passport-issued-year">year</label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4 date-picker-year" id="passport-issued-year" name="passport-issued-year" type="text" pattern="[0-9]*" inputmode="numeric" />
      </div>
    </div>
   </div>
 </fieldset>
</div>
```

Importing the styles into your project using Node:
```javascript
// Import datepickers css file.
@import '~accessible-date-picker/dist/accessible-date-picker.min.css';
```

Using it in your code:
```javascript
datepicker(selector, options);
```

Datepicker takes 2 arguments:

1. `selector` - DOM node, such as `document.querySelector('#my-id')`.
2. `options` - (optional) - A configuration object (see below).

## Options

The date picker currently supports the following configuration options:

### language

Type: String | `en` or `cy`

Supports English `en` and Welsh `cy`. Defaults to English if not specified.

Using it in your code:
```javascript
datepicker(selector, {
  language: 'en', // 'cy'
});
```

### minDate

Type: Date

The minimum date the user can select. Null by default.

Using it in your code:
```javascript
datepicker(selector, {
  minDate: new Date(),
});
```

### maxDate

Type: Date

The maximum date the user can select. Null by default.

Using it in your code:
```javascript
datepicker(selector, {
  maxDate: new Date(),
});
```

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