Daterange
Default
<e-daterange start="2016-04-13" end="2016-04-20"></e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20"></e-daterange>Inline
<e-daterange layout="inline" start="2016-04-13" end="2016-04-20" inline></e-daterange>
<e-daterange layout="inline" start="2016-04-13" end="2016-04-20" inline></e-daterange>min-date, max-date
<e-daterange layout="inline" start="2016-04-15" end="2016-04-20" min-date="2016-04-15" max-date="2016-04-22"></e-daterange>
<e-daterange 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 start="2016-04-13" end="2016-04-20" disabled></e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20" disabled></e-daterange>invalid
<e-daterange start="2016-04-13" end="2016-04-20" invalid></e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20" invalid></e-daterange>inline
<e-daterange start="2016-04-13" end="2016-04-20" inline></e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20" inline></e-daterange>No clear
<e-daterange start="2016-04-13" end="2016-04-20" no-clear></e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20" no-clear></e-daterange>placement
<div class="clearfix">
<e-daterange class="float-right" start="2016-04-13" end="2016-04-20" placement="bottom-end" inline></e-daterange>
</div>
<div class="clearfix"><e-daterange class="float-right" start="2016-04-13" end="2016-04-20" placement="bottom-end" inline></e-daterange></div>inline and overlay
<e-daterange start="2016-04-13" end="2016-04-20" inline overlay></e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20" inline overlay></e-daterange>custom presets
<e-daterange start="2016-04-13" end="2016-04-20">
<e-daterange-preset name="One Week" start="2016-01-01" end="2016-01-07"></e-daterange-preset>
<e-daterange-preset name="Two Weeks" start="2016-01-01" end="2016-01-14"></e-daterange-preset>
<e-daterange-preset name="Last 2 Months" last="2 months"></e-daterange-preset>
<e-daterange-preset name="Last 3 days" last="3 days"></e-daterange-preset>
</e-daterange>
<e-daterange start="2016-04-13" end="2016-04-20"><e-daterange-preset name="One Week" start="2016-01-01" end="2016-01-07"></e-daterange-preset><e-daterange-preset name="Two Weeks" start="2016-01-01" end="2016-01-14"></e-daterange-preset><e-daterange-preset name="Last 2 Months" last="2 months"></e-daterange-preset><e-daterange-preset name="Last 3 days" last="3 days"></e-daterange-preset></e-daterange>API Reference e-daterange
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]
}
}
} |
API Reference e-daterange-preset
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| name | Custom range title | string | - | |
| start | The start of the initially selected date in range [YYYY-MM-DD] | string | - | |
| end | The end of the initially selected date in range [YYYY-MM-DD] | string | - | |
| last | 'x month' selects last x month, 'x days' selects last x days | string | - |
Events
| Event | Description | Returns |
|---|---|---|
datarangepreset.update | Fires on attach, and every attribute change if daterange is valid | {
detail: {
name: [as string],
start: [as string],
end: [as string],
uuid: [as string]
}
} |
datarangepreset.delete | Fires on detach | {
detail: {
uuid: [as string]
}
} |