Date Selection

Simple Example

    <nile-calendar></nile-calendar>

Deselection Enabled

    <nile-calendar doubleClickUnselect></nile-calendar>

Single Date Selection Properties

Type	Names
Properties	doubleClickUnselect
Events	nile-clear, nile-change

---

Range Selection

---

Range Picker Example

    <nile-calendar range value='{"startDate": "2024-06-01", "endDate": "2024-06-09"}'></nile-calendar>

---

ShowManual Inputs

    <nile-calendar range 
    value='{"startDate": "2024-06-01", "endDate": "2024-06-09"}' showManualInputs> </nile-calendar>

---

Allowed Dates Example

    <nile-calendar range allowedDates='{"startDate": "2024-01-10", "endDate": "2024-01-18"}'>
    </nile-calendar>

---

Hide Duration Fields

    <nile-calendar range hide-duration-fields=[`hours`,`days`] > </nile-calendar>

Range Selection Properties

Type	Names
Properties	showManualInputs, hide-duration-fields, selectedValue, selectedUnit, hideTypes, allowClear
Events	nile-type-change

---

---

Attributes & Properties

Name	Description	Range Value	Type	Default
value	The current value of the input, submitted as a name/value pair with form data.	-	string | stringified version of { startDate: string, endDate: string }	null
allowedDates	Allows the user to select the date between the given start and end date.	-	stringified version of { startDate: string, endDate: string }	''
showManualInputs	show the manual input box from calendar	true	Boolean	False
hideTypes	hides or shows the type selection of calendar i.e. absolute | relative	true	Boolean	False
range	Determines if the selection is range of date or single value	-	Boolean	False
doubleClickUnselect	allows to deselect a date	false	Boolean	False
allowClear	Clear button in range selection	true	Boolean	False
selectedUnit	Time unit selected for relative calendar	true	'minutes' | 'hours' | 'days' | 'weeks' | 'months'	""
selectedValue	Time unit selected value for relative calendar	true	Number	-
hide-duration-fields	Hide duration fields for relative calendar	true	Boolean	False

---

Events

Name	Description	Event Detail
nile-change	Emitted when an alteration to the control's value is committed by the user.	{ value: Date } | { startDate: Date, endDate: Date }
nile-init	Emitted when the component connects.	-
nile-destroy	Emitted when the component disconnects.	-
nile-clear	Emitted date is cleared.	-
nile-type-change	Emitted calendar type is changed. i.e. absolute or relative	{ value: 'absolute' | 'relative' }

---

---