Date Picker

Design

Code

Simple Example

Choose the date

<nile-date-picker>
  <nile-button slot="trigger" label="Choose a date range"> Choose the date </nile-button>
</nile-date-picker>

Range Picker Example

<nile-date-picker range>
  <nile-input slot="trigger" label="Choose a date range"> </nile-input>
</nile-date-picker>

<nile-date-picker range value='{"startDate": "2023-09-20", "endDate": "2023-09-30"}'>
  <nile-input slot="trigger" label="Choose a date range"> </nile-input>
</nile-date-picker>

<nile-date-picker
  range
  value='{"startDate": "2023-09-20 00:00:00.000", "endDate": "2023-09-30 11:00:00.000"}'
>
  <nile-input slot="trigger" label="Choose a date range"> </nile-input>
</nile-date-picker>

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 }	''
range	Determines if the selection is range of date or single value	-	Boolean	False
hideTypes	if range==true hides or shows the type selection of calendar i.e. absolute \| relative	true	Boolean	False
showManualInputs	show the manual input box from calendar	true	Boolean	False
doubleClickUnselect	allows to deselect a date	false	Boolean	False
allowClear	Clear button in range selection	true	Boolean	False
hide-duration-fields	Hide duration fields for relative calendar (in case of range=true)	true	Boolean	False
open	Controls the opening and closing of the date picker dropdown (use dropdown nile-show, nile-hide events to change open variable)	-	boolean	false
type	Control the type of calendar to show (if range==true)	true	'absolute' \| 'relative'	'absolute'
label (anchor element property)	The input's label. If you need to display HTML, use the label slot instead.		string	''
helpText help-text (anchor element property)	The chip's help text. If you need to display HTML, use the help-text slot instead.		string	false
disabled (anchor element property)	Disables the chip.		boolean	false
placeholder (anchor element property)	Placeholder text to show as a hint when the search is empty.		string	''

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' }

Dependencies

nile-calendar , Please Refer to Nile Calendar for the examples of all attributes