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 | | top | top | boolean | | If date-picker is aligning to top 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 |