Geoblink Design System

GeoCalendarDropdown Ready 23.2.0+

GeoCalendarDropdown renders a button that when clicked, displays a calendar with two inputs where you can enter date ranges and manually select dates clicking on the displayed grid.

To use this component you must install date-fns (opens new window) in your application.

TIP

GeoCalendar can be used independently from GeoCalendarDropdown if you want to display the calendar directly embed in your application.

Properties

Prop name Type Default value Description
calendarNavigationSelectIcon array 
function () {
  return ['fal', 'chevron-down']
}
 Show description
closeCalendarIcon array 
function () {
  return ['fal', 'times']
}
 Show description
defaultFromDate date Show description
defaultToDate date Show description
earliestDate date Show description
fromInputPlaceholder string Show description
initialDateInGrid date 
function () {
  return new Date()
}
 Show description
inputRangeIcon array 
function () {
  return ['fal', 'arrow-right']
}
 Show description
latestDate date Show description
locale object Show description
nextDateInSelectedGranularityIcon array 
function () {
  return ['fal', 'chevron-right']
}
 Show description
previousDateInSelectedGranularityIcon array 
function () {
  return ['fal', 'chevron-left']
}
 Show description
toInputPlaceholder string Show description
popupClass string|array|object Show description
isFromDateDisabled boolean Show description
isToDateDisabled boolean Show description
granularityId enumPropertyFactory({ componentName: 'GeoCalendarGranularityId', propertyName: 'granularityId', enumDictionary: GRANULARITY_IDS, required: true }) Show description
pickerDateUnit enumPropertyFactory({ componentName: 'GeoCalendar', propertyName: 'pickerDateUnit', enumDictionary: PICKER_DATE_UNITS, required: true }) Show description

Events

Name Type Description
emit-from-date Date User sets an initial date.
emit-to-date Date User set an end date.
apply-range-selection

Slots

Name Description
toggleButton

Use this slot to customize the button used to toggle the calendar

calendarHeaderTitle

Use this slot to customize the text displayed on the calendar’s header

pickerGranularity

Use this slot to customize the sidebar with the different granularities handled by the calendar

pickerAliases

Use this slot to customize the sidebar with the different granularities handled by the calendar

formatError

Use this slot to customize the message shown when there is an error in one of the selected dates

earliestDatePlaceholder

Use this slot to customize the text in the button used to apply your earliest available date in the fromDate input

latestDatePlaceholder

Use this slot to customize the text in the button used to apply your latest available date in the toDate input

calendarFooter

Use this slot to customize the footer of the calendar

Constants

Name Value
PICKER_DATE_UNITS Show definition
GRANULARITY_IDS Show definition
YEAR_GRID_CONSTANTS Show definition
DAY_GRID_CONSTANTS Show definition
MONTH_GRID_CONSTANTS Show definition
FOCUSABLE_INPUT_FIELDS Show definition
isDayUnavailable Show definition
isBefore Show definition
isAfter Show definition
isEqual Show definition
isWithinInterval Show definition

Examples