UI MarCom 3
Latest (3.5.1)
Previous versions
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Country and Language Selector Date-Time-Picker Disclaimer Dropdown Eyecatcher Feedback Module Figure Footer Header Hero Block Hotspots Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Button Group Toggle Switch Tooltip User Identifier Value Slider
Updates
Component Library Changelog Design Files Changelog
Help
Contact us

Date-Time-Picker Stable Dark theme

A calendar for date inputs.

Usage Code
<uimc-date-picker label="Date…"></uimc-date-picker>
<uimc-time-picker label="Time…"></uimc-time-picker>

Datepicker <uimc-date-picker>

AttributeDescriptionValuesDefault
labelSets the label for the inputfield–
themeSet the color scheme of the componentlight, darklight
valueSets and reflects the picked date as a formatted stringDateString–

Timepicker <uimc-time-picker>

AttributeDescriptionValuesDefault
labelSets the label for the inputfield–
themeSet the color scheme of the componentlight, darklight

Datepicker sample

<uimc-date-picker label="Date…"></uimc-date-picker>

Datepicker in dark scheme

<uimc-date-picker label="Date…" theme="dark"></uimc-date-picker>

Preselect a date

<uimc-date-picker label="Date…" value="2022-12-24"></uimc-date-picker>

Expand to container width

<uimc-date-picker label="Date…" class="width-100"></uimc-date-picker>

Timepicker

<uimc-time-picker label="Time…"></uimc-time-picker>

Expand Timepicker to container width

<uimc-time-picker label="Time…" class="width-100"></uimc-time-picker>

Legacy version

The old version from UI MarCom 2 is based on a jQuery plugin and also supports an inline view and selection of date ranges

Inline Datepicker

<div class="textfield date-time-picker js-date-time-picker"  data-inline="true"data-select="date" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Date…</label>
</div>

Inline Timepicker

<div class="textfield date-time-picker js-date-time-picker"  data-inline="true" data-select="time" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Choose a time…</label>
</div>

Date range picker

<div class="textfield date-time-picker js-date-time-picker" data-select="date" data-mode="range" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Choose date period…</label>
</div>