Web components | Date Picker | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="medium">
                                                            <w-datepicker
                                                              id="datepicker"
                                                              label="Appointment date"
                                                            ></w-datepicker>
                                                          </w-stack>
                                                        </template>
                                                        <script type="module">
                                                        const datepickerModelValue = [];
                                                        
                                                        const datepicker = document.querySelector('#datepicker');
                                                        datepicker.modelValue = datepickerModelValue;
                                                        datepicker.addEventListener('update:modelValue', event => {
                                                          onUpdateModelValue(event, datepicker);
                                                        });
                                                        
                                                        function onUpdateModelValue(value, selector) {
                                                          let localValue = value;
                                                        
                                                          if (Array.isArray(localValue.detail)) {
                                                            [localValue] = [...value.detail];
                                                          }
                                                        
                                                          selector.modelValue = localValue;
                                                        }
                                                        </script>

Name	Description	Type	Default	Values
dates-disabled	Controls which dates are blocked from being selected.	Object	null	{ before: Date, after: Date, dates: Array<Date>, ranges: Array<{ from: Date, to: Date }> }
dates-highlighted	Controls which dates are highlighted.	Object	null	{ before: Date, after: Date, dates: Array<Date>, ranges: Array<{ from: Date, to: Date }> }
error	Shows up to two initials in th Optional error message to be shown under the date picker field. e avatar.	String, Boolean	null
first-day-of-week	Sets the first day of the week for different countries. 0 is Sunday and 1 is Monday.	Number	0	0, 1, 2, 3, 4, 5, 6
formatter	The formatter function which accepts a Date and returns a string. By default it uses the ISO-8601 format.	Function	date => new Intl.DateTimeFormat('default').format(date)
highlight-current-week	Highlights the current week based on the current date.	Boolean	false	false, true
hint	Optional text about the expected date picker.	String	null
label	The label for the date picker field. If we are in multi calendar, we pass an object and it should have the following structure: { from: string, to: string, }	String, Object	null
locale	The locale to use for the date picker.	String	'default'	default, de-DE, en-GB, en-US, es-CO, es-MX, es-ES, es-US, it-IT, pl-PL, pt-BR, pt-PT, tr-TR
model-value	The selected date(s) of the date picker.	Array	null	Array<Date>
open	Controls whether the dropdown is open or not.	Boolean	false	false, true
parser	The parser function which accepts a string and returns a Date. By default it uses the ISO-8601 format.	Function
placeholder	Placeholder text to display within the date picker field.	String	null
readonly	Set the datepicker input to a readonly state. It remains focusable and will be submitted in forms, but cannot be edited.	Boolean	false	false, true
required	Determines whether the date picker is required or not.	Boolean	false	false, true
target	Type string or an actual DOM node where you want render component	Strong, Object	'body'
translations	Object with all necessary translations.	Object	{ triggerIconCalendar: 'Date picker', triggerIconToggle: 'Toggle', month: 'Month', year: 'Year', previousMonth: 'Previous month', nextMonth: 'Next month',}	{ triggerIconCalendar: string, triggerIconToggle: string, month: string, year: string, previousMonth: string, nextMonth: string}
use-teleport	When it is set to true, date picker menu will teleport the content part into the target.	Boolean	false	false, true
variant	Controls whether the date picker is multi month or not.	String	'single'	'single', 'range'

Name	Description	Type
select	Emits the selected date(s). If the datepicker is single, it will emit an array with one date. If the datepicker is in range, it will emit an array with two dates.	{ "names": [ "Array<Date>" ] }
update:modelValue	Emits the selected date(s). If the datepicker is single, it will emit an array with one date. If the datepicker is in range, it will emit an array with two dates.	{ "names": [ "Array<Date>" ] }

Name	Description
hint	Use it to provide rich content for input hint. Takes precedence over hint property.

Date Picker

Events

Slots