Inputs Date Range

Open this example (Daterange (example)) in a new window

Contents 

      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">Date-range</legend>
    
        <div id="dpr-date-range" data-field-name="field3">
    
          <div class="dpr-daterange__start-end-date-wrapper">
    
            <div class="dpr-daterange__start-date">
    
              <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Date-range start" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="1977-05-25" data-max="9999-01-01" data-pattern-hint="DD/MM/YYYY">
    
                <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="25/05/1977" data-max-date="01/01/9999">
    
                  <div class="govuk-form-group">
                    <label class="govuk-label" for="filters.field3.start">
                      From
                    </label>
    
                    <div id="filters.field3.start-hint" class="govuk-hint">
                      For example 17/05/2024.
                    </div>
    
                    <input class="govuk-input moj-js-datepicker-input " id="filters.field3.start" name="filters.field3.start" type="text" value="01/02/2003" aria-describedby="filters.field3.start-hint" autocomplete="off">
    
                  </div>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-daterange__end-date">
    
              <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Date-range end" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="1977-05-25" data-max="9999-01-01" data-pattern-hint="DD/MM/YYYY">
    
                <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="25/05/1977" data-max-date="01/01/9999">
    
                  <div class="govuk-form-group">
                    <label class="govuk-label" for="filters.field3.end">
                      To
                    </label>
    
                    <div id="filters.field3.end-hint" class="govuk-hint">
                      For example 17/05/2024.
                    </div>
    
                    <input class="govuk-input moj-js-datepicker-input " id="filters.field3.end" name="filters.field3.end" type="text" value="04/05/2007" aria-describedby="filters.field3.end-hint" autocomplete="off">
    
                  </div>
    
                </div>
    
              </div>
    
            </div>
          </div>
    
        </div>
    
      </fieldset>
    </div>

Nunjucks macro options
| Name| Type| Required| Description| | ---------------| ---------| --------| ------------------------------------------------------------| | data| object| Yes| Data object. See filter.| | parameterPrefix| string| no| The prefix to apply to the filter parameters in the page URL| | mandatory| boolean| no| default: false|

Filter

Name Type Required Description
text string Yes The title of the field
name string Yes The unique ID of the input
value object Yes Data object. See Value.
min string No The min date in format YYYY-MM-DD
max string No The max date in format YYYY-MM-DD

Value

Name Type Required Description
start string Yes The start date in format YYYY-MM-DD
end string Yes The end date in format YYYY-MM-DD 

    {%- from "dpr/components/_inputs/date-range/view.njk" import dprDateRange %}
    
    {{
      dprDateRange(
        {
          text: "Date-range",
          name: "field3",
          value:{
            start: "2003-02-01",
            end: "2007-05-04"
          }
        },
        [],
        'filterPrefix',
        false
      )
    }}```
  
  </div>
    
  

</div>

</div>


## Overview

The DPR multiselect component is composite of the [MOJ design system date picker component](https://design-patterns.service.justice.gov.uk/components/date-picker/checkboxes/).

### When to use

Use the daterange component when you need to help users:

- Select a start and end date
- Select a date range within a min and max range
- Select a date range within a relative range

### When not to use

Do not use this component when you need a single date.

## How to use

### Basic Date Range



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/inputs/daterange/default" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Daterange (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="400" src="/examples/inputs/daterange/default" title="Daterange (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmldefault1">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksdefault1">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmldefault1">
  
```html <div class="dpr-date-range" data-dpr-module="date-range-input">
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">Date-range</legend>
    
        <div id="dpr-date-range" data-field-name="field3">
    
          <div class="dpr-daterange__start-end-date-wrapper">
    
            <div class="dpr-daterange__start-date">
    
              <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Date-range start" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="1977-05-25" data-max="9999-01-01" data-pattern-hint="DD/MM/YYYY">
    
                <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="25/05/1977" data-max-date="01/01/9999">
    
                  <div class="govuk-form-group">
                    <label class="govuk-label" for="filters.field3.start">
                      From
                    </label>
    
                    <div id="filters.field3.start-hint" class="govuk-hint">
                      For example 17/05/2024.
                    </div>
    
                    <input class="govuk-input moj-js-datepicker-input " id="filters.field3.start" name="filters.field3.start" type="text" value="01/02/2003" aria-describedby="filters.field3.start-hint" autocomplete="off">
    
                  </div>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-daterange__end-date">
    
              <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Date-range end" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="1977-05-25" data-max="9999-01-01" data-pattern-hint="DD/MM/YYYY">
    
                <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="25/05/1977" data-max-date="01/01/9999">
    
                  <div class="govuk-form-group">
                    <label class="govuk-label" for="filters.field3.end">
                      To
                    </label>
    
                    <div id="filters.field3.end-hint" class="govuk-hint">
                      For example 17/05/2024.
                    </div>
    
                    <input class="govuk-input moj-js-datepicker-input " id="filters.field3.end" name="filters.field3.end" type="text" value="04/05/2007" aria-describedby="filters.field3.end-hint" autocomplete="off">
    
                  </div>
    
                </div>
    
              </div>
    
            </div>
          </div>
    
        </div>
    
      </fieldset>
    </div>

Nunjucks macro options
| Name| Type| Required| Description| | ---------------| ---------| --------| ------------------------------------------------------------| | data| object| Yes| Data object. See filter.| | parameterPrefix| string| no| The prefix to apply to the filter parameters in the page URL| | mandatory| boolean| no| default: false|

Filter

Name Type Required Description
text string Yes The title of the field
name string Yes The unique ID of the input
value object Yes Data object. See Value.
min string No The min date in format YYYY-MM-DD
max string No The max date in format YYYY-MM-DD

Value

Name Type Required Description
start string Yes The start date in format YYYY-MM-DD
end string Yes The end date in format YYYY-MM-DD 

    {%- from "dpr/components/_inputs/date-range/view.njk" import dprDateRange %}
    
    {{
      dprDateRange(
        {
          text: "Date-range",
          name: "field3",
          value:{
            start: "2003-02-01",
            end: "2007-05-04"
          }
        },
        [],
        'filterPrefix',
        false
      )
    }}```
  
  </div>
    
  

</div>

</div>


### Min and Max dates



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/inputs/daterange/min-max" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Date Range with Min and Max (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="430" src="/examples/inputs/daterange/min-max" title="Date Range with Min and Max (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmlmin-max">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksmin-max">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlmin-max">
  
```html <div class="dpr-date-range" data-dpr-module="date-range-input">
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">Date-range, with min and max</legend>
    
        <div id="dpr-date-range" data-field-name="field3">
    
          <div class="dpr-daterange__start-end-date-wrapper">
    
            <div class="dpr-daterange__start-date">
    
              <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Date-range, with min and max start" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
    
                <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
    
                  <div class="govuk-form-group">
                    <label class="govuk-label" for="filters.field3.start">
                      From
                    </label>
    
                    <div id="filters.field3.start-hint" class="govuk-hint">
                      For example 17/05/2024.
                    </div>
    
                    <input class="govuk-input moj-js-datepicker-input " id="filters.field3.start" name="filters.field3.start" type="text" value="01/02/2003" aria-describedby="filters.field3.start-hint" autocomplete="off">
    
                  </div>
    
                </div>
    
                <div class="daterange-set-to-minmax__container">
    
                  <a class="govuk-body-s daterange-set-to-minmax" id="field3-min-helper" data-set-to-input="filters.field3.start" data-set-min-max-value="01/02/2003" data-set-min-max-trigger="true" href="#">
                    Set value to minimum date: 01/02/2003
                  </a>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-daterange__end-date">
    
              <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Date-range, with min and max end" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
    
                <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
    
                  <div class="govuk-form-group">
                    <label class="govuk-label" for="filters.field3.end">
                      To
                    </label>
    
                    <div id="filters.field3.end-hint" class="govuk-hint">
                      For example 17/05/2024.
                    </div>
    
                    <input class="govuk-input moj-js-datepicker-input " id="filters.field3.end" name="filters.field3.end" type="text" value="04/05/2007" aria-describedby="filters.field3.end-hint" autocomplete="off">
    
                  </div>
    
                </div>
    
                <div class="daterange-set-to-minmax__container">
    
                  <a class="govuk-body-s daterange-set-to-minmax" id="field3-max-helper" data-set-to-input="filters.field3.end" data-set-min-max-value="04/05/2007" data-set-min-max-trigger="true" href="#">
                    Set value to maximum date: 04/05/2007
                  </a>
    
                </div>
    
              </div>
    
            </div>
          </div>
    
        </div>
    
      </fieldset>
    </div>

Nunjucks macro options
| Name| Type| Required| Description| | ---------------| ---------| --------| ------------------------------------------------------------| | data| object| Yes| Data object. See filter.| | parameterPrefix| string| no| The prefix to apply to the filter parameters in the page URL| | mandatory| boolean| no| default: false|

Filter

Name Type Required Description
text string Yes The title of the field
name string Yes The unique ID of the input
value object Yes Data object. See Value.
min string No The min date in format YYYY-MM-DD
max string No The max date in format YYYY-MM-DD

Value

Name Type Required Description
start string Yes The start date in format YYYY-MM-DD
end string Yes The end date in format YYYY-MM-DD 

    {%- from "dpr/components/_inputs/date-range/view.njk" import dprDateRange %}
    
    {{
      dprDateRange(
        {
          text: "Date-range, with min and max",
          name: "field3",
          value:{
            start: "2003-02-01",
            end: "2007-05-04"
          },
          min: "2003-02-01",
          max: "2007-05-04"
        },
        [],
        'filterPrefix',
        false
      )
    }}```
  
  </div>
    
  

</div>

</div>


### Relative Date Range



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/inputs/daterange/relative-range" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Relative Daterange (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="550" src="/examples/inputs/daterange/relative-range" title="Relative Daterange (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmlrelative-range">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksrelative-range">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlrelative-range">
  
```html <div class="dpr-date-range" data-dpr-module="date-range-input">
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">Relative Date range picker</legend>
    
        <div class="govuk-tabs" data-module="govuk-tabs">
          <h2 class="govuk-tabs__title">
            Contents
          </h2>
    
          <ul class="govuk-tabs__list">
    
            <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
              <a class="govuk-tabs__tab" href="#relative-date-range-picker-date-picker">
                Date range
              </a>
            </li>
    
            <li class="govuk-tabs__list-item">
              <a class="govuk-tabs__tab" href="#relative-date-range-picker-relative-range">
                Preset date ranges
              </a>
            </li>
    
          </ul>
    
          <div class="govuk-tabs__panel" id="relative-date-range-picker-date-picker">
    
            <div id="dpr-date-range" data-field-name="relative-date-range-picker">
    
              <div class="dpr-daterange__start-end-date-wrapper">
    
                <div class="dpr-daterange__start-date">
    
                  <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Relative Date range picker start" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="1977-05-25" data-max="9999-01-01" data-pattern-hint="DD/MM/YYYY">
    
                    <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="25/05/1977" data-max-date="01/01/9999">
    
                      <div class="govuk-form-group">
                        <label class="govuk-label" for="filters.relative-date-range-picker.start">
                          From
                        </label>
    
                        <div id="filters.relative-date-range-picker.start-hint" class="govuk-hint">
                          For example 17/05/2024.
                        </div>
    
                        <input class="govuk-input moj-js-datepicker-input " id="filters.relative-date-range-picker.start" name="filters.relative-date-range-picker.start" type="text" value="01/02/2003" aria-describedby="filters.relative-date-range-picker.start-hint" autocomplete="off">
    
                      </div>
    
                    </div>
    
                  </div>
    
                </div>
    
                <div class="dpr-daterange__end-date">
    
                  <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Relative Date range picker end" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="1977-05-25" data-max="9999-01-01" data-pattern-hint="DD/MM/YYYY">
    
                    <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="25/05/1977" data-max-date="01/01/9999">
    
                      <div class="govuk-form-group">
                        <label class="govuk-label" for="filters.relative-date-range-picker.end">
                          To
                        </label>
    
                        <div id="filters.relative-date-range-picker.end-hint" class="govuk-hint">
                          For example 17/05/2024.
                        </div>
    
                        <input class="govuk-input moj-js-datepicker-input " id="filters.relative-date-range-picker.end" name="filters.relative-date-range-picker.end" type="text" value="04/05/2007" aria-describedby="filters.relative-date-range-picker.end-hint" autocomplete="off">
    
                      </div>
    
                    </div>
    
                  </div>
    
                </div>
              </div>
    
            </div>
    
          </div>
    
          <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="relative-date-range-picker-relative-range">
    
            <div class="govuk-form-group govuk-!-margin-bottom-3 dpr-relative-range-radio">
    
              <fieldset class="govuk-fieldset">
    
                <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                  Preset date range
    
                </legend>
    
                <div class="govuk-radios govuk-radios--small" display-name="Preset date range" data-module="govuk-radios">
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration" name="filters.relative-date-range-picker.relative-duration" type="radio" value="">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration">
                      None
                    </label>
    
                  </div>
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration-2" name="filters.relative-date-range-picker.relative-duration" type="radio" value="yesterday">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration-2">
                      Yesterday
                    </label>
    
                  </div>
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration-3" name="filters.relative-date-range-picker.relative-duration" type="radio" value="tomorrow">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration-3">
                      Tomorrow
                    </label>
    
                  </div>
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration-4" name="filters.relative-date-range-picker.relative-duration" type="radio" value="last-seven-days">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration-4">
                      Last week
                    </label>
    
                  </div>
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration-5" name="filters.relative-date-range-picker.relative-duration" type="radio" value="next-seven-days">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration-5">
                      Next week
                    </label>
    
                  </div>
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration-6" name="filters.relative-date-range-picker.relative-duration" type="radio" value="last-month">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration-6">
                      Last month
                    </label>
    
                  </div>
    
                  <div class="govuk-radios__item">
                    <input class="govuk-radios__input" id="filters.relative-date-range-picker.relative-duration-7" name="filters.relative-date-range-picker.relative-duration" type="radio" value="next-month">
                    <label class="govuk-label govuk-radios__label" for="filters.relative-date-range-picker.relative-duration-7">
                      Next-month
                    </label>
    
                  </div>
    
                </div>
    
              </fieldset>
    
            </div>
    
          </div>
    
        </div>
    
      </fieldset>
    </div>

Nunjucks macro options
| Name| Type| Required| Description| | ---------------| ---------| --------| ------------------------------------------------------------| | data| object| Yes| Data object. See filter.| | parameterPrefix| string| no| The prefix to apply to the filter parameters in the page URL| | mandatory| boolean| no| default: false|

Filter

Name Type Required Description
text string Yes The title of the field
name string Yes The unique ID of the input
value object Yes Data object. See Value.
min string No The min date in format YYYY-MM-DD
max string No The max date in format YYYY-MM-DD

Value

Name Type Required Description
start string Yes The start date in format YYYY-MM-DD
end string Yes The end date in format YYYY-MM-DD 

    {%- from "dpr/components/_inputs/date-range/view.njk" import dprDateRange %}
    
    {{
      dprDateRange(
        {
          text: "Relative Date range picker",
          name: "relative-date-range-picker",
          value:{
            start: "2003-02-01",
            end: "2007-05-04"
          },
          relativeOptions: [
            { value: null, text: 'None' },
            { value: 'yesterday', text: 'Yesterday' },
            { value: 'tomorrow', text: 'Tomorrow' },
            { value: 'last-seven-days', text: 'Last week' },
            { value: 'next-seven-days', text: 'Next week' },
            { value: 'last-month', text: 'Last month' },
            { value: 'next-month', text: 'Next-month' }
          ]
        },
        [],
        'filters.',
        false
      )
    }}```
  
  </div>
    
  

</div>

</div>