DateRangeSelector
value type: date[]The DateRangeSelector block allows the user to choose a start date and an end date for a date range. The selected range is saved as an array with two date elements, the start and end dates.
Other date type blocks are
DateSelector,DateTimeSelector,MonthSelectorandWeekSelector.
Block
~
State
block_id: []
Block Setup
id: block_id
type: DateRangeSelector
properties:
disabledDates:
dates: []
ranges: []
placeholder:
- Start Date
- End Date
Settings
DateRangeSelector JSON Schema Definition
type: object
properties:
events:
additionalProperties: false
properties:
onChange:
description: Trigger actions when selection is changed.
type: array
type: object
properties:
additionalProperties: false
properties:
allowClear:
default: true
description: Allow the user to clear their input.
type: boolean
autoFocus:
default: false
description: Autofocus to the block on page load.
type: boolean
disabled:
default: false
description: Disable the block if true.
type: boolean
disabledDates:
description: Disable specific dates so that they can not be chosen.
properties:
dates:
description: >-
Array of specific dates to be disabled. Can be date strings or a
_date objects.
items:
description: Specific dates to be disabled.
type:
- string
- object
type: array
max:
description: >-
Disable all dates greater than the maximum date. Can be a date
string or a _date object.
type:
- string
- object
min:
description: >-
Disable all dates less than the minimum date. Can be a date string
or a _date object.
type:
- string
- object
ranges:
description: >-
Array of array pairs of start and end dates be disabled. Can be date
strings or a _date objects.
items:
description: Specific date ranges to be disabled.
items:
type:
- string
- object
type: array
type: array
type: object
format:
default: YYYY-MM-DD
description: >-
Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a
date value of 1999-12-31 as "31 December 1999". The format has to
conform to moment.js formats.
type: string
inputStyle:
description: Css style to applied to input.
type: object
label:
additionalProperties: false
description: Label properties.
properties:
align:
default: left
description: Align label left or right when inline.
enum:
- left
- right
type: string
colon:
default: true
description: Append label with colon.
type: boolean
disabled:
default: false
description: Hide input label.
type: boolean
extra:
description: Extra text to display beneath the content - supports html.
type: string
extraStyle:
description: Css style to applied to label extra.
type: object
feedbackStyle:
description: Css style to applied to label feedback.
type: object
hasFeedback:
default: true
description: >-
Display feedback extra from validation, this does not disable
validation.
type: boolean
inline:
default: false
description: Render input and label inline.
type: boolean
span:
description: Label inline span.
type: number
title:
description: Label title - supports html.
type: string
type: object
placeholder:
default:
- Start Date
- End Date
description: Placeholder text inside the block before user types input.
type: array
separator:
default: '~'
description: Separator symbol shown between start and end date inputs.
type: string
size:
default: default
description: Size of the block.
enum:
- small
- default
- large
type: string
suffixIcon:
default: CalendarOutlined
description: >-
Name of an Ant Design Icon or properties of an Icon block to customize
icon on right-hand side of the date picker.
type:
- string
- object
title:
description: >-
Title to describe the input component, if no title is specified the
block id is displayed - supports html.
type: string
type: object