UI Kit

Daterange

Last update:
()
Message feat(daterangepicker): overlay attribute
Committer: Tamás Bíró
Version history

Default

e-daterange

<e-daterange id="normal" start="2016-04-13" end="2016-04-20"></e-daterange>

                                <e-daterange id="normal" start="2016-04-13" end="2016-04-20"></e-daterange>

Inline [layout="inline"]

<e-daterange id="inline" layout="inline" start="2016-04-13" end="2016-04-20"></e-daterange>

                                <e-daterange id="inline" layout="inline" start="2016-04-13" end="2016-04-20"></e-daterange>

min-date, max-date min-date, max-date

<e-daterange id="inline" layout="inline" start="2016-04-15" end="2016-04-20" min-date="2016-04-15" max-date="2016-04-22"></e-daterange>

                                <e-daterange id="inline" layout="inline" start="2016-04-15" end="2016-04-20" min-date="2016-04-15" max-date="2016-04-22"></e-daterange>

disabled

<e-daterange id="normal" start="2016-04-13" end="2016-04-20" disabled></e-daterange>

                                <e-daterange id="normal" start="2016-04-13" end="2016-04-20" disabled></e-daterange>

invalid

<e-daterange id="normal" start="2016-04-13" end="2016-04-20" invalid></e-daterange>

                                <e-daterange id="normal" start="2016-04-13" end="2016-04-20" invalid></e-daterange>

inline

<e-daterange id="normal" start="2016-04-13" end="2016-04-20" inline></e-daterange>

                                <e-daterange id="normal" start="2016-04-13" end="2016-04-20" inline></e-daterange>

inline and overlay

<e-daterange id="normal" start="2016-04-13" end="2016-04-20" inline overlay></e-daterange>

                                <e-daterange id="normal" start="2016-04-13" end="2016-04-20" inline overlay></e-daterange>

API Reference

Properties

Name Description Type Required Default value
layout Layout type (inline or dropdown) string dropdown
start The start of the initially selected date range string
end The end of the initially selected date range string
min-date The earliest date a user may select string
max-date The latest date a user can select string
locale Sets the language of the component string en
disabled Disabled state boolean false
invalid Invalid state boolean false
inline Inline block version boolean false
overlay Show/hide overlay behind the picker in opened state boolean false

Events

Event Description Returns
update Fires on every date change detail: { start: { date: [as string], dateObj: [JavaScript date] }, end: { date: [as string], 'dateObj': [JavaScript date] } }

Related components

CalendarDatepickerDatetimepicker