<input type="text" name="date_name" id="date_id" class="datepicker " placeholder="dd/mm/yyyy" />
<input type="text"
       name="{{ date_name }}"
       id="{{ date_id }}"
       class="datepicker {% if modifier %}{{ modifier }}{% endif %}"
       placeholder="dd/mm/yyyy"
/>
{
  "date_name": "date_name",
  "date_id": "date_id"
}
  • Content:
    //
    // Datepicker styling.
    //
    input[type="date"],
    input.datepicker {
      @extend %field-colors;
    
      background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTk1Ny42MDIgMTcyLjczN3Y3NTIuNDAyaC04ODkuMjAzdjY4LjQwMmg5NTcuNjAydi04MjAuODAzek04ODkuMjAzIDEwNC4zMzhoLTEwMi42YzAgNTguMTQyLTQ0LjQ2MSAxMDIuNi0xMDIuNiAxMDIuNnMtMTAyLjYtNDQuNDU5LTEwMi42LTEwMi42aC0yMzkuNGMwIDU4LjE0Mi00NC40NTkgMTAyLjYtMTAyLjYgMTAyLjZzLTEwMi42LTQ0LjQ1OS0xMDIuNi0xMDIuNmgtMTM2Ljc5OXY3NTIuNDAyaDg4OS4yMDN2LTc1Mi40MDJ6TTgyMC44MDMgNzg4LjM0aC03NTIuNDAydi01MTMuMDAyaDc1Mi40MDJ2NTEzLjAwMnpNMjM5LjQgMTM4LjUzN2MyMC41MiAwIDM0LjE5OS0xMy42ODEgMzQuMTk5LTM0LjIwMXYtNjguNDAyYzAtMjAuNTItMTMuNjgxLTM0LjE5OS0zNC4yMDEtMzQuMTk5cy0zNC4yMDEgMTMuNjc5LTM0LjIwMSAzNC4xOTl2NjguNDAyYzAgMjAuNTIgMTMuNjc5IDM0LjIwMSAzNC4yMDEgMzQuMjAxek02ODQuMDA0IDEzOC41MzdjMjAuNTIgMCAzNC4yMDEtMTMuNjgxIDM0LjIwMS0zNC4yMDF2LTY4LjQwMmMwLTIwLjUyLTEzLjY4MS0zNC4xOTktMzQuMjAxLTM0LjE5OXMtMzQuMjAxIDEzLjY3OS0zNC4yMDEgMzQuMTk5djY4LjQwMmMwIDIwLjUyIDEzLjY4MSAzNC4yMDEgMzQuMjAxIDM0LjIwMXpNMjA1LjIwMSAzNzcuOTM4aDEwMi42djEwMi42aC0xMDIuNnYtMTAyLjZ6TTQxMC40MDIgMzc3LjkzOGgxMDIuNnYxMDIuNmgtMTAyLjZ2LTEwMi42ek01ODEuNDA0IDM3Ny45MzhoMTAyLjZ2MTAyLjZoLTEwMi42di0xMDIuNnpNMjA1LjIwMSA1NDguOTM4aDEwMi42djEwMi42aC0xMDIuNnYtMTAyLjZ6TTQxMC40MDIgNTQ4LjkzOGgxMDIuNnYxMDIuNmgtMTAyLjZ2LTEwMi42ek01ODEuNDA0IDU0OC45MzhoMTAyLjZ2MTAyLjZoLTEwMi42di0xMDIuNnoiIGZpbGw9InJnYig2OCwgNjgsIDY4KSI+PC9wYXRoPgo8L3N2Zz4K') no-repeat right .625rem center;
      background-size: 1.25rem;
    }
    
    .ui-datepicker {
      width: 20rem;
    
      .ui-datepicker-prev,
      .ui-datepicker-next {
        top: 0;
        bottom: 0;
        margin: auto;
      }
    
      &.ui-widget-content.ui-widget {
        padding: 0;
        border: 1px solid #dde2e5;
        border-radius: $radius-2;
        font-size: .82645rem;
        line-height: 1.694rem;
    
        .ui-widget-header,
        .ui-state-default,
        .ui-state-focus,
        .ui-state-hover {
          border: 0;
          background: none;
        }
    
        .ui-widget-header {
          margin: 0;
          padding-top: .5rem;
          padding-bottom: .5rem;
          border: 0;
    
          .ui-datepicker-title {
            select {
              display: block;
              padding: 0;
              float: left;
              // sass-lint:disable-block no-duplicate-properties
              font-size: .6 * 1.125rem;
              font-size: .6rem;
              font-weight: normal;
              line-height: 1.8rem;
            }
          }
    
          .ui-icon.ui-icon-circle-triangle-w,
          .ui-state-focus .ui-icon.ui-icon-circle-triangle-w,
          .ui-state-hover .ui-icon.ui-icon-circle-triangle-w {
            width: 0;
            height: 0;
            border-top: .625rem solid transparent;
            border-right: .625rem solid $color-blue;
            border-bottom: .625rem solid transparent;
            background-image: none;
          }
    
          .ui-icon.ui-icon-circle-triangle-e,
          .ui-state-focus .ui-icon.ui-icon-circle-triangle-e,
          .ui-state-hover .ui-icon.ui-icon-circle-triangle-e {
            width: 0;
            height: 0;
            border-top: .625rem solid transparent;
            border-bottom: .625rem solid transparent;
            border-left: .625rem solid $color-blue;
            background-image: none;
          }
        }
    
        table.ui-datepicker-calendar {
          margin: 0;
        }
    
        th {
          padding: .7em .3em;
          background-color: $color-lightest-blue;
          font-size: .72645rem;
          font-weight: normal;
          line-height: 1.694rem;
          text-transform: uppercase;
        }
    
        td {
          display: table-cell;
          width: 2rem;
          height: 2rem;
          border: 1px solid $color-lightest-gray;
          background-color: #f2ffd6;
          color: #595f60;
          font-size: .82645rem;
          line-height: 1.694rem;
          text-align: center;
          vertical-align: middle;
    
          &::before {
            display: none;
          }
    
          &.ui-datepicker-week-col {
            width: 2rem;
            height: 2rem;
            border: 0;
            background-color: transparent;
            font-weight: bold;
            text-align: center;
          }
    
          a,
          span {
            padding: 0;
            border: 0;
            text-align: center;
          }
    
          &.ui-datepicker-today {
            color: $color-blue;
            opacity: 1;
    
            .ui-state-highlight {
              color: $color-blue;
            }
          }
    
          a.ui-state-active {
            font-weight: bold;
          }
    
          &.ui-state-disabled {
            background-color: $color-white;
          }
    
          &.ui-datepicker-current-day {
            background-color: $color-orange;
            color: $color-blue;
          }
        }
    
        tr td:last-child {
          border-right: 0;
        }
    
        tr:last-child td {
          border-bottom: 0;
        }
      }
    }
    
    
    
  • URL: /components/raw/input-date/_input-date.scss
  • Filesystem Path: components/21-atoms/inputs/input-date/_input-date.scss
  • Size: 5 KB
  • Content:
    'use strict';
    
    (function ($) {
      $(document).ready(function () {
        $('.datepicker').loadDatepicker();
      });
    
    })(jQuery);
    
  • URL: /components/raw/input-date/input-date.binding.js
  • Filesystem Path: components/21-atoms/inputs/input-date/input-date.binding.js
  • Size: 123 Bytes
  • Content:
    /**
     * @file
     * Implements the jQuery UI datepicker plugin.
     *
     * @author
     * Gert-Jan Meire
     *
     */
    
    'use strict';
    
    (function ($) {
      $.fn.extend({
    
        /**
         * Creates a jQuery extension function.
         *
         */
        loadDatepicker: function () {
          $(this).datepicker({
            showWeek: true,
            dateFormat: 'dd/mm/yy',
            altFormat: 'dd/mm/yy'
          });
        }
      });
    })(jQuery);
    
  • URL: /components/raw/input-date/input-date.functions.js
  • Filesystem Path: components/21-atoms/inputs/input-date/input-date.functions.js
  • Size: 396 Bytes

Date input

The date input uses a text input field that shows the jQuery datepicker plugin on focus. When implementing this on your own date fields, make sure they have the class .datepicker otherwise the datepicker will not work.