Date Select

v0.0.0

following component is currently for TWS use only.

The Date picker depends on jQuery UI version 1.13.2

Date picker #

change data-date-format to apply different format add .custom-select-sm to select fields for smaller version

Filter by date

<!-- Date Select  -->
<div class="vi-date-select" data-date-format="dd/mm/yy">
  <label class="mb-0 vi-date-select__label">
    Filter by date
  </label>
  <div class="vi-date-select__trigger-container">
    <input autocomplete="off" class="datepicker-trigger custom-select" placeholder="Choose date">
    <div class="vi-date-select__clear-container">
      <!-- Icon cross-sign  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
    </div>
  </div>
</div>

Date range picker #

Change data-date-format to apply different format. Changing placeholder changes the placeholder text. Changing data-from-label changes the 'from' text label. Changing data-to-label changes the 'to' text label.

Filter by date

<!-- Date Select  -->
<div class="vi-date-select" data-date-format="dd/mm/yy">
  <label class="mb-0 vi-date-select__label">
    Filter by date
  </label>
  <div class="vi-date-select__trigger-container">
    <input autocomplete="off" class="datepicker-trigger custom-select" placeholder="From">
    <div class="vi-date-select__clear-container">
      <!-- Icon cross-sign  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
    </div>
  </div>
  <div class="vi-date-select__trigger-container">
    <input autocomplete="off" class="datepicker-trigger custom-select" placeholder="To">
    <div class="vi-date-select__clear-container">
      <!-- Icon cross-sign  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
    </div>
  </div>
</div>

Date range form #

Usage of datepicker in regular form (use –accent modifier for different view)

<!-- Date Select  -->
<form action="" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate="">
  <div class="vi-date-select">
    <label class="mb-0 vi-date-select__label">
      Filter by date
    </label>
    <div class="vi-date-select__trigger-container">
      <input autocomplete="off" class="datepicker-trigger custom-select form-control" placeholder="Choose date" required>
      <div class="vi-date-select__clear-container">
        <!-- Icon cross-sign  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
      </div>
    </div>
  </div>
</form>

jQuery UI #

The Date picker depends on jQuery UI version 1.13.2.

Add it to local filesystem or CDN:

<script crossorigin="anonymous" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  10 Jan 2025 - fix(date-select): only trigger should inherit form colorset
  06 Fbe 2024 - Firefox fix for placeholder transparency
  01 Feb 2024 - Fixed rlt support breaking small variant padding.
  07 Dec 2023 - Fix for rtl support for calendar.
  30 Nov 2023 - Support rtl for trigger
  08 Nov 2023 - Fixed calendar hiding after android keyboard resize event.
  08 Nov 2023 - Fixed calendar hiding after android keyboard resize event.
  03 Oct 2023 - Fixed calendar hiding when the virtual keyboard is closed and not opening at all in some cases on android devices.
  29 Sep 2023 - Adjusted calendar position inside a scrollpane on mobile.
  20 Sep 2023 - Fixed calendar overflowing body on mobile.
  04 Sep 2023 - Fixed error preventing the calendar to open when scrollparent is “html,body”.
  31 Aug 2023 - Fixed datepicker position inside a scrollpane.
  23 Aug 2023 - Fixed datepickers different colors depenending on form not working as expected.
  21 Jul 2023 - Fixed datepicker to fit in form
  21 Mar 2023 - CSS Changes.
  08 Mar 2023 - Fix regression.


Added

  31 Jul 2023 - Added datepicker arrows with visibility toggled by container’s width.
  21 Jul 2023 - Added example of datepicker as form for validations and added change event on clear.
  15 Jun 2023 - Update js to use library conventions
  27 Feb 2023 - Updated js/css to include a clear button.
  16 Feb 2023 - Updated js/css.
  08 Feb 2023 - Add a note about jQuery UI dependency.
  Initial draft


Changed

  18 Aug 2023 - Datepicker colors set depending on the form it is placed inside. (currently working for default form and ‘–accent’ modifier)