@forter/date-range-picker NPM

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`