@forter/date-range-picker

fc-date-range-picker

An element by Forter

Usage

<script>
   import '@forter/date-range-picker';
</script>

<fc-date-range-picker>
</fc-date-range-picker>

Examples

<!-- 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>

Properties

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	""

Events

Event
change

CSS Custom Properties

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