Components

Product set components

Date picker

The date picker allows users to select a date or enter one using free text

The date picker has been cloned from design used on the DPS prisoner profile.

Research on this component

Full documentation on this component

Pre-requisite javascript

You will need to add the datepicker.js script to your project, as follows:

<script src="/assets/datepicker.js"></script>

Contents

<div class="govuk-form-group hmpps-datepicker hmpps-datepicker--fixed-width" data-module="hmpps-datepicker">
      <label class="govuk-label govuk-!-font-weight-bold" for="startDate">
        Start date
      </label>
      
      
      <div class="hmpps-datepicker-input__wrapper">
        
    
    
    <div class="govuk-form-group">
      
    
    
      <input class="govuk-input govuk-input hmpps-js-datepicker-input" id="startDate" name="startDate" type="text" autocomplete="off"
        
            
          
        
            
          
        
            
          
        
       maxlength="10" data-mindate="" data-maxdate="">
    
    </div>
    
        <button class="hmpps-datepicker-button hmpps-js-datepicker-button" data-button="datepicker-startDate-toggle">
          <span class="govuk-visually-hidden">Choose date.</span>
          <svg focusable="false" class="hmpps-datepicker-icon" aria-hidden="true" role="img" viewBox="0 0 22 22">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M16.1333 2.93333H5.86668V4.4C5.86668 5.21002 5.21003 5.86667 4.40002 5.86667C3.59 5.86667 2.93335 5.21002 2.93335 4.4V2.93333H2C0.895431 2.93333 0 3.82877 0 4.93334V19.2667C0 20.3712 0.89543 21.2667 2 21.2667H20C21.1046 21.2667 22 20.3712 22 19.2667V4.93333C22 3.82876 21.1046 2.93333 20 2.93333H19.0667V4.4C19.0667 5.21002 18.41 5.86667 17.6 5.86667C16.79 5.86667 16.1333 5.21002 16.1333 4.4V2.93333ZM20.5333 8.06667H1.46665V18.8C1.46665 19.3523 1.91436 19.8 2.46665 19.8H19.5333C20.0856 19.8 20.5333 19.3523 20.5333 18.8V8.06667Z"
            ></path>
            <rect x="3.66669" width="1.46667" height="5.13333" rx="0.733333"></rect>
            <rect x="16.8667" width="1.46667" height="5.13333" rx="0.733333"></rect>
          </svg>
        </button>
      </div>
    </div>

{% from "hmpps/components/date-picker/macro.njk" import hmppsDatePicker %}
    
    {{ hmppsDatePicker({
      id: "startDate",
      name: "startDate",
      label: {
        text: "Start date",
        classes: "govuk-!-font-weight-bold"
      },
      classes: 'hmpps-datepicker--fixed-width'
    }) }}