Inputs Date Range

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

Contents 

    <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="Start date" 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="End date" 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
    ) }}

Overview

The DPR multiselect component is composite of the MOJ design system date picker component.

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

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

Contents 

    <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="Start date" 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="End date" 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
    ) }}

Min and Max dates

Open this example (Date Range with Min and Max (example)) in a new window

Contents 

    <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="Start date" 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" 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="End date" 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" 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
    ) }}

Relative Date Range

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

Contents 

    <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="#date-picker">
                Date range
              </a>
            </li>
    
            <li class="govuk-tabs__list-item">
              <a class="govuk-tabs__tab" href="#relative-range">
                Preset date ranges
              </a>
            </li>
    
          </ul>
    
          <div class="govuk-tabs__panel" id="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="Start date" 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="End date" 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-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-week">
                    <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-week">
                    <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-week', text: 'Last week' },
          { value: 'next-week', text: 'Next week' },
          { value: 'last-month', text: 'Last month' },
          { value: 'next-month', text: 'Next-month' }
        ]
      },
      'filters.',
      false
    ) }}