An element by Forter
<script>
import '@forter/date-range-picker';
</script>
<fc-date-range-picker>
</fc-date-range-picker>
<!-- Preset with no dates -->
<fc-date-range-picker preset="LAST_365_DAYS" .dates="${[]}">
</fc-date-range-picker>
<!-- Timestamp Int Dates no preset -->
<fc-date-range-picker preset="" .dates="${[1588305600000,1589169599999]}">
</fc-date-range-picker>
* <!-- Timestamp String Dates no preset -->
<fc-date-range-picker preset="" .dates="${['1588305600000','1589169599999']}">
</fc-date-range-picker>
* <!-- Max Range of 10 days -->
<fc-date-range-picker preset="" maxDays=10 .dates="${['1588305600000','1589169599999']}">
</fc-date-range-picker>
* <!-- Max Date -->
<fc-date-range-picker preset="" maxDate="2024-04-20" .dates="${['1588305600000','1589169599999']}">
</fc-date-range-picker>
* * <!-- Subset of presets and no calendar -->
<fc-date-range-picker .presets="${['THIS_MONTH', 'LAST_MONTH']}" hidecalendar>
</fc-date-range-picker>
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
dates |
dates |
any[] |
Dates picked. example: []
|
|
disableDatePickerRangeLimit |
number |
|||
disabled |
disabled |
boolean |
false | Disabled boolean. default: false, example: true |
format |
format |
string |
"DD MMM YYYY HH:mm" | Date Format. default: DD-MM-YYYY HH:mm , example: DD/MM/YYYY HH:mm
|
hideCalendar |
hidecalendar |
boolean |
false | Hide calendar and only show presets. |
maxDate |
maxDate |
string |
Limit maximum date can be picked | |
maxDays |
maxDays |
string |
Limit maximum date range in dyas (i.e. 10 will allow only range of 10 days), default none. example: 10 | |
minDate |
minDate |
string |
Limit minimum date can be picked | |
pickerOptions |
pickerOptions |
{} |
{} | Options for litepicker to override the defaults |
preset |
preset |
string |
Time Range Preset. example: LAST_90_DAYS
|
|
presets |
presets |
any[] |
Available presets for user to pick (if only a subset is required). If all presets are required, leave empty. example: ["THIS_MONTH", "LAST_MONTH"]
|
|
right |
right |
boolean |
If date-picker is aligning to right hand side. example: true | |
utc |
utc |
number |
0 | |
utctype |
utctype |
string |
"" |
Event |
---|
change |
Property | Description |
---|---|
--fc-date-picker-color |
input text color. example: pink
|
--fc-date-picker-height |
date picker width. example: 100px
|
--fc-date-picker-width |
date picker width. example: 1000px
|