ExDatePicker

v1.0.0Input

ExSDK date picker control for SAP UI5/Fiori applications. Two-way data binding supported. Configurable placeholder text. Supports required field validation.

Namespace
ux7.ExDatePicker
Extends
sap.ui.core.Control
XML tag
<ExDatePicker />
Quick Start
<VBox class="sapUiMediumMargin" width="100%">

  <!-- Mode -->
  <ux7:ExTitle text="Single vs Range Mode" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
    <VBox class="sapUiSmallMarginEnd">
      <ux7:ExDatePicker id="dpSingle" label="Tek Tarih" mode="single" placeholder="Gün.Ay.Yıl" required="true" showToday="true" />
    </VBox>
    <VBox>
      <ux7:ExDatePicker id="dpRange" label="Tarih Aralığı" mode="range" placeholder="Başlangıç - Bitiş" showToday="true" />
    </VBox>
  </FlexBox>

  <!-- Size -->
  <ux7:ExTitle text="Size Variants" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExDatePicker id="dpSm" label="Small (sm)" size="s" class="sapUiSmallMarginEnd" />
    <ux7:ExDatePicker id="dpMd" label="Medium (md)" size="m" class="sapUiSmallMarginEnd" />
    <ux7:ExDatePicker id="dpLg" label="Large (lg)" size="l" class="sapUiSmallMarginEnd" />
    <ux7:ExDatePicker id="dpXl" label="XLarge (xl)" size="xl" />
  </FlexBox>

  <!-- Validation -->
  <ux7:ExTitle text="Validation &amp; Error" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExDatePicker id="dpError" label="Hata Durumu" error="Geçersiz tarih formatı" value="abc" class="sapUiSmallMarginEnd" />
    <ux7:ExDatePicker id="dpDisabled" label="Disabled" enabled="false" value="15.06.2024" />
  </FlexBox>

  <!-- Min / Max -->
  <ux7:ExTitle text="Min / Max Date" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExDatePicker id="dpMinMax" label="2024 yılı içinde seç" minDate="01.01.2024" maxDate="31.12.2024" placeholder="01.01.2024 — 31.12.2024" />
  </FlexBox>

  <!-- Display Format -->
  <ux7:ExTitle text="Display Format" level="h3" variant="section" />
  <FlexBox wrap="Wrap">
    <ux7:ExDatePicker id="dpFmt1" label="dd.mm.yyyy" displayFormat="dd.mm.yyyy" class="sapUiSmallMarginEnd" />
    <ux7:ExDatePicker id="dpFmt2" label="mm/dd/yyyy" displayFormat="mm/dd/yyyy" class="sapUiSmallMarginEnd" />
    <ux7:ExDatePicker id="dpFmt3" label="yyyy-mm-dd" displayFormat="yyyy-mm-dd" />
  </FlexBox>

</VBox>