{
  "datepicker": {
    "title": "Datepicker",
    "status": {
      "ready": true
    },
    "introduction": [
      "<p>The datepicker hooks onto a <code>input[type='date|text']</code> element, and requires a <code>data-js=datepicker</code> attribute to initialise.</p>",
      "<p>Alternatively, for a non-JS implementation, a <code>input[type='date']</code> element will suffice, with optional <code>min</code>, <code>max</code>, and <code>value</code> attributes. How this datepicker presents will vary from browser to browser.",
      "<p>Inputs can be predefined on page load by having the <code>value</code> attribute populated (using the ISO wire format <code>YYY-MM-DD</code>).<br/>NOTE: in the case of date range and multiple date, due to their specific non-date format values, must be prepopulated from a <code>data-default-date</code> attribute instead.</p>",
      "<p>The JS datepicker has a dependency on <a href='https://chmln.github.io/flatpickr/'>flatpickr</a>. Remember to include a reference to <code>external/flatpickr.min.js</code> as well as the standard <code>modules/jquery.pfDatepicker</code>.</p>",
      "<p>By default, the standard datepicker will present as a Native datepicker widget on handheld devices (unless overridden manually; see <code>[data-datepicker-force]</code> attribute below). However, in the case that a range or multiple date selector is used, the JS implemented datepicker will be used instead.</p>",
      "<h4>Browser compatibility</h4>",
      "<p>The datepicker leverages <code>Object.assign</code>, which is not supported natively by <em>Internet Explorer 11 and lower</em>. If support for these browsers is required, include a reference to <code>polyfills/object.assign.js</code></p>"
    ],
    "examples": [
      {
        "description": "Non-JS datepicker",
        "template": "input-datepicker",
        "template-data": {
          "id": "basicNoJS",
          "label": "Basic No Javascript"
        }
      },
      {
        "description": "Basic datepicker",
        "template": "input-datepicker",
        "template-data": {
          "id": "basic",
          "label": "Basic With JS",
          "data": {
            "js": "datepicker"
          }
        }
      },
      {
        "description": "non-JS datepicker with predefined value",
        "template": "input-datepicker",
        "template-data": {
          "id": "predefined-basicNoJS",
          "label": "Basic No JS",
          "value": "2020-06-01"
        }
      },
      {
        "description": "Basic datepicker with predefined value",
        "template": "input-datepicker",
        "template-data": {
          "id": "predefined-basic",
          "label": "Basic With JS",
          "value": "2020-06-01",
          "data": {
            "js": "datepicker"
          }
        }
      },
      {
        "description": "Non-JS Minimum date",
        "template": "input-datepicker",
        "template-data": {
          "id": "minDateNoJS",
          "label": "Minimum date No JS",
          "min": "2020-06-01"
        }
      },
      {
        "description": "Minimum date",
        "template": "input-datepicker",
        "template-data": {
          "id": "minDate",
          "label": "Minimum date With JS",
          "min": "2020-06-01",
          "data": {
            "js": "datepicker"
          }
        }
      },
      {
        "description": "Non-JS Maximum date",
        "template": "input-datepicker",
        "template-data": {
          "id": "maxDateNoJS",
          "label": "Maximum date No JS",
          "max": "2020-06-01"
        }
      },
      {
        "description": "Maximum date",
        "template": "input-datepicker",
        "template-data": {
          "id": "maxDate",
          "label": "Maximum date With JS",
          "max": "2020-06-01",
          "data": {
            "js": "datepicker"
          }
        }
      },
      {
        "description": "Highlight a specific day of the week",
        "template": "input-datepicker",
        "template-data": {
          "id": "highlightDay",
          "label": "Highlight Fridays",
          "data": {
            "js": "datepicker",
            "datepicker-highlight-day": "5"
          }
        }
      }
    ],
    "dependencies": [
      "src/scripts/external/flatpickr.min.js",
      "src/scripts/modules/jquery.pfDatepicker.js",
      "src/scripts/polyfills/object.assign.js",
      "src/styles/base/*.scss",
      "src/styles/components/blocks/_datepicker.scss",
      "src/styles/external/flatpickr.scss"
    ],
    "usages": {
      "body": [
        [
          "<code>[data-js=datepicker]</code>",
          "Placed directly on the <code>input[type='date']</code> or <code>input[type=text]</code> that will use the datapicker component.",
          "Optional"
        ],
        [
          "<code>[min='YYYY-MM-DD']</code>",
          "Will determine the minimum possible date that can be specified within the input",
          "Optional"
        ],
        [
          "<code>[max='YYYY-MM-DD']</code>",
          "Will determine the maximum possible date that can be specified within the input",
          "Optional"
        ],
        [
          "<code>[value]</code>",
          "Predefines a value in the text field.",
          "Optional"
        ],
        [
          "<code>[data-default-date]</code>",
          "Acts as a data-attribute value proxy - mainly to assist with prepopulating the multiple or range datepickers, but can be used with other as a <code>value</code> alternative.",
          "Optional. Requires the <code>data-js='datepicker'</code> attribute to be added."
        ],
        [
          "<code>[data-datepicker-force]</code>",
          "On touchscreen devices, the datepicker will attempt to use the native datepicker widget (where possible). This will force the JS implementation to be used.",
          "Optional. Requires the <code>data-js='datepicker'</code> attribute to be added."
        ],
        [
          "<code>[data-datepicker-highlight-day='0-6']</code>",
          "Will visually highlight the day of the week specified.<br>0 = Sunday, 1 = Monday etc. NOTE: This mode will force mobile devices to use the JS display rather than native UI.",
          "Optional. Requires the <code>data-js='datepicker'</code> attribute to be added."
        ]
      ]
    }
  }
}